SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 73
  1. #26
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You can use divs in the slideshow, or you can use a UL element for the slideshow with the list items for the content. The cycle plugin just loops through the elements in the slideshow. The cycle plugin doesn't care whether they are images or not.

    You may have to adjust how you handle your layout, but that's all part-and-parcel of having more than just a single image to cycle.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #27
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The pager function is not working at all for me, are you sure this is the correct function to be using to display text, this function seems to be for building thumbnails not displaying text underneath the main image.

    I have tried what you suggested but it is creating an extra blank thumbnail div that once selected shows the text without an image.

  3. #28
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The pager function is dependent on HTML structure of your page, so we can come back to that once your page is showing the title and description that you require.

    Give the slideshow an auto height, and the heading and description should now become visible.

    Code css:
    #slideshow {
        margin: 20px;
        height: auto;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #29
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The description is visible but the pager thumbnails are not, you can see what I mean here

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

    Here is the html code for the gallery
    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>
              </div>

  5. #30
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    The description is visible but the pager thumbnails are not
    Now that the HTML content shows what you require, we can work on the scripting that depends on that HTML content.

    With this function:

    Code javascript:
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
    }

    The slide variable used to refer to a single image. Now, the slide variable refers to the div that contains the image and description.

    So, instead of using slide.src, you need to get the image from within the div, with something like this:

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

  6. #31
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, that code works perfectly

    I just need to add a numbered pager between main image and description and prev/next arrows. How hard would that be to implement

  7. #32
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    Thank you Paul, that code works perfectly

    I just need to add a numbered pager between main image and description and prev/next arrows. How hard would that be to implement
    The pagerAnchorBuilder is what used to create the numbered pager, which has been replaced with your thumbnail pager. I don't know how easy it will be to create a separate numbered pager as well.

    The prev/next stuff is easy to achieve though. See the jQuery cycle prev/next demo page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #33
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The pagerAnchorBuilder is what used to create the numbered pager, which has been replaced with your thumbnail pager. I don't know how easy it will be to create a separate numbered pager as well.
    Would I have to create a new nav#2 div and a whole new function to achieve this?

  9. #34
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Currently you specify where the pager will be with:

    Code javascript:
    pager:  '#nav',

    I don't think the cycle plugin is designed to be able to work with more than one pager.

    It should be possible though to create a separate list of linked numbers, where you override the onclick event to trigger the appropriate slide, for example:

    Code javascript:
    $('#slideshow').cycle(4);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #35
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this?

    $('#slideshow').cycle(0);
    $('#slideshow').cycle(1);
    $('#slideshow').cycle(2);

  11. #36
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    First things first though. Let's get the HTML in place before working on the scripting.

    The Intermediate Demos 2 page has one for the pager, so we can take the HTML from that.

    Code html4strict:
    <div id="pager" class="pager">
        <a href="#">1</a>
        ...
    </div>

    However, you don't want to manually put all those links in the HTML. Instead, you want to start it off as empty so that scripting can then put in the correct number of links.

    Code html4strict:
    <div id="pager" class="pager"></div>

    Then you can use scripting to add a link in the pager for each thing in the slideshow:

    Code javascript:
    $('#slideshow').children().each(function (i) {
        $('<a>', {
            href: '#',
            text: i + 1,
            click: pagerHandler
        }).appendTo('#pager');
    });

    The pagerHandler function just takes the number in the link, and uses that as a reference by which to trigger the appropriate slide:

    Code javascript:
    function pagerHandler() {
        var slide = Number(this.innerHTML - 1);
        $('#slideshow').cycle(slide);
        return false;
    }

    Edit:

    update to properties of the link builder code
    Last edited by paul_wilkins; Jun 8, 2011 at 22:08.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #37
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have put in the html but I cant get the code to work

    The pager div has a green background to make it easier to see where it is on the page

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

    this is my code
    Code:
    // redefine Cycle's updateActivePagerLink function
    $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
        $(pager).find('li').removeClass('activeLI')
            .filter('li:eq('+currSlideIndex+')').addClass('activeLI');
    };
    
    $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
        $(pager).each(function() {
            console.log(clsName + '; ' + currSlide ); 
            $(this).children().removeClass('activeLI').filter(':eq('+currSlide+')').addClass('activeLI');
        });
    };
    
    $(function() {
        $('#slideshow').cycle({
            timeout: 0,
            pager:  '#nav',
            pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + $('img', slide).attr('src') + '" width="50" height="50" /></a></li>';
    		}
        });
    });
    
    $('#slideshow').children().each(function (i) {
        $('<a>', {
            href: '#',
            text: i + 1,
            click: pagerHandler
        }).appendTo('#pager');
    });
    
    function pagerHandler() {
        var slide = Number(this.innerHTML - 1);
        $('#slideshow').cycle(slide);
        return false;
    }
    this is my html

    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>
              </div>
              
              <!--end slideshow div-->
              
              <div id="pager" class="pager"></div>
              
              <!--end pager div-->
    Last edited by paul_wilkins; Jun 8, 2011 at 22:09. Reason: update to link builder code

  13. #38
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You are executing the scripting code before the body content even exists.

    Put the code inside this callback function, so that it runs once the rest of the page is ready.

    Code javascript:
    $(function () {
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #39
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have the numbers now but I must still be missing something as they are not clickable, this is the code

    Code:
    $(function () {
        $('#slideshow').children().each(function (i) {
        $('<a>', {
            href: '#',
            text: i + 1,
            click: pagerHandler
        }).appendTo('#pager');
    });
    
    function pagerHandler() {
        var slide = Number(this.innerHTML - 1);
        $('#slideshow').cycle(slide);
        return false;
    }
    });
    Last edited by paul_wilkins; Jun 8, 2011 at 22:09.

  15. #40
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Put the pagerHandler function in there too, preferably before the other code in there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #41
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have put your code together like this but it its still not pageing
    Code:
    $(function () {
        function pagerHandler() {
        var slide = Number(this.innerHTML - 1);
        $('#slideshow').cycle(slide);
        return false;
    }
    
    $('#slideshow').children().each(function (i) {
        $('<a>', {
            href: '#',
            text: i + 1,
            click: pagerHandler
        }).appendTo('#pager');
    });
    });
    Last edited by paul_wilkins; Jun 8, 2011 at 22:10.

  17. #42
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    I have put your code together like this but it its still not pageing
    I'm looking at JQuery Cycle Plugin - 'updateActivePagerLink' Demo and it's not showing the updated code. Have you uploaded the updated code?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #43
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its updated now

  19. #44
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The slideshow section is positioned in front of the pager section, as if separate layers are involved.

    You can either move the pager to some other location, such as above the slideshow, or use CSS to affect the page so that the two different sections don't overlap. Or if you want to keep the pager where it currently is, you can use z-index to bring the pager forward in front of the slideshow section, so that the pager can then accept click events.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #45
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried z-index but cant get it to work, do I have add this css to the function somehow?

    I can send it back to hide it but I cant bring it forward

  21. #46
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    I have tried z-index but cant get it to work, do I have add this css to the function somehow?
    No, you should use CSS to achieve that.

    When you investigate the rendered page, you'll see that the cycle plugin sets the slide to a z-index of 8. So, you'll want to set a z-index of something greater than 8 to the pager if you want to interact with the pager that's in the same place as the slide.

    Code css:
    .pager {
        ...
        z-index: 10;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #47
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul that fixed it.

    I hope the previous next arrows are a lot easier

  23. #48
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    Thanks Paul that fixed it.
    Good one.

    By the way, you should know that you can use CSS styles to make the numbered pager links look a lot prettier. Space them out, with borders, or other aspects like that.

    Quote Originally Posted by WavyDavy View Post
    I hope the previous next arrows are a lot easier
    They are. See the example at intermediate demos 2 page.
    It's just a couple of links, or buttons if you like, which you refer to from the cycle properties.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #49
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help Paul, you were right the last one was easy.

    All I had to do was change id of the function from #s2 to #slideshow to match up with the current slideshow and it worked like a charm

    here is the final page for anyone that might be interested

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

  25. #50
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh there is one last thing, how do I add css for the active slide number so it stands out from the inactive one?


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
  •