Help with Slide Show Singapore Theme Help with Slide Show Singapore Theme
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

Help with Slide Show Singapore Theme

Started by photoguy, September 01, 2004, 08:06:24 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

photoguy

September 01, 2004, 08:06:24 AM
Hello All,

I really love the Singapore theme, but unfortunatelly I am getting an error that is beyond of my skills to repair:

Line 187
Error: ' document.images.SlideShow.style' is null or not an object.

Could anybody please post a fix for this problem? Please find below a copy+paste of the source code.

Thanks
Daniel



=========================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr">
<head>
<title>Galeria de Fotos - Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma" content="no-cache" />

<link rel="stylesheet" href="themes/singapore/style.css" />
<script type="text/javascript" src="scripts.js"></script>
<!--
// ------------------------------------------------------------------------- //
// $Id: template.html,v 1.3 2004/06/07 07:55:38 caspershadow Exp $
// ------------------------------------------------------------------------- //
// This coppermine theme 'singapore' is based on the looks and graphics used //
// in the default theme of the open source gallery software 'Singapore' that //
// is being released under GNU GPL and that can be found at                  //
// http://singapore.sourceforge.net/ .                                       //
// Most graphics used in this theme have been created by Tamlyn Rhodes, the  //
// creator of the 'Singapore' software.                                      //
// ------------------------------------------------------------------------- //
-->
</head>
<body>
<table border="0" cellspacing="10" cellpadding="10">
<tr>
<td>
<a href="index.php"><img src="themes/singapore/images/site_logo.png" width="468" height="60" border="0" alt="" title=""></a>
</td>
<td>
<h1>Galeria de Fotos</h1>
<h3>Fotos do Canadá e outros cool places</h3>

<a href="/coppermine/displayimage.php?album=19&pid=702&slideshow=5000&lang=brazilian_portuguese"><img src="images/flags/br.gif" border="0" width="16" height="10" alt="" title="Portuguese [Brazilian] (Portugu&ecirc;s Brasileiro)" /></a>&nbsp;

<a href="/coppermine/displayimage.php?album=19&pid=702&slideshow=5000&lang=english"><img src="images/flags/gb.gif" border="0" width="16" height="10" alt="" title="English" /></a>&nbsp;

<a href="/coppermine/displayimage.php?album=19&pid=702&slideshow=5000&lang=french"><img src="images/flags/fr.gif" border="0" width="16" height="10" alt="" title="French (Fran&ccedil;ais)" /></a>&nbsp;

<a href="/coppermine/displayimage.php?album=19&pid=702&slideshow=5000&lang=german"><img src="images/flags/de.gif" border="0" width="16" height="10" alt="" title="German (Deutsch)" /></a>&nbsp;

<a href="/coppermine/displayimage.php?album=19&pid=702&slideshow=5000&lang=italian"><img src="images/flags/it.gif" border="0" width="16" height="10" alt="" title="Italian (Italiano)" /></a>&nbsp;

<a href="/coppermine/displayimage.php?album=19&pid=702&slideshow=5000&lang=spanish"><img src="images/flags/es.gif" border="0" width="16" height="10" alt="" title="Spanish (Espa&ntilde;ol)" /></a>&nbsp;



<form name="cpgChooseTheme" action="/coppermine/displayimage.php?album=19&pid=702&slideshow=5000&theme=" method="get" style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;display:inline">
<select name="cpgThemeSelect" class="listbox_lang" onchange="if (this.options[this.selectedIndex].value) window.location.href='/coppermine/displayimage.php?album=19&pid=702&slideshow=5000&theme=' + this.options[this.selectedIndex].value;">
<option selected="selected">Choose a theme</option><option value="anabolica">Anabolica</option>
<option value="anime">Anime</option>
<option value="classic">Classic</option>
<option value="elektro">Elektro</option>
<option value="eyeball">Eyeball</option>
<option value="fruity">Fruity</option>
<option value="hardwired">Hardwired</option>
<option value="helius">Helius</option>
<option value="hestia">Hestia</option>
<option value="igames">Igames</option>
<option value="mac_ox_x">Mac ox x</option>
<option value="noginnskins1">Noginnskins1</option>
<option value="project_vii">Project vii</option>
<option value="rainy_day">Rainy day</option>
<option value="singapore">Singapore*</option>
<option value="styleguide">Styleguide</option>
<option value="synthetic_blue">Synthetic blue</option>
<option value="water_drop">Water drop</option>
<option value="winterdreams">Winterdreams</option>
<option value="xxx">Default theme</option>
</select>
</form>

