I came across the JQuery Cycle Plugin mentioned in another post and would like to integrate it into my EE site. I’m not strong with javascript skills and was hoping to get some help setting up a basic example on my site.
Following the beginner demos, I downloaded the uncompressed plugin with all transitions and put the code into a new javascript template called “jquery”.
In my index page, I added the following code from their example:
<div class="pics">
<img src="http://www.mysite.com/images/test1.jpg" width="200" height="200" />
<img src="http://www.mysite.com/images/test1.jpg" width="200" height="200" />
<img src="http://www.mysite.com/images/test1.jpg" width="200" height="200" />
</div>
I added the following CSS into another template:
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
At this point, I was confused as to what I should put into the header of the page. To try to duplicate the first fading image example on the beginner’s page, I tried using the following in my header:
$(function() {
$('#s1').cycle('fade');
});
Any ideas of why this isn’t working? Thanks for any assistance.
