SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 73

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    add text function to jquery slideshow?

    Hi,
    I have found a jquery plugin that does exactly what I want it to do except for one thing. It doesnt display a text description underneath the full size image.

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

    I dont have much experience with javascript which is why I am using jquery. I was hoping someone could point me towards a function that I can add to this script or help me write one from scratch.

    Any help would be much appreciated

    Here is the snippet of code for the jquery slideshow I am using

    Code:
    // redefine Cycle's updateActivePagerLink function 
    $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
        $(pager).find('li').removeClass('activeLI') 
            .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
    }; 
             
    $('#slideshow').cycle({ 
        timeout: 3000, 
        pager:  '#nav', 
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
        } 
    });

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Let's start with the HTML then. What do you want the resulting HTML to look like when it has your text description?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the prompt reply Paul, I want the html to look something like this

    HTML Code:
     <div class="caption">
    <h2>Title goes here</h1>
    <p>detailed description goes here</p>
    </div>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Okay, well you can add that as a part of the string returned from the pagerAnchorBuilder function.

    How would you specify the title and description though. Could you retrieve those from the title and alt tags on the image itself?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont know, the thumbs are already present in the html of the plugin I have linked to and are preloaded, the main image however is not.

    How could i concatenate this extra info on to the pageAnchorBuilder function? I am not really that experienced with javascript.

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is what I have written so far and it doesnt seem to be working, it is makin the thumbs dissappear

    Code:
    $(function() {
        $('#slideshow').cycle({
            timeout: 0,
            pager:  '#nav',
            pagerAnchorBuilder: function(idx, slide) {
                return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a> ' <p> + this.alt + '</p></li>';
            }
        });

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Shouldn't it be slide.alt ?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If this is what you mean

    Code:
    $(function() {
        $('#slideshow').cycle({
            timeout: 0,
            pager:  '#nav',
            pagerAnchorBuilder: function(idx, slide) {
                return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a> ' <p> + this.slide.alt + '</p></li>';
            }
        });
    });
    then no thats not working for me either.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    If this is what you mean
    No. Look at how slide.src is used.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry but I cant see where it is used, tried using find to search all of the attached jquery files but could not find slide or slide.src anywhere.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    Sorry but I cant see where it is used, tried using find to search all of the attached jquery files but could not find slide or slide.src anywhere.
    It is the piece colored in red that I've marked in this copy of your code:

    Code:
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a> ' <p> + this.slide.alt + '</p></li>';
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought you meant to see if that was a reference to a variable somewhere else.

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a look again, I am sorry but I dont think I know what you mean

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    I had a look again, I am sorry but I dont think I know what you mean
    The image is passed to the function as a variable called slide. It is from that image that the src attribute is obtained. You can also retrieve other attributes from that image, such as the title attribute or the alt attribute.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then why is it not working, I have already concatenated this.slide.alt as you can see in the code above.

    I am sorry but I still dont have any idea of what you mean?

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    Then why is it not working, I have already concatenated this.slide.alt as you can see in the code above.

    I am sorry but I still dont have any idea of what you mean?
    The this keyword in the function is not a reference to the image, or to something that contains the image. So this.slide is undefined.

    Instead, you want to refer directly to the slide that was passed to the function itself.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removing this from this.slide.alt to make it slide.alt was one of the first things I did but it still didnt work?

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    Removing this from this.slide.alt to make it slide.alt was one of the first things I did but it still didnt work?
    Does the element contain the information that you want to retrieve from it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the looks of things no

    This slideshow is designed to display the main image programatically there is no html associated with it. The main image does not exist statically anywhere in the html

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Normally the images that the cycle plugin uses are contained in the slideshow section of your page. Unless you can provide a sample version of your page, it's useless to try and help you based on that initial link that you provided.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thumbnail images do not already exist within the html this is what the pagerAnchorBuilder: function builds. I got it working but the alt text is appearing underneath all of the thumbs, not underneath the single main image.

    I dont want the alt text underneath all of the thumbs, I want just one single text description under the currently displayed main image.

    Looks like I would need a whole new function to achieve this as the pager function is not designed to work with the main image.

  22. #22
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The initial link is actually correct and this is what I am building my slideshow out from.

    Where i was wrong was in assuming the full sized images didnt exist in the main page, they do exist, its the thumbnails which dont exist and are as I have said above being built up by the pagerAnchorBuilder function.

    This is the html the pagerAnchor Builder function creates the unordered list of thumbnails from

    HTML Code:
    <div id="slideshow" class="pics">
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
    
            </div>

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    The initial link is actually correct and this is what I am building my slideshow out from.

    Where i was wrong was in assuming the full sized images didnt exist in the main page, they do exist, its the thumbnails which dont exist and are as I have said above being built up by the pagerAnchorBuilder function.

    This is the html the pagerAnchor Builder function creates the unordered list of thumbnails from

    HTML Code:
    <div id="slideshow" class="pics">
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
    
            </div>
    Thank you. Put those images in their own containers, such as divs, with the title and description that you want in them too.

    For example:

    Code html4strict:
    <div id="slideshow" class="pics">
        <div>
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
            <div class="caption">
                <h2>Title goes here</h1>
                <p>detailed description goes here</p>
            </div>
        </div>
        ...
    <div>

    The cycle plugin should then cycle through each of those divs that are in the slideshow area.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok here is a link to where I am at, its pretty much the same as the original link

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

    Here is the directory that contains all of the images and javascript

    Index of /~nova/gallery/window-jquery_files

    And this is what the page will look like once its complete


  25. #25
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assume this is how you wanted me to markup the text

    edit: I just tested it and the markup is wrong I assume this is because of the individual divs wrapped around each image tag?

    HTML Code:
    <div id="slideshow" class="pics">
                <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
                  <div class="caption">
                    <p>detailed description goes here</p>
                  </div>
                </div>
                <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
                  <div class="caption">
                    <p>detailed description one goes here</p>
                  </div>
                </div>
                <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
                  <div class="caption">
                    <p>detailed description two goes here</p>
                  </div>
                </div>
                <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
                  <div class="caption">
                    <p>detailed description threee goes here</p>
                  </div>
                </div>
                <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
                  <div class="caption">
                    <p>detailed description four goes here</p>
                  </div>
                </div>
                <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
                  <div class="caption">
                    <p>detailed description five goes here</p>
                  </div>
                </div>
                <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
                  <div class="caption">
                    <p>detailed description six goes here</p>
                  </div>
                </div>


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
  •