</td>
</tr>
</table>
                <span class="topmenu">
<!-- BEGIN album_list -->
                        <a href="index.php?cat=0" title="Go to the album list">Album list</a> ::
<!-- END album_list -->








<!-- BEGIN login -->
                        <a href="login.php?referer=%2Fcoppermine%2Fdisplayimage.php%3Falbum%3D19%26pid%3D702%26slideshow%3D5000">Login</a>
<!-- END login -->

                        ::
                        <a href="thumbnails.php?album=lastup&cat=0">Last uploads</a> ::
                        <a href="thumbnails.php?album=lastcom&cat=0">Last comments</a> ::
                        <a href="thumbnails.php?album=topn&cat=0">Most viewed</a> ::
                        <a href="thumbnails.php?album=toprated&cat=0">Top rated</a> ::
                        <a href="thumbnails.php?album=favpics">My Favorites</a> ::
                        <a href="search.php">Search</a>
                </span>


<script language="JavaScript" type="text/JavaScript">
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// $Id: slideshow.inc.php,v 1.6 2004/07/24 15:04:09 gaugau Exp $

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000
// Agent sniffer shamelessly 'stolen' from the excellent X library from cross-browser.com
var xOp7=false,xOp5or6=false,xIE4Up=false,xNN4=false,xUA=navigator.userAgent.toLowerCase();
if(window.opera){
  xOp7=(xUA.indexOf('opera 7')!=-1 || xUA.indexOf('opera/7')!=-1);
  if (!xOp7) xOp5or6=(xUA.indexOf('opera 5')!=-1 || xUA.indexOf('opera/5')!=-1 || xUA.indexOf('opera 6')!=-1 || xUA.indexOf('opera/6')!=-1);
}
else if(document.layers) xNN4=true;
else {xIE4Up=document.all && xUA.indexOf('msie')!=-1 && parseInt(navigator.appVersion)>=4;}

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'albums/userpics/LucasPics/2004/normal_08AGO2004_0009.JPG'
Pic[1] = 'albums/userpics/LucasPics/2004/normal_08AGO2004_0015.JPG'
Pic[2] = 'albums/userpics/LucasPics/2004/normal_17JUL2004_0004.JPG'
Pic[3] = 'albums/userpics/LucasPics/2004/normal_12JUL2004_0031.JPG'
Pic[4] = 'albums/userpics/LucasPics/2004/normal_12JUL2004_0036.JPG'
Pic[5] = 'albums/userpics/LucasPics/2004/normal_12JUL2004_0028.JPG'
Pic[6] = 'albums/userpics/LucasPics/2004/normal_12JUL2004_0027.JPG'
Pic[7] = 'albums/userpics/LucasPics/2004/normal_12JUL2004_0024.JPG'
Pic[8] = 'albums/userpics/LucasPics/2004/normal_12JUL2004_0017.JPG'
Pic[9] = 'albums/userpics/LucasPics/2004/normal_07JUL2004_0005.JPG'
Pic[10] = 'albums/userpics/LucasPics/2004/normal_IMG_2821.JPG'
Pic[11] = 'albums/userpics/LucasPics/2004/normal_23MAY2004_2752.JPG'
Pic[12] = 'albums/userpics/LucasPics/2004/normal_23MAY2004_2748.JPG'
Pic[13] = 'albums/userpics/LucasPics/2004/normal_23MAY2004_2738.JPG'
Pic[14] = 'albums/userpics/LucasPics/2004/normal_23MAY2004_2740.JPG'
Pic[15] = 'albums/userpics/LucasPics/2004/normal_23MAY2004_2691.JPG'
Pic[16] = 'albums/userpics/LucasPics/2004/normal_23MAY2004_2722.JPG'
Pic[17] = 'albums/userpics/LucasPics/2004/normal_22MAY2004_2687.JPG'
Pic[18] = 'albums/userpics/LucasPics/2004/normal_22MAY2004_2686.JPG'
Pic[19] = 'albums/userpics/LucasPics/2004/normal_08MAY2004_0017.JPG'
Pic[20] = 'albums/userpics/LucasPics/2004/normal_04MAY2004_0012.JPG'
Pic[21] = 'albums/userpics/LucasPics/2004/normal_04MAY2004_0011.JPG'
Pic[22] = 'albums/userpics/LucasPics/2004/normal_04MAY2004_0008.JPG'
Pic[23] = 'albums/userpics/LucasPics/2004/normal_04MAY2004_0005.JPG'
Pic[24] = 'albums/userpics/LucasPics/2004/normal_09ABR2004_0021.JPG'
Pic[25] = 'albums/userpics/LucasPics/2004/normal_09ABR2004_0003.JPG'
Pic[26] = 'albums/userpics/LucasPics/2004/normal_09ABR2004_0023.JPG'
Pic[27] = 'albums/userpics/LucasPics/2004/normal_04ABR2004005.JPG'
Pic[28] = 'albums/userpics/LucasPics/2004/normal_21MAR20040003.JPG'
Pic[29] = 'albums/userpics/LucasPics/2004/normal_21MAR20040014.JPG'
Pic[30] = 'albums/userpics/LucasPics/2004/normal_20MAR2004_0014.jpg'
Pic[31] = 'albums/userpics/LucasPics/2004/normal_20MAR2004_0018.jpg'
Pic[32] = 'albums/userpics/LucasPics/normal_15JAN2004_0018.JPG'
Pic[33] = 'albums/userpics/LucasPics/normal_15JAN2004_0016_r1.JPG'
Pic[34] = 'albums/userpics/LucasPics/normal_01FEV2004_0041.JPG'
Pic[35] = 'albums/userpics/LucasPics/normal_01FEV2004_0031.JPG'
Pic[36] = 'albums/userpics/LucasPics/normal_01FEV2004_0025.JPG'
Pic[37] = 'albums/userpics/LucasPics/normal_01FEV2004_0022.JPG'
Pic[38] = 'albums/userpics/LucasPics/normal_01FEV2004_0019.JPG'

