Question

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>&ldquo;This is quote Number One.<br />
      They are there when I need them the most.&rdquo;</p>
    <p><span class="author">Jane Doe &ndash; 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>&ldquo;This is quote Number Two.<br />
      They are there when I need them the most.&rdquo;</p>
    <p><span class="author">Jane Doe &ndash; 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>&ldquo;This is quote Number three.<br />
      They are there when I need them the most.&rdquo;</p>
    <p><span class="author">Jane Doe &ndash; 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>&ldquo;This is quote Number Fout.<br />
      They are there when I need them the most.&rdquo;</p>
    <p><span class="author">Jane Doe &ndash; 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!

Answer 1

Looking at the source, you’re missing several </script> tags.

<script type="text/javascript" src="_scripts/navigation.js"></script> 
<script type="text/javascript">
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' 
    });
});
</script>
<title>Charlotte Bank Mooresville Bank First Trust Bank</title>