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….
Learning Things the Hard Way - Upgrading from 1.7 to 2
This is just a quick blog post to relay some info I just learned. I am in the process of upgrading Show-ee from 1.6.8 to 1.7 and then to 2.1.4b. As part of that site we used to use FieldFrame from Pixel & Tonic. Specifically we were using the CheckBox Group fields for the checkboxes that tell what add-ons a developer used. Well as part of the process I upgraded from 1.6.8 to 1.7 but neglected to upgrade all of the add-ons before moving to 2.1.4.
Creating Installable Templates for ExpressionEngine 2
This is the second installment in our Creating installable templates tutorials for ExpressionEngine. In this post we are going to talk about the actual package that needs to be delivered to the end user and all of the associated files. Plus we even have a bonus of some useful code for you.
Removing Index.php from the URLs of Expression Engine websites
For a long time now I have struggled with removing index.php from my EE websites. I have used a mix bag of the include/exclude method and add-ons that deal with making the include/exclude method easier.
Creating your own installable templates for ExpressionEngine 2
A year ago I was perusing the user guide and wiki over on ExpressionEngine’s website for any information regarding creating your own installable templates. At that time there were none. At I just did a quick search for some of the files involved like theme_preference.php and default_content.php and the information available is still minimal.
Related Articles