Integrating the JQuery Cycle Rotator into ExpressionEngine

I often see questions on the ExpressionEngine Forums regarding photo galleries. In EE Version 2.0 the Photo Gallery module by EllisLab is going to be discontinued but there are some other reasons for using Weblogs instead of the Photo Gallery Module.

So…

Doing a search for JQuery Image Slideshow on Google nets quite a few solutions for the designer wanting to integrate a rotating image effect on their website. We are kinda partial to Mike Alsup’s Cycle JQuery plugin. If you use his code try and make a donation.

In this tutorial we will walk through the steps necessary to integrate the Cycle code into our PhotoStudio template. But it should be noted that these steps can be used as part of any website.

First head on over to Mike’s site and download the code. You will have to copy and paste into a new .js file. Go ahead and name it jquery.cycle.js and save it to a folder named js in the root of your web hosting.

Next click here to download the JQuery package. The file that you download should be named jquery-1.3.2.min.js. Make sure to save it the the js folder as well.

Next step is to link to these files in the Head portion of your HTML in the template you are going to be using like so:

<script type='text/javascript' src='{site_url}js/jquery-1.3.2.js'></script>
<script type='text/javascript' src='{site_url}js/jquery.cycle.js'></script> 

If you are using PhotoStudio all you have to do is define the effects for the plugin and bring the images into the template within a div. If you are not using PhotoStudio then you will have to define a weblog to hold the images and the following custom fields (largeimage, title). The largeimage field is a text input field and basically holds the path to the image not the HTML code that displays an image. That code will reside in the template so that we can use the title as the alt text.

OK so let’s start with bringing the images into the template. If you are using PhotoStudio then create a new template and make it a copy of the main/index template. Make sure to add the code pointing to the javascript files. The exp:weblog statement that pulls the featured image is perfect for building this out. Basically you want it to look like below.

<div class='slideshow'>
    {exp:weblog:entries weblog='[your weblog here]' limit='[your qty of images here]'}
        <img alt='{title}' src='{largeimage}' >
    {/exp:weblog:entries}
</div> 

In the code above the div wrapper with the class=‘slideshow’ is the hook for the JQuery to grab onto. Any image tag that is in that div will be a part of the rotator.

Below where you linked to the javascript files you will want to put the following code. This is taken from the beginners example on the Mike’s website. Basically the fx: ‘fade’ statement in this code is what defines the effects. You can read up on all of the additional effects here

<script type='text/javascript'>
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script> 

That’s it! If you go to the page then you should see the rotating images. Click here to see our integration into Tudobem.

Let me know what you think….

Comments

John Faulds says:

An odd thing happened when I loaded the demo page in Opera (10b) and Firefox (3.5) for the first time - the first image would load at full size for a second but with the footer collapsing to about 100 pixels under the header, but then when the script had loaded properly, all the thumbs had been scaled down to miniscule size and then continued to cycle through that way until I refreshed the page.

08/10 at 03:26 PM

Marcus Neto says:

that is odd…. hmm… it probably needs a little css majick. I will try and get that figured out tomorrow.

08/10 at 07:18 PM

Marcus Neto says:

John, it was because I was loading too many images and the cycle plugin was kicking off prior to having all of the images and their sizes available to it. I fixed it in the demo by calling less images from the ones available. Other possible fixes are smaller image sizes or setting the cycle plugin to start later in the rendering or by defining the width and height of the images. Hope that helps.

08/11 at 08:33 AM

Carrie says:

Please tell me why a video of Rick Astley shows up after I pasted in the code???

03/17 at 01:50 PM

Marcus Neto says:

Carrie, you are doing something wrong. If you are serious then use the contact form to send me an email with the link to the site and some background information about what you did. I would not rickroll you I promise

03/18 at 10:57 AM

jordan says:

thanks best air jordan shoes

06/10 at 07:08 AM

good says:

good write thanks oyun indir

06/16 at 02:11 AM

tokyap says:

06/18 at 02:15 PM

Mute_MonaRch says:

Nedir travesti Ankarali Travesti siteleri
travesti bulmak için sitemizi Ziyaret edin bursa turkiye travesti sitesine Bekleriz
Sitemizde travesti sohbet bölümü vardir travestilerle sikişebilir doyumsuz sohbet edebilirsiniz
Thank you very much for this information.
Good post thanks for sharin.
I like this site ..

06/20 at 10:32 AM

Tell us what you think...

Commenting is not available in this weblog entry.

EETemplates

ExpressionEngine Templates and Add-ons