Fade-in images on load for cpg 1.49 (HowTo) Fade-in images on load for cpg 1.49 (HowTo)
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

Fade-in images on load for cpg 1.49 (HowTo)

Started by Lif3styl3, August 29, 2006, 09:28:59 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

Lif3styl3

August 29, 2006, 09:28:59 PM Last Edit: August 30, 2006, 06:15:57 PM by Lif3styl3
i've read the thread in in mod visual for the cpg 1.3x version,....

I tried to do improve this feature to the new gallery,...
actually it seems to work perfectly,...
I want to ask if its possible to move my thred to the mods visual sections

So I would write a howto for cpg 1.49 ???
Hope done everything right know,....
They way to write howto at the right place seems to be a bit complicated for me (new user),.....

Joachim Müller

#1
August 29, 2006, 11:30:38 PM
Yes, write a full thread with detailed instructions to make the thread able to stand on its own. Just post a reference link to the cpg1.3.x mod you used as a base. A moderator will move your thread if applicable.

Lif3styl3

#2
August 30, 2006, 12:48:13 PM Last Edit: August 31, 2006, 03:45:53 PM by Lif3styl3
actually i found some bugs,.....
would be nice if somebody could take a look
The thumbnails of an album will be faded in without peloading,...
but the thumnails for newst uploads and random pictures are loaded at first viewing and after first loading has passed everything works fine,....

LifesHammer.de/_TEST_/cpg148
______________________________
AddOn:
All problems solved:
Plz try yourself

Actual state: Writing Howto

Lif3styl3

#3
August 30, 2006, 06:00:44 PM Last Edit: September 01, 2006, 08:54:59 AM by Lif3styl3
So,
that was my way to include the fade in effect to the actual version of cpg (1.49)
You only have to change these files:
/themes/{theme_name}/style.css
/themes/{theme_name}/Template.html
/themes/{theme_name}/Theme.php
include/functions.inc.php
index.php
upload.php
To do these changes u need 25minutes.


Live Demo @ LifesHammer.de/_TEST_/cpg148/
Integrated the FadeIn Effect in my real homepage with this howto. Everything was fine.
Watch www.LifesHammer.de/cpg148 for FadeIn in action

At first open your Template.html
Directory of file: /themes/{theme_name}/template.html


Between the <head> Tags insert the following lines:
Code Select
<script type="text/javascript">
<!--
function initImage(Id) {
      image = document.getElementById(Id);
      setOpacity(image, 0);
      image.style.visibility = "visible";
      fadeIn(Id,0);
}
function fadeIn(objId,opacity) {
      if (document.getElementById) {
            obj = document.getElementById(objId);
            if (opacity <= 100) {
                  setOpacity(obj, opacity);
                  opacity += 2;
                  window.setTimeout("fadeIn('"+objId+"',"+opacity+")",
100);
            }
      }
}
function setOpacity(obj, opacity) {
      opacity = (opacity == 100)?99.999:opacity;
      // IE/Win
      obj.style.filter = "alpha(opacity:"+opacity+")";
      // Safari<1.2, Konqueror
      obj.style.KHTMLOpacity = opacity/100;
      // Older Mozilla and Firefox
      obj.style.MozOpacity = opacity/100;
      // Safari 1.2, newer Firefox and Mozilla, CSS3
      obj.style.opacity = opacity/100;
}

// -->
</script>

Now u have to change your style.css, when this step isn't done your pictures will be loaded at first and in the second run they will be faded in.
Directory of file: /themes/{theme_name}/style.css

You need to find this line:
.image
After the last entry you have to add this line:
visibility:hidden;

Next step is to change the theme.php
Directory of file: /themes/{theme_name}/theme.php

When you don't find the ligns i mentioned in this step plz copy the whole //Display a Picture Part (in original file Line 2024-2472) from /include/theme.inc.php to your theme in themes/{theme_name}/theme.php

At first find this line in the //Display A Picture Part:
Code Select
$pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
and change it to:
Code Select
$ri = rand(0,10000);
$pic_html .= "<img src=\"" . $picture_url . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";

Now search for:
Code Select
$pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
and change it to:
Code Select
$ri = rand(0,10000);
$pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" border=\"0\" alt=\"\" /><br />\n";

When you don't find the ligns i mentioned in this step plz copy the whole //Display the full size image Part (in original file Line 2074-2546) from /include/theme.inc.php to your theme in themes/{theme_name}/theme.php

