SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Location
    Maryland
    Posts
    307
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help with modifying jQuery Script

    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.

    HTML Code:
    <!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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    <!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. #3
    SitePoint Addict
    Join Date
    Nov 2002
    Location
    Maryland
    Posts
    307
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! That works...thanks Pullo!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •