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),.....
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.
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
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:
<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:
$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.php
At 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.php
Directory of file: /include/functions.inc.php
Search 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.php
Directory of file: main directory
Search 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.php
Directory of file: main directory
Search 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,....
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 (http://forum.coppermine-gallery.net/index.php?topic=13718.0)
and the help of the mods when i stuck in changing cpg
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
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) :-)