There are many solutions for creating an automatic slideshow on the web. In this tutorial we'll focus on a jQuery plugin called Cycle to animate images in a WebYep Loop. The basic idea is to have an image element in a loop, so the user can add/delete/reorder images for the slideshow.
In edit mode the edit buttons for the loop and all images shall be visible. In non-edit mode only one image at a time shall be visible.
Let's assume you already have the image viewer Lightbox installed which uses scriptaculous together with the prototype library.
The ones among you frequently using different JavaScript libraries will probably ask how this is supposed to work. jQuery's $-function will clash with the one from prototype so you can either use prototype/scriptaculous OR jQuery, right?
Well, not quite... We'll use a feature called namespacing to create a private instance of jQuery which will be completely independant of any other library. More on this below.
Create your web page like you always do and add a <div class="WY_Slideshow">
to hold the slideshow.
Add a WebYep Loop to this <div>
and in this loop place a WebYep Image element.
This should like the following example code:
<!-- the HTML/WebYep part of the slideshow --> <div class="WY_Slideshow"> <?php foreach (WYLoopElement::aLoopIDs('SlideshowLoop') as $webyep_oCurrentLoop->iLoopID) { $webyep_oCurrentLoop->loopStart(true); webyep_image('SlideshowImage', false, '', '', '', 640, 480, false); $webyep_oCurrentLoop->loopEnd(); } ?> </div>
You may want to change the field names of the Loop and Image elements as well as the dimensions of the image. Those are marked in red.
In the page's <head>
include the following javascripts (in this order):
This moves the jQuery library (and all plugins loaded so far) to the namespace WY
. From now on we must use WY.$()
instead of just $()
but the great thing is that other libraries can now use their own $-function without problems.
This is the init code for the slideshow. Note how we use the namespaced jQuery library (WY.$
instead of $
).
When the page is loaded, this code looks for elements with the class WY_Slideshow
and checks whether there are elements
present with a class WebYepLoopAddButton
(indicating WebYep edit mode). If not, it then applies the 'cycle effekt' to
the container thus starting the slideshow.
The code marked in red configures the cycle plugin. You may want to change this depending on your needs. A complete list of options can be found here.
There is an example WebYep page with a slideshow and an additional gallery and image. A pager has been added to the slideshow and
the gallery and image element below should work fine with Lightbox or Fancybox.
You can
download it here. Please note that this example requires a working WebYep installation!