forum.coppermine-gallery.net
No Support => Modifications/Add-Ons/Hacks => Mods: Visuals => Topic started by: Timos-Welt on November 23, 2007, 12:10:57 pm
-
This add on includes two similar things; first there's an image scroller that works standalone (e. g. for integration into title page). Example see http://www.timos-welt.de. Second is an integration into Coppermine themes to get a nicer slideshow. Example see http://pics.timos-welt.de/displayimage-22-2.html and hit slideshow button. Both use the same JS technology. Both are still beta.
1) Stand alone image scroller
Features:
- Nice pan slide show with fade transitions.
- To move on to next pic, click into animation.
- Compatible and tested with IE (Win), Firefox (Win and Linux), Opera (Win and Linux), Konqueror (Linux), Safari (Win).
- Pure Javascript, no plug ins needed.
- CPU intensive, but will never lock up any computer fully.
- Works fine on a Celeron 1000 PC with onboard graphics and above.
Requirements:
- Full size pics in your gallery are bigger than 500x333 px
Installation:
- Copy contents of advss.zip to your gallery root.
- Open diashow.php in browser.
- Adapt startpic.jpg to your needs. Should stay 500x333 in size.
- Integrate via iframe.
Example:
- http://pics.timos-welt.de/diashow.php (pure script)
- http://www.timos-welt.de (Integrated into homepage)
2) Theme integration
Features:
- Advanced slide show for your gallery.
- Three modes:
Mode 1 - Normal pics will be displayed fading in and out (like standard coppermine slideshow, but fade works in any browser, not only IE).
Mode 2 - Full pics will be displayed via pan animation.
Mode 3 - Randomly uses Mode 1 or 2 for each pic.
- Works in any modern browser.
- To move on to next pic, click into animation.
Installation:
- Extract theme_integration.zip file to your local harddisk.
- Open slideshow.inc.php with text editor.
- Find line $advssmode=...- Set to 1 to view only normal pics (no animation; pretty much like built in browser but transition works in any browser, not only IE).
- Set to 2 to use full size pic and always view pan animation if pic is big enough,
- Set to 3 to randomly use 1 or 2 mode (default value).
- Open theme.php of your own theme.
- Search for function theme_slideshow(). In most themes, you won't find it. If you really find it, stop here and use another theme.
- Paste the following code before the final ?> into your theme.php:
function theme_slideshow()
{
global $CONFIG, $lang_display_image_php, $template_display_media, $template_display_media_advss;
$template_display_media_advss = <<<EOT
<div id="voelligegal" style="position:absolute;top:8000px;left:8000px;"><img src="" width="1" height="1" style="position:absolute;top:8000px;left:8000px;" border="0" alt=""></div>
<div id="image" name="image" style="position:absolute;top:600;left:600;clip:rect(0 600 400 0);z-index:1;"><a href="javascript:advssnextpic()">
<img id="jau" name="jau" style="opacity:0;MozOpacity:0;filter:'alpha(opacity=0)';z-index:5;" src="" width="1800" height="1200" border="0" alt="">
</a></div>
<div id="loading" name="loading" style="position:absolute;top:288;left:7800;visibility:visible;z-index:1;"><img id="loader" src="loader.gif" width="32" height="32" border="0" alt=""></div>
<tr>
<td align="center" class="display_media" nowrap="nowrap">
<table cellspacing="2" cellpadding="0" class="imageborder">
<tr>
<td align="center">
{IMAGE}
</td>
</tr>
</table>
</td></tr>
<tr><td>
<table width="100%" cellspacing="2" cellpadding="0" class="tableb">
<tr>
<td align="center">
{ADMIN_MENU}
</td>
</tr>
</table>
<!-- BEGIN img_desc -->
<table cellpadding="0" cellspacing="0" class="tableb" width="100%">
<!-- BEGIN title -->
<tr>
<td class="tableb"><center><b>
{TITLE}
</b></center></td>
</tr>
<!-- END title -->
<!-- BEGIN caption -->
<tr>
<td class="tableb"><center>
{CAPTION}
</center></td>
</tr>
<!-- END caption -->
</table>
<!-- END img_desc -->
</td>
</tr>
EOT;
pageheader($lang_display_image_php['slideshow']);
include "include/slideshow.inc.php";
$start_slideshow = '<script language="JavaScript" type="text/JavaScript">advssstartMe()</script>';
template_extract_block($template_display_media_advss, 'img_desc', $start_slideshow);
$params = array('{CELL_HEIGHT}' => $CONFIG['picture_width'] + 100,
'{IMAGE}' => '<div id="normal"><img src="' . $start_img . '" name="normalimg" id="normalimg" class="image" width="'.$start_img_width.'" height="'.$start_img_height.'" /></div>',
'{ADMIN_MENU}' => '',
);
starttable();
echo template_eval($template_display_media_advss, $params);
endtable();
starttable();
echo <<<EOT
<tr>
<td align="center" class="navmenu" style="white-space: nowrap;">
<a href="javascript:endSlideShow()" class="navmenu">{$lang_display_image_php['stop_slideshow']}</a>
</td>
</tr>
EOT;
endtable();
pagefooter();
}
- Make backup copies of your theme.php and include/slideshow.inc.php.
- Replace theme.php with the modified one and include/slideshow.inc.php with the one from the ZIP file.
- Copy loader.gif to your gallery root.
Example: http://pics.timos-welt.de - play around with slideshow feature there.
Known bugs (remember this is still beta):
- Sometimes pics in portait mode are displayed wrong.
- Wrong position of display after browser resize.
Both bugs will be corrected in a future release. Please report further bugs in this thread.
Have fun!
regards
Timo
-
Just added the promised theme integration into first post.
regards
Timo