Author Topic: [MOD] Fading Effect For Thumbnails In 4Image (IE only)  (Read 21613 times)

0 Members and 1 Guest are viewing this topic.

Offline RezaSalmanzadeh

  • Pre-Newbie
  • Posts: 9
    • View Profile
    • www.Taklyrics.com
[MOD] Fading Effect For Thumbnails In 4Image (IE only)
« on: March 14, 2005, 05:05:33 PM »
[MOD] Fading Effect For Thumbnails In 4Image

By this mod you can quickly create fading effect for all thumbnails in your webSite gallery



Just 2 files to edit:
/templates/default(or template name)/header.html
/includes/functions.php



-------[installing]-------

Step 1.

Open /templates/default/header.html
Insert this javascript code between <head></head> tags
Code: [Select]
<script>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
       
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
   
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}
</script>

Also you can insert this javascript code without <script></script> tags in an external file (for example "Filename.js") and insert below code between <head></head> tags
Code: [Select]
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" SRC="Filename.js"></SCRIPT>

Step 2.

Open /includes/functions.php
Find:
Code: [Select]
function get_thumbnail_code($media_file_name, $thumb_file_name = "", $image_id, $cat_id, $image_name = "", $mode = "", $show_link = 1, $open_window = 0) {
  global $site_sess, $config;

  if (!check_media_type($media_file_name)) {
    $thumb = "<img src=\"".ICON_PATH."/404.gif\" border=\"0\" alt=\"\" />";
  }
  else {
    if (!get_file_path($thumb_file_name, "thumb", $cat_id, 0, 0)) {
      $file_src = ICON_PATH."/".get_file_extension($media_file_name).".gif";
      $image_info = @getimagesize($dummy);
      $width_height = (!empty($image_info[3])) ? " ".$image_info[3] : "";
      $thumb = "<img src=\"".$file_src."\" border=\"0\"".$width_height." alt=\"".$image_name."\" />";
    }
    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=\"".$image_name."\" />";
    }
  }

  if ($show_link) {
    if ($open_window) {
      $thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\" onclick=\"opendetailwindow()\" target=\"detailwindow\">".$thumb."</a>";
    }
    else {
      $thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\">".$thumb."</a>";
    }
  }
  return $thumb;
}

Replace with:
Code: [Select]
function get_thumbnail_code($media_file_name, $thumb_file_name = "", $image_id, $cat_id, $image_name = "", $mode = "", $show_link = 1, $open_window = 0) {
  global $site_sess, $config;

  if (!check_media_type($media_file_name)) {
    $thumb = "<img src=\"".ICON_PATH."/404.gif\" border=\"0\" alt=\"\" />";
  }
  else {
    if (!get_file_path($thumb_file_name, "thumb", $cat_id, 0, 0)) {
      $file_src = ICON_PATH."/".get_file_extension($media_file_name).".gif";
      $image_info = @getimagesize($dummy);
      $width_height = (!empty($image_info[3])) ? " ".$image_info[3] : "";
      $thumb = "<img src=\"".$file_src."\" style=\"filter:alpha(opacity=70)\" onMouseOver=\"nereidFade(this,100,50,20)\" onMouseOut=\"nereidFade(this,70,50,5)\" border=\"0\"".$width_height." alt=\"".$image_name."\" />";
    }
    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."\" style=\"filter:alpha(opacity=70)\" onMouseOver=\"nereidFade(this,100,50,20)\" onMouseOut=\"nereidFade(this,70,50,5)\" border=\"".$config['image_border']."\"".$width_height." alt=\"".$image_name."\" />";
    }
  }

  if ($show_link) {
    if ($open_window) {
      $thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\" onclick=\"opendetailwindow()\" target=\"detailwindow\">".$thumb."</a>";
    }
    else {
      $thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\">".$thumb."</a>";
    }
  }
  return $thumb;
}


/*

  This mod is active only in IE5+

*/

Good luck!
Reza Salmanzadeh  :wink:
« Last Edit: March 15, 2005, 01:19:49 AM by Chris »

b.o.fan

  • Guest
Re: [MOD] Fading Effect For Thumbnails In 4Image
« Reply #1 on: March 14, 2005, 05:14:12 PM »
what can i see wen i do this MOD?

