JQuery Cycle Plugin how to with EE
Development and Programming
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" alt="" />
<img src="http://www.mysite.com/images/test1.jpg" alt="" />
<img src="http://www.mysite.com/images/test1.jpg" alt="" />
</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: <pre><code>
$(function() {
$(‘#s1’).cycle(‘fade’); });
[/code]
Any ideas of why this isn’t working? Thanks for any assistance.
Hi,
Disclaimer, not a jQuery expert by any means. However, it seems as if the demo on that page is slightly confusing. The jQ function you have posted is targeting an element with ID s1. Your code does not have an ID at all. Therefore, try making your div like this:
<div id="s1" class="pics">
<img src="http://www.mysite.com/images/test1.jpg" alt="" />
<img src="http://www.mysite.com/images/test1.jpg" alt="" />
<img src="http://www.mysite.com/images/test1.jpg" alt="" />
</div>Cheers
Dry
This might help, having the cycle plugin run after the DOM has loaded
$(document).ready(function() {
$('#s1').cycle('fade');
});And as Drylouvre said the make the divs id ‘#s1’ or just make the js ‘$(‘.pics’).cycle(‘fade’);’
Thanks so much, that did just the trick!
I’m going through a similar problem with jQuery and EE.
{exp:weblog:entries limit="5" disable="member_data|trackbacks" category="4" orderby="random"}
<div id="masthead-featured">
<a href="http://{comment_url_title_auto_path}" title="{title}">{masthead}</a>
<div class="mastheadtitle"><a href="http://{comment_url_title_auto_path}" title="{title}">{title} »</a></div>
</div>
{/exp:weblog:entries}It doesn’t fade through each ‘masthead-featured’ DIV. I want it to fade the image and the ‘title’ together as intended. Instead it fades the image out and the title in its place. Whilst still showing the next 4 pairs of images and titles.
I can’t see how to get it to do it (been trying on and off for ages, well a couple of hours.) Any pointers would be appreciated.
I’m going through a similar problem with jQuery and EE.It doesn’t fade through each ‘masthead-featured’ DIV. I want it to fade the image and the ‘title’ together as intended. Instead it fades the image out and the title in its place. Whilst still showing the next 4 pairs of images and titles. I can’t see how to get it to do it (been trying on and off for ages, well a couple of hours.) Any pointers would be appreciated.{exp:weblog:entries limit="5" disable="member_data|trackbacks" category="4" orderby="random"} <div id="masthead-featured"> <a href="http://{comment_url_title_auto_path}" title="{title}">{masthead}</a> <div class="mastheadtitle"><a href="http://{comment_url_title_auto_path}" title="{title}">{title} »</a></div> </div> {/exp:weblog:entries}
I’m having this same problem. Really aggravating.
I’m having this same problem. Really aggravating.
I’ve managed to fix it, been busy but it was something very silly…
{exp:weblog:entries limit="5" disable="member_data|trackbacks" category="4" orderby="random"}
<div id="masthead-featured">
<div>
<a href="http://{comment_url_title_auto_path}" title="{title}">{masthead}</a>
<div class="mastheadtitle"><a href="http://{comment_url_title_auto_path}" title="{title}">{title} »</a></div>
</div>
</div>
{/exp:weblog:entries}I wrapped the image and caption areas in another div and it worked fine. Hope it works for you (or anyone else.)
I’m having this same problem. Really aggravating.I’ve managed to fix it, been busy but it was something very silly…I wrapped the image and caption areas in another div and it worked fine. Hope it works for you (or anyone else.){exp:weblog:entries limit="5" disable="member_data|trackbacks" category="4" orderby="random"} <div id="masthead-featured"> <div> <a href="http://{comment_url_title_auto_path}" title="{title}">{masthead}</a> <div class="mastheadtitle"><a href="http://{comment_url_title_auto_path}" title="{title}">{title} »</a></div> </div> </div> {/exp:weblog:entries}
Thanks for the reply. I also managed to fix it too. I think I must have had an open div or something before because I’m not doing anything differently now and it works. Weird.