<< back to overview WebYep - The Shiny Tiny WebCMS
This is one of a series of articles about WebYep and web design. Things are under development right now, so appearance and content may change over time.

Creating a slideshow with a WebYep Loop

The basic idea

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.

Interfering libraries

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.

Basic steps

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):

• The jQuery library
• The jQuery Cycle plugin
• Some custom code to remove jQuery from the global scope (namespacing):
  1. <!-- namespacing jQuery and all plugins loaded so far -->
  2. <script type="text/javascript">/*<![CDATA[*/
  3.   var WY = window.WY || {}; WY.$ = jQuery.noConflict(true);
  4. /*]]>*/</script>

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.

• Some code that waits for the document to finish loading and then initializes the slideshow:
  1. <!-- initialize the slideshow when the DOM is ready -->
  2. <script type="text/javascript">/*<![CDATA[*/
  3.   WY.$(document).ready(function() {
  4.     if (!WY.$('.WY_Slideshow').find('.WebYepLoopAddButton').length) {
  5.       WY.$('.WY_Slideshow').cycle({fx:'fade'});
  6.     }
  7.   });
  8. /*]]>*/</script>

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.

Example page

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!