SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Current Slide Number


    I have many slides but got problem can't find the current number of slide!
    How to show current slide number? ex: ( 3 of 8 )
    Thanks for any idea!

    Here code:


    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var currentPosition = 0;
    var slideWidth = 560;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner div
    slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
    'float' : 'left',
    'width' : slideWidth
    });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Insert controls in the DOM
    $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
    'marginLeft' : slideWidth*(-currentPosition)
    });
    });

    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
    }

    var CurrenPageId = document.getElementById("CurrenPageId");
    CurrenPageId.innerHTML = "Page" + ??? + " ";
    });
    </script>

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It seems like you have everything you need, just build a string with your position and numberOfSlides variables:

    Code JavaScript:
    CurrenPageId.innerHTML = 'Page ' + (position + 1) + ' of ' + numberOfSlides;
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did this, but still not working...
    something wrong?


    javascript:
    var CurrenPageId = document.getElementById("CurrenPageId");
    CurrenPageId.innerHTML = "page" + (position + 1) + "of" + numberOfSlides;

    html:
    <span id="CurrenPageId">Page 1 of</span>

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Could you post your HTML? Or, better yet, a jsFiddle that we could mess around with?
    I'm the web overlord for Graphic Business Systems

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well Bro!!!
    here is example:


    http://jsfiddle.net/VbHEB/18/

  6. #6
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ahh, figured it out: Those two lines where you get #CurrenPageId and update its innerHTML need to be moved into the "manageControls" function. I updated your jsFiddle so that it works now.

    proper indentation ftw
    I'm the web overlord for Graphic Business Systems

  7. #7
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ohhhh work perfectly!!!
    Thanks you!

  8. #8
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now if I want to sliding by reverse page ex: from last page to first page (5,4,3,2,1)
    here: http://jsfiddle.net/VbHEB/21/
    Thanks any idea!

  9. #9
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I assume the only part you needed help with was getting the counter to display the right number (maybe you've already figured this out, even), and all you have to do is add a single line to your manageControls function; I've updated your jsFiddle again, so I think it now works the way you wanted.
    I'm the web overlord for Graphic Business Systems

  10. #10
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks your professional!!!


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
  •