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.phpTo 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.htmlDirectory of file:
/themes/{theme_name}/template.htmlBetween the <head> Tags insert the following lines:
<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.cssYou 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.phpDirectory of file:
/themes/{theme_name}/theme.phpWhen 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.phpAt first find this line in the //Display A Picture Part:
$pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";and change it to:
$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:
$pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";and change it to:
$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.phpAt first find this line in the //Display the full size image Part:
<script type="text/javascript" src="scripts.js"></script>After that line paste these ones:
<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:
#content { margin:0 auto; padding:0; border:0; }and after this line add the following:
#thephoto {visibility:hidden;}The last thing to find is:
. 'alt="'and after that one add:
. htmlspecialchars($imagedata['name'])
. '" id="thephoto" 'After these things are done we have to work on this file:
functions.inc.phpDirectory of file:
/include/functions.inc.phpSearch for this entry (must be in line 1705 if you haven’t changed something before):
$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:
$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):
$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:
$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.phpDirectory of file:
main directorySearch for this entry (must be in line 190 when u have changed nothing else):
$user_thumb = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"\" />";and change it to:
$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):
$user_thumb = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"\" />";and change it to:
$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):
$alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$picture['filename']}\" />";and change it to:
$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):
$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:
$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)
$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:
$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):
$alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$picture['filename']}\" />";and change it to:
$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.phpDirectory of file:
main directorySearch for this entry (must be in line 2494 when it's the original file):
echo "<tr><td class=\"tableh2\"><img class=\"image\" src=\"".$path_to_preview."\" /></td>";and change it to:
echo "<tr><td class=\"tableh2\"><img class=\"image\" src=\"".$path_to_preview."\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\"/></td>";Thats it,....
Author
Topic: Fade-in images on load for cpg 1.49 (HowTo) (Read 8005 times)