Slideshow II, by Aeron Glemann, is a javascript class for Mootools 1.3..2 to stream and animate the presentation of
images on your website. Slideshow II is the result of many trials in code attempting to create a javascript class that
was lightweight, unobtrusive, a snap to setup (but also highly configurable), extendable and - built using the
javascript framework with the best effects - visually very impressive. Slideshow is open-source with an MIT-style
license.
I've used it on a number of my web sites to replace Flash shows, and it's proved pretty easy to implement and very
flexible.
NOTE: The code below has been updated to handle some (IE 8+) browser issues and updated Mootools files.
After you've looked over some of the examples at:
http://www.electricprism.com/aeron/slideshow/
You can download the required scripts (probably not the latest versions), and a sample viewer from:
http://www.thecmsbcookbook.com/downloads/glemann-slideshow.zip
(Once you've got the basic installation working, you can download the latest files from the link below.)
To set up a slide show:
Create a single record editor called "Slides" with one upload field called images, and set the number of images to the
maximum you'd like to allow for your slide show.
For this example, We'll be setting up a simple cross fade show with images with an aspect ration of 1:2
Set thumbnail2 size to px 250 wide and 500 px high
** Download the latest version of SlideShow II from:
http://code.google.com/p/slideshow/
Upload some sample images to your upload field and save the record. best if they are in the aspect ratio of the
thumbnail size, but you can use the sample images in the image folder of the zipped file.
Unzip the Slideshow files.
In the slideshow.css file, change the width and height in the .slideshow and .slideshow-images entries to match the
(maximum) size of your slideshow images. (use 250 and 500 for this example)
Upload the slideshow.css file to your css folder (the code below assumes a folder in your site root called css)
Upload the javascripts to your Scripts folder (the code below assumes a folder in your site root called Scripts)
For your test viewer use the following code at the top of your page.
You'll need to create an editor (single record, or multi record limited to one record) called "slides" with an image
upload field that accommodates between 6 and 12 slides
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/hsphere/local/home/c323748/your_site.com/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
// load records
list($slidesRecords, $slidesMetaData) = getRecords(array(
'tableName' => 'slides',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$slidesRecord = @$slidesRecords[0]; // get first record
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
And this code in the head section of your page.
NOTE: Most of the variables are now handled in the code in the head section with numbers and true/false entries.
Duration is the cross fade duration
Delay is the amount of time the slide stays up before the cross fade
If your images are not exactly the same size and aspect ratio, setting the overlap to overlap: false, This will prevent
the slide edges from lingering outside of the new slide during the fade.
If you want to caption the slides in the show, you can use one of the upload info fields for the caption (n this example
I used info1), and change the captions variable to captions: true,
The hu variable is left blank so that the path to your uploads is correctly parsed.
There's more in the wiki docs for this slideshow.
** Note that the use of an apostrophe or a quote mark in a caption will break the slide show javascript $output
variable.
The workaround is to insert the preg_replace in the foreach loop to change these characters to an acute accent mark.
That looks similar enough to pass and won't break the code.
<head>
<title>Slide Show Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/slideshow.css">
<script src="Scripts/mootools-1.3.2-core.js"></script>
<script src="Scripts/mootools-1.3.2.1-more.js"></script>
<script src="Scripts/slideshow.js"></script>
<script>
window.addEvent('domready', function(){
var data = {
<?php
$output = '';
// shuffle is optional
// shuffle($slidesRecord['images']) ;
foreach ($slidesRecord['images'] as $upload)
{
$upload['info1'] = preg_replace("/['\"]/","´", $upload['info1'] );
$info1 = $upload['info1'];
$output .= "'". $upload['thumbUrlPath2']. "'". ": { caption: " ."'$info1'"." }" . ",";
}
$output = rtrim($output,","); // remove trailing comma
print $output;
?>
};
new Slideshow('show', data, { captions: false, controller: false, thumbnails: false, overlap: true, delay: 5000,
duration: 200, height: 250, hu: '', width: 500 });
});
</script>
</head>
Then in the body where you'd like the slide show to appear, insert this code:
<div id="show" class="slideshow"></div>
If there's only one image uploaded and you'd rather show that as a still image, use this code in the body instead:
?php if (@$slidesRecord['images'][1]): ?>
<div id="show" class="slideshow"></div>
<?php else : ?>
<?php foreach ($slidesRecord['images'] as $upload): ?>
<img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php
echo $upload['thumbHeight2'] ?>" alt="" /><br />
<?php endforeach ?>
<?php endif ?>
After you've got this simple example working, you can experiment with some of the more complex implementations in the
sample index.html file.
If you're trying to get attributes like target="blank" to work, you'll need to add an href tag in your slideshow <div>
like this:
<div align="center" id="top" class="slideshow"><a href="#" target="_blank"></a> </div>
Note that the html attribute 'target="_blank"' for links is no longer valid code as of XHTML Strict 1.0.
The code below, thanks to a post on http://snipplr.com/view/30551/ when added to your viewer page above the existing
window.addEvent code, will run using mootools on domready to send all clicks to new windows when going to an external
domain.
<script>
window.addEvent('domready', function() {
// modified from http://joesong.com/2009/11/external-links-in-new-window-passive-and-with-mootools/
// to avoid using the 'target' attribute, which is not part of xhtml 1.0 strict
var currentDomain = window.location.host;
$(document.body).addEvent('click', function(evt) {
var target = $(evt.target);
if (target.get('tag') !== 'a') {
target = target.getParent();
}
if (target && target.get('tag') === 'a' && target.get('href').test('http') &&
!target.get('href').test(currentDomain)) {
window.open(target.get('href'), '_blank');
return false;
}
});
});
</script>
And here’s an example of a slide show, with links and captions, that uses the image and name fields in the existing
records of a multi-record section.
In the head:
<script type="text/javascript">
window.addEvent('domready', function(){
var data = { <?php $blank = "'" ?>
<?php
$output = '';
foreach ($servicesRecords as $record) { foreach ($record['image'] as $upload){
$record['title'] = preg_replace("/['\"]/","´", htmlencode($record['title']) );
$output .= "'". $common_informationRecord['master_url'] . $upload['thumbUrlPath3']. "'". ": {caption: "
."'".strtoupper($record['title']) ."'" .","."href:"."'" ."servicesdetail.php?".$record['num']."'" ." }" . ",";
} }
$output = rtrim($output,","); // remove trailing comma
print $output;
?>
};
new Slideshow('show', data, { captions: true, resize: false, controller: false, thumbnails: false, overlap: true,
delay: 5500, duration: 700, height: 360, hu: '', width: 480 });
});
</script>
And in the body where you want the slide show to display:
Note the fixed height of the div to allow for the caption and the styling of the caption text.
<div style="height:375px;" id="show" class="slideshow text_font"></div>
|
