Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Mod/Add On: Diashow with pan effect, integration into themes possible  (Read 11179 times)

0 Members and 1 Guest are viewing this topic.

Timos-Welt

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 808
    • 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]
$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]
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]
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
« Last Edit: November 28, 2007, 08:14:32 am by GauGau »
Logged

Timos-Welt

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 808
    • Timos-Welt
Re: Mod/Add On: Diashow with pan effect, integration into themes possible
« Reply #1 on: November 27, 2007, 11:40:12 am »

Just added the promised theme integration into first post.

regards
Timo
Logged
Pages: [1]   Go Up
 

Page created in 0.02 seconds with 20 queries.