4images Forum & Community

4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: nightfallsnet on December 31, 2010, 03:32:34 AM

Title: [MOD] Animate Thumbnail on Mouseover - (for .gif galleries)
Post by: nightfallsnet 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_id, 0, 1);
      $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_name, 2)."\" title=\"".format_text($image_name, 2)."\" />";
    }

REPLACE WITH:

    else {
      $file_src = get_file_path($thumb_file_name, "thumb", $cat_id, 0, 1);
      $orig_src = get_file_path($thumb_file_name, "media", $cat_id, 0, 1);
      $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_name, 2)."\" title=\"".format_text($image_name, 2)."\"/>";
    }

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!

Title: Re: [MOD] Animate Thumbnail on Mouseover - (for .gif galleries)
Post by: wasimkhan on January 04, 2011, 03:21:05 PM

which file need to edit plz reply

Title: Re: [MOD] Animate Thumbnail on Mouseover - (for .gif galleries)
Post by: tutton on January 04, 2011, 03:55:34 PM

Quote from: wasimkhan on January 04, 2011, 03:21:05 PM

which file need to edit plz reply

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



Cool mod!  :D

Title: Re: [MOD] Animate Thumbnail on Mouseover - (for .gif galleries)
Post by: nightfallsnet 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 (http://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