Mod/Add On: Diashow with pan effect, integration into themes possible

[Timos-Welt]

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

Code Select Expand

$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

Code Select Expand

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:

Code Select Expand


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

[Timos-Welt]

Just added the promised theme integration into first post.

regards
Timo