At first find this line in the //Display the full size image Part:
Code Select
<script type="text/javascript" src="scripts.js"></script>
After that line paste these ones:
Code Select
<script type="text/javascript">
<!--
function initImage() {
  imageId = 'thephoto';
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 2;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>

Now find:
Code Select
#content { margin:0 auto; padding:0; border:0; }
and after this line add the following:
Code Select
#thephoto {visibility:hidden;}

The last thing to find is:
Code Select
. 'alt="'
and after that one add:
Code Select
. htmlspecialchars($imagedata['name'])
. '" id="thephoto" '


After these things are done we have to work on this file: functions.inc.php
Directory of file: /include/functions.inc.php

Search for this entry (must be in line 1705 if you haven't changed something before):
Code Select
$thumb_list[$i]['image'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\"/>";
and replace it with the following lines:
Code Select
$ri = rand(0,10000);
$thumb_list[$i]['image'] = "<img src=\"" . $pic_url . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";

Then search for this entry (must be in line 1871 when u have only changend the step ahead):
Code Select
$thumb_list[$i]['image'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\" />";
and replace it with the following lines:
Code Select
$ri = rand(0,10000);
$thumb_list[$i]['image'] = "<img src=\"" . $pic_url . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";


Next step is changing the index.php
Directory of file: main directory

Search for this entry (must be in line 190 when u have changed nothing else):
Code Select
$user_thumb = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"\" />";
and change it to:
Code Select
$ri = rand(0,10000);
$user_thumb = "<img src=\"" . $pic_url . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";

Search for this entry (must be in line 384 when u have done only the steps above):
Code Select
$user_thumb = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"\" />";
and change it to:
Code Select
$ri = rand(0,10000);
$user_thumb = "<img src=\"" . $pic_url . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";

Search for this entry (must be in line 519 when u have done only the steps above):
Code Select
$alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$picture['filename']}\" />";and change it to:
Code Select
$ri = rand(0,10000);
$alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $pic_url . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";

Search for this entry ; u will find it twice (must be in line 524 & 688 when u have done only the steps above):
Code Select
$alb_list[$alb_idx]['thumb_pic'] = '<img src="' . $cpg_nopic_data['thumb'] . '" ' . $cpg_nopic_data['whole'] . ' class="image" border="0" alt="" />';
and change it to:
Code Select
$ri = rand(0,10000);
$alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $cpg_nopic_data['thumb'] . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";

Search for this entry ; u will find it twice (must be in line 530 & 693 when u have done only the steps above)
Code Select
$alb_list[$alb_idx]['thumb_pic'] = '<img src="' . $cpg_privatepic_data['thumb'] . '" ' . $cpg_privatepic_data['whole'] . ' class="image" border="0" alt="" />';
and change it to:
Code Select
$ri = rand(0,10000);
$alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $cpg_privatepic_data['thumb'] . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";

Search for this entry (must be in line 684 when u have done only the steps above):
Code Select
$alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$picture['filename']}\" />";and change it to:
Code Select
$ri = rand(0,10000);
$alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $pic_url . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";

After these things are done we have to work on this file: upload.php
Directory of file: main directory

Search for this entry (must be in line 2494 when it's the original file):
Code Select
echo "<tr><td class=\"tableh2\"><img class=\"image\" src=\"".$path_to_preview."\"  /></td>";
and change it to:
Code Select
echo "<tr><td class=\"tableh2\"><img class=\"image\" src=\"".$path_to_preview."\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\"/></td>";


Thats it,....

Lif3styl3

#4
August 30, 2006, 06:05:38 PM Last Edit: September 01, 2006, 09:10:51 AM by Lif3styl3
This is the way it works,....

Thanks for the great work of (was the original mod):
http://forum.coppermine-gallery.net/index.php?topic=13718.0
and the help of the mods when i stuck in changing cpg

bibendum

#5
November 08, 2007, 08:50:32 PM
Hi
Thanks for this update.
I have some problem, all my thumbs are faded, but when i want to watch full pictures, pictures are showed first without fade during 1/2 secondes and appear with fade just after.
How to resolve it ?
Thanks

Elguerrero

#6
May 11, 2008, 12:08:27 AM
I must say its really nice!

Before iam going to ask/ inform (must say iam not really into php/ codes etc.)

Could  we have the luck, that somebody already have made this script XHTML VALID, (because its giving a lot of errors).

Thanks in advance (hope so) :-)

Print
Go Up Pages1
User actions