Need Help with modifying jQuery Script

JavaScript
1

Hello,
Currently, this script takes the image alt tag contents and displays it through the #caption p tag. My captions need to include links so the alt tag solution will not work for me. I added in the descriptions class to this demo. Is there an easy way in jQuery to display the corresponding text div as the caption for each image? Any help is greatly appreciated.



<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
.descriptions { display:none; }
#main { text-align: center }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx:     'shuffle',
        after:   function() {
            $('#caption').html(this.alt);
        }        
    });
});
</script>
</head>
<body>
<div id="main">
    <div class="slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Caption 1" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Caption 2" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Caption 3" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" alt="Caption 4" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" alt="Caption 5" />
    </div>
    
    <div class="descriptions">
        <div class="text"> <a href="#">Caption 1</a> </div>
        <div class="text"> Caption 2 </div>
        <div class="text"> Caption 3 </div>
        <div class="text"> Caption 4 </div>
        <div class="text"> Caption 5 </div>
    </div>       
    
    <p id="caption"></p>

</div>    
</body>
</html>

Demo link:
http://bhg.herrmanneasyedit.com/cycle.html

2

Hi there,

First off, thanks for asking your question in a concise way with enough code for me to effortlessly reproduce your problem.
I wish more people would do that.

Anyway, I would do what you ask like this:

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Cycle Plugin - Basic Demo</title>
    <style type="text/css">
      .slideshow { height: 232px; width: 232px; margin: 0 auto }
      .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee;}
      .descriptions { margin-top:15px; }
      #main { text-align: center }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Caption 1" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Caption 2" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Caption 3" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" alt="Caption 4" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" alt="Caption 5" />
      </div>

      <div class="descriptions">
        <div class="text"><a href="#">Caption 1</a></div>
        <div class="text">Caption 2</div>
        <div class="text">Caption 3</div>
        <div class="text">Caption 4</div>
        <div class="text">Caption 5</div>
      </div>
    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        function onAfter(curr,next,opts) {
          $(".text").hide();
          $($(".text")[opts.currSlide]).show();
        }			

        $('.slideshow').cycle({
          fx: 'shuffle',
          after: onAfter
        });

        $(".text").hide().filter(":first-child").show();
      });
    </script>
  </body>
</html>

Hope that helps.

3

Awesome! That works…thanks Pullo!