The purpose of this sample is add slide show capabilities with user-selected time interval.
Please check demo for an example.
If you don't feel like patching configuration files yourself, download and install already
patched set of templates from here.
Instructions
1. Edit your t_showimg.php page template and replace the line
| | <body class="nomargins" onload="javascript: dalbum_onload();" >
|
with
| | <body class="nomargins" onload="javascript: dalbum_onload();_slideshow();" >
|
2. Go to the end of t_showimg.php page template and insert
the following code snippet before the last '//-->':
| | <!-- Begin slideshow code -->
function _slideshow()
{
<?php $nSlideShow=0;
if (isset($_GET['slideshow']))
$nSlideShow=$_GET['slideshow'];
if ($nSlideShow>0)
{
// Change 5 here to minimal allowed interval in seconds
if ($nSlideShow<5)
$nSlideShow=5;
$url=$next;
if (empty($url))
{
// !!! Uncomment the next line enable slide show looping
// $url=$first;
}
if (!empty($url))
{
$delay=$nSlideShow*1000;
$url.="&slideshow=" . $nSlideShow;
print "window.setTimeout(\"window.location.replace('$url');\",$delay);";
}
}?>
}
function onSlideshowChange(combo)
{
var u=window.location.href;
var n=u.indexOf('&slideshow');
if (n!=-1)
u=u.substr(0,n);
if (combo.selectedIndex>0)
u+="&slideshow=" + combo.options[combo.selectedIndex].value;
window.location.replace(u);
return true;
}
<!-- End slideshow code -->
|
3. Edit your custom.php and find and uncomment
customGetButton function. Replace its body with the following code snippet:
4. Edit your custom.css and append the following lines to the file:
| | /* Add your custom styles here */
/* Add your custom styles here */
.slideshow form
{
display: inline;
vertical-align: middle;
}
.slideshow form select
{
/* You may want to uncomment code below and modify it to match to your stylesheet.
/* These settings are for main_normal.css. */
/*
font-family: Verdana, Arial, sans-serif;
font-size:100%;
color: black;
background-color: #E4E0D2;*/
/* These settings are for main_cyan.css */
/*
font-family: Verdana, Arial, sans-serif;
font-size:100%;
color: white;
font-weight: bold;
background-color: #064E80;
*/
/* These settings are for main_blue.css. */
/*
font-weight: bold;
font-size:100%;
color: white;
background-color:#336699;
*/
/* These settings are for main_gray.css. */
/*
font-family: Tahoma, Verdana, Arial, sans-serif;
color: #339;
background-color: #e6e6e6;
font-size:100%;
*/
}
|
Edit the stylesheet above to uncomment or insert colors matching your stylesheet.
5. That's all. Modify the code above as needed.
| 