var t
var j = 0
var p = Pic.length
var pos = j

var preLoad = new Array()

function preLoadPic(index)
{
        if (Pic[index] != ''){
                window.status='Loading : '+Pic[index]
                preLoad[index] = new Image()
                preLoad[index].src = Pic[index]
                Pic[index] = ''
                window.status=''
        }
}

function runSlideShow(){
   if (xIE4Up){
            document.images.SlideShow.style.filter="blendTrans(duration=2)"
                document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()
        }
        document.images.SlideShow.src = preLoad[j].src
        if (xIE4Up){
           document.images.SlideShow.filters.blendTrans.Play()
        }

        pos = j

        j = j + 1
        if (j > (p-1)) j=0
        t = setTimeout('runSlideShow()', slideShowSpeed)
        preLoadPic(j)
}

function endSlideShow(){
        self.document.location = 'displayimage.php?album=19&pos='+pos
}

preLoadPic(j)

</script>

<!-- Start standard table -->
<table align="center" width="100%" cellspacing="1" cellpadding="0" class="maintable">        <tr>
                <td align="center" class="tableb" height="740" style="white-space: nowrap; padding: 0px;">
<script language="JavaScript" type="text/JavaScript">runSlideShow()</script>
                                                <img src="albums/userpics/LucasPics/2004/normal_08AGO2004_0009.JPG" name="SlideShow" class="image" /><br />
                                               
                </td>
        </tr>
</table>
<!-- End standard table -->

<!-- Start standard table -->
<table align="center" width="100%" cellspacing="1" cellpadding="0" class="maintable">        <tr>
                <td align="center" class="navmenu" style="white-space: nowrap;">
                        <a href="javascript:endSlideShow()" class="navmenu">STOP SLIDESHOW</a>
                </td>
        </tr>
</table>
<!-- End standard table -->
<div class="footer" align="center" style="padding-top: 10px;">Powered by <a href="http://coppermine.sf.net/" target="_blank">Coppermine Photo Gallery</a></div>
<hr style="height:2px; text-align:center; color:#009AFF; width:700px" />
<!--Coppermine Photo Gallery 1.3.2--></body>
</html>