a demo?

Offline RezaSalmanzadeh

  • Pre-Newbie
  • Posts: 9
    • View Profile
    • www.Taklyrics.com
Re: [MOD] Fading Effect For Thumbnails In 4Image
« Reply #2 on: March 14, 2005, 10:03:41 PM »
hello dear "b.o.fan"
I am sorry , i can not show a demo of this mod because i dont inistall 4image on the my host (my host is down) but i tested this mod on the personal computer please if you or other friends testing this mod insert below link your website tanx.

Reza!  :wink:

Offline Chris

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.487
  • Did u ever stop to think and then forget to start?
    • View Profile

Offline RezaSalmanzadeh

  • Pre-Newbie
  • Posts: 9
    • View Profile
    • www.Taklyrics.com
Re: [MOD] Fading Effect For Thumbnails In 4Image (IE only)
« Reply #4 on: March 15, 2005, 03:41:02 PM »
Tanx for link  :wink:

Reza

Offline police22

  • Jr. Member
  • **
  • Posts: 70
    • View Profile
    • The Dartez Page
Re: [MOD] Fading Effect For Thumbnails In 4Image (IE only)
« Reply #5 on: April 19, 2005, 02:04:06 AM »
hello dear "b.o.fan"
I am sorry , i can not show a demo of this mod because i dont inistall 4image on the my host (my host is down) but i tested this mod on the personal computer please if you or other friends testing this mod insert below link your website tanx.

Reza! :wink:

Hey Reza,
I just installed this just to see how it works... install was smooth and its pretty cool... played with the settings like the fade effect timing etc..
You can look at it at: http://dartezpix.servepics.com
Thanks for this little mod.  :P :P

Offline Flo2005

  • Full Member
  • ***
  • Posts: 237
  • Copy & Paste Profi :)
    • View Profile
    • snuup.de! - Bilder - Sounds - Videos - fun4FREE!
Example for this code
« Reply #6 on: May 18, 2005, 09:16:16 AM »
Check this out http://www.snuup.de/portal/include.php?src=4images/index.php very simple & nice - thx!  :mrgreen:

Project offline

Offline greg2005

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: [MOD] Fading Effect For Thumbnails In 4Image (IE only)
« Reply #7 on: July 25, 2005, 09:26:36 AM »
Well This image effect is great and it worked but one problem well i had a popup message saying that only register user can view full picturs now that popup message doesnt work can someone please help

Offline RezaSalmanzadeh

  • Pre-Newbie
  • Posts: 9
    • View Profile
    • www.Taklyrics.com
Re: [MOD] Fading Effect For Thumbnails In 4Image (IE only)
« Reply #8 on: August 12, 2005, 02:23:25 PM »
Tanx all  :wink:

Offline Nasser

  • Full Member
  • ***
  • Posts: 105
    • View Profile
Re: [MOD] Fading Effect For Thumbnails In 4Image (IE only)
« Reply #9 on: October 31, 2005, 07:27:38 PM »
very nice .. thanks a lot

Offline marius26

  • Newbie
  • *
  • Posts: 21
    • View Profile
    • http://www.steves-network.net
Re: [MOD] Fading Effect For Thumbnails In 4Image (IE only)
« Reply #10 on: November 06, 2005, 01:26:52 PM »
works great  :lol:  you can have a look how it works here: http://gallery.steves-network.com/ make sure you open it in IE

Offline gifwav

  • Newbie
  • *
  • Posts: 37
    • View Profile
    • http://www.funpics4u.com
Re: [MOD] Fading Effect For Thumbnails In 4Image (IE only)
« Reply #11 on: August 26, 2006, 08:04:34 PM »
Hello,

You can also create this fading effect by using CSS.
And it works in Firefox too!

Open /templates/default/style.css and add at the end of the file:

Code: [Select]
.row1 a img, .row2 a img, .imagerow1 a img, .imagerow2 a img {filter: alpha(opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); -moz-opacity: 0.70; opacity:0.7;}
.row1 a:hover img, .row2 a:hover img, .imagerow1 a:hover img, .imagerow2 a:hover img {filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1.00; opacity:1;}

That's all.

Example: http://www.funpics4u.com