JQUERY SLIDE SHOW PLUGIN - Dec 29th, 2018
|
Cross Slide is a jQuery plugin that, in only 2kB of Javascript code, creates some common slide-show animations traditionally only available via Adobe Flash™ or other proprietary plugins.
CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself.
Just a note, I've switched to using SLIDESHOW II - A JAVASCRIPT CLASS FOR MOOTOOLS, in another recipe in the Cookbook, because I had issues with occasional flashing on initial page loading and found the order of JavaScript files to be a bit finicky. It's possible that a later version of jquery has fixed these issues, but I found it easier to go with the other approach.
The following is a recipe for implementing the simplest form of this slide show a static cross fade, but once you’ve got that going, the more complex implementations are really easy and instructions can be found at:
http://tobia.github.com/CrossSlide/
You can download the required scripts, a sample viewer, and a copy of the Cross Slide web page from:
http://www.thecmsbcookbook.com/downloads/cross_slide.zip
In the head of your viewer, you’ll need the following:
<SCRIPT type="text/javascript" src="Scripts/jquery-1.5.min.js"></SCRIPT> <SCRIPT type="text/javascript" src="Scripts/jquery.cross-slide.min.js"></SCRIPT>
For the demonstration viewer, I’ve added the only required css code (you must specify a fixed size for the window), but you can add it to your external style sheet.
<style type="text/css"> #slideshow { width: 600px; height: 200px; }
</style>
Here’s the javascript that’s required for the html version (this also goes in the head of your viewer):
<script> $(function() { $('#slideshow').crossSlide({ sleep: 2, fade: 1 }, [ { src: 'picture1.jpg' }, { src: 'picture2.jpg' }, { src: 'picture3.jpg' }, { src: 'picture4.jpg' } ]) }); </script>
And here’s the php implementation of that code for CMS Builder using an upload field called “images” with multiple uploads allowed, in a single record editor called home_page_slide_show. You can learn more about removing trailing commas in the recipe called “REMOVE-THE-TRAILING-COMMA-AFTER-LAST-IMAGE-IN-A-SERIES”
<script type="text/javascript"> $(function() { $('#slideshow').crossSlide({ sleep: 5, fade: .4 }, [
<?php $output = ''; foreach ($home_page_slide_showRecord['images'] as $upload) { $output .= '{ src: ' . '"' .$upload['thumbUrlPath']. '"' . '}'. ','; } $output = rtrim($output,','); // remove trailing comma print $output; ?>
]) }); </script>
Then in the body, where you want the viewer to be displayed, you’d insert the following with an optional loading image or text to be displayed while the images are loading (I use the first image in the database as the loading image):
<div align="center" id="slideshow"><img src=”your_loading_image.jpg" /></div>
|
The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact
Interactive Tools for information on the downloading of the software or the purchasing of licenses.