I am setting up a page with jQuery's Cycle plugin and have four divs set to fade. I have
the code in place,
the images set, but it doesn't cycle properly. Firefox says there is a problem with
the following code:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
Here is
the html:
<div class="slideshow">
<div id="mainImg-1" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number One.<br />
They are there when I need them
the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help"><a href="cb_services.html">Let Us Help You</a></div>
</div>
</div>
<div id="mainImg-2" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number Two.<br />
They are there when I need them
the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help"><a href="cb_services.html">Let Us Help You</a></div>
</div>
</div>
<div id="mainImg-3" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number three.<br />
They are there when I need them
the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help"><a href="cb_services.html">Let Us Help You</a></div>
</div>
</div>
<div id="mainImg-4" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number Fout.<br />
They are there when I need them
the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help"><a href="cb_services.html">Let Us Help You</a></div>
</div>
</div>
Here is
the CSS:
.slideshow { width: 946px; height: 283px; border: 1px solid #c29c5d; margin: 8px; overflow: hidden; z-index: 1; }
#mainImg-1 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-2 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-3 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-4 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-1 .quote,
#mainImg-2 .quote,
#mainImg-3 .quote,
#mainImg-4 .quote { width: 608px; height: 168px; float: right; margin: 80px 11px 0 0; background: url(../_images/bg_quoteBox.png) repeat-x; }
Before you go off and say, "hey, those images are all
the same". You are right,
the images are all
the same right now, but
the text should be rotating as well and there is a slight difference there. In addition,
the fade should still show up.
Anyway, you can see
the dev page here: http://173.201.163.213/projectpath/first_trust/index.html
I would appreciate some help to get this cycling through as it should.
Thanks!