Joachim Müller

#1
September 01, 2004, 08:56:32 AM

kmax

#2
April 01, 2005, 08:51:25 PM
Hi, new coppermine user here.  Sorry for bringing up an old post, but I liked the Singapore style when I saw it on the demo but ran into this problem with the slideshow when I loaded it onto my site.  When I saw this thread I realized it hadn't been resolved so I decided to look into it and thought this thread would be the best place for discussion of the problem/solution.

The problem is occurring because Singapore is apparently the one and only theme that puts the image description before the image as defined by $template_display_picture in the theme.php file.  In the slideshow function of displayimage.php the img_desc block is replaced with the javascript call to beginSlideShow.  This accomplishes two intended things,it gets rid of the title and description which are not wanted in the slideshow and it starts the automatic image switching of the slideshow, but it also has one unintended consequence--namely that the image description must be after the image.  This is fine for almost all of the themes, as they have the image description after the actual image.  But in Singapore, the img_desc block ends before the image so when the first call to beginSlideShow happens it tries to reference the image (as document.images.SlideShow) which does not yet exist so the function errors out and never makes it to the setTimeout function which allows the automatic switching.

Ideally it might be best to have a seperate theme template variable for the slideshow image to allow easier theming for the slideshow image to look more like the rest of the theme.  However for a simpler fix, I just modified the slideshow function slightly.  In doing this I basically just took out the dual functionality of the removal of the img_desc block and just had it remove that block, then put the javascript call to beginSlideShow in the {IMAGE} replacement params.  See below for my changes:

In file displayimage.php, function slideshow() find the following lines:
Code Select

    template_extract_block($template_display_picture, 'img_desc', $start_slideshow);

    $params = array('{CELL_HEIGHT}' => $CONFIG['picture_width'] + 100,
        '{IMAGE}' => '<img src="' . $start_img . '" name="SlideShow" class="image"/><br />',
        '{ADMIN_MENU}' => '',
        );

and change them to look like this:
Code Select

    template_extract_block($template_display_picture, 'img_desc');

    $params = array('{CELL_HEIGHT}' => $CONFIG['picture_width'] + 100,
        '{IMAGE}' => '<img src="' . $start_img . '" name="SlideShow" class="image"/>' . $start_slideshow . '<br />',
        '{ADMIN_MENU}' => '',
        );


This change allows the removal of the img_desc block as desired for the slideshow and then places the javascript call to beginSlideShow immediately following the img tag to ensure that the image always exists before the function is called.

On a side note, there are a couple of themes that do have the title before the picture but still have the description after the image, one such theme is mystique tulip.  For these types of themes, the slideshow works properly because the description block is after the image, however since the title block is not embedded in the img_desc block it does not get removed and thus the slideshow for these themes show {TITLE} above the image in the slideshow mode, which doesn't look very nice.  To fix this issue, and essentially allow the title and description to be placed anywhere around the image without problems you can add one more line to my fix above to make it look like this:
Code Select

    template_extract_block($template_display_picture, 'title');
    template_extract_block($template_display_picture, 'img_desc');

    $params = array('{CELL_HEIGHT}' => $CONFIG['picture_width'] + 100,
        '{IMAGE}' => '<img src="' . $start_img . '" name="SlideShow" class="image"/>' . $start_slideshow . '<br />',
        '{ADMIN_MENU}' => '',
        );

By removing the title block and the img_desc block seperately, it allows you to not have the title block embedded in the img_desc block as themes like mystique tulip do.  Note that the removal of the title block MUST come before the removal of the img_desc block or it will throw an error on the many themes that do have the title embedded within the img_desc.

Hope this information is useful to others and I would love to hear from anyone if there are any problems with any of this or any better way to resolve the issue.  Thanks to the Coppermine team for a great piece of software.

luke

#3
April 13, 2005, 07:39:23 AM
QuoteHope this information is useful to others and I would love to hear from anyone if there are any problems with any of this or any better way to resolve the issue.  Thanks to the Coppermine team for a great piece of software.

Indeed it is, I ran into this same problem while customising my own theme to fit my existing web site design and this solved the problem nicely, thanks!  :)
Print
Go Up Pages1
User actions