Author Topic: [MOD] Animate Thumbnail on Mouseover - (for .gif galleries)  (Read 4923 times)

0 Members and 1 Guest are viewing this topic.

Offline nightfallsnet

  • Newbie
  • *
  • Posts: 11
    • View Profile
[MOD] Animate Thumbnail on Mouseover - (for .gif galleries)
« on: December 31, 2010, 03:32:34 AM »
My first MOD! came about when none of the Auto-thumbnailers were working with my HQ gifs. So I made it so they are still images until mouse-over - it previews the actual file.
you see this on Video/porno websites..
I also made it so that width is a percentage = fluid thumbnail layout.  8)

Demo: hdgif.com/home (images need buffering period, you'll see)

located in includes/functions.php

FIND:

    else {
      
$file_src get_file_path($thumb_file_name"thumb"$cat_id01);
      
$image_info = @getimagesize($file_src);
      
$width_height = (!empty($image_info[3])) ? " ".$image_info[3] : "";
      
$thumb "<img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." alt=\"".format_text($image_name2)."\" title=\"".format_text($image_name2)."\" />";
    }


REPLACE WITH:


    else {
      
$file_src get_file_path($thumb_file_name"thumb"$cat_id01);
      
$orig_src get_file_path($thumb_file_name"media"$cat_id01);
      
$image_info = @getimagesize($file_src);
      
$width_height = (!empty($image_info[3])) ? " ".$image_info[3] : "";
       
$thumb "<img onmouseover=\"(src='$orig_src')\" src=\"".$file_src."\" onmouseout=\"(src='$file_src')\" width=\"90%\" class=\"pic\" border=\"0\"  alt=\"".format_text($image_name2)."\" title=\"".format_text($image_name2)."\"/>";
    }


Any suggestions?

REQUESTs:

In IE i need to fix the width.. how do i add width="90%" into string - onmouseover=\"(src='$orig_src')\"  ??

For the Lightbox Page I want to use the "media" source instead of the "thumb" so that they are animated - help here would be cool...

Also If you go to my Lightbox page and click on an image i get a 404 error  :? any help with that would be great

Hope you like my lil mod  :lol:
THNX!





« Last Edit: January 20, 2011, 02:13:47 AM by nightfallsnet »

Offline wasimkhan

  • Newbie
  • *
  • Posts: 14
    • View Profile
Re: [MOD] Animate Thumbnail on Mouseover - (for .gif galleries)
« Reply #1 on: January 04, 2011, 03:21:05 PM »
which file need to edit plz reply

Offline tutton

  • Newbie
  • *
  • Posts: 13
    • View Profile
Re: [MOD] Animate Thumbnail on Mouseover - (for .gif galleries)
« Reply #2 on: January 04, 2011, 03:55:34 PM »
which file need to edit plz reply

the file to edit is located in includes/functions.php



Cool mod!  :D

Offline nightfallsnet

  • Newbie
  • *
  • Posts: 11
    • View Profile
Re: [MOD] Animate Thumbnail on Mouseover - (for .gif galleries)
« Reply #3 on: January 20, 2011, 02:21:39 AM »
hey sorry - location added.

If you want to go a bit further & add animation -

mod the .pic class in style.css

with this code:
Code: [Select]

.pic{
-webkit-transform:scale(1); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration: .3s; /*Webkit: Animation duration*/
-moz-transition-duration: .3s; /*Mozilla duration version*/
-o-transition-duration: .3s; /*Opera duration version*/
opacity: 1; /*initial opacity of images*/
z-index: 20;
}

.pic:hover{
-webkit-transform:scale(1.24); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.24); /*Mozilla scale version*/
-o-transform:scale(1.24); /*Opera scale version*/
opacity: 1;
-moz-box-shadow: 0 0 20px  10px  black;
-webkit-box-shadow: 0 0 20px 10px   black;
box-shadow: 0 0 20px 10px  black;
z-index: 22;
}


DEMO @ HDgif.com/home

works in FF but doesn't animate the grow/shrink..


STill looking for IE fix for fluid layout! if anyone could help