display panel number

[dubdesign]

Hi,

What i'm looking to do is add text below the slider which says image x of x, could someone suggest to me how this might be done so that it shows the number of the current panel as well as the total panels and obviously updates when moving to the next/previous panel.

Also i'd like to be able to skip to a user specified image but i dont use hash tags as they dont really fit with the function of the website so i'm struggling to figure a way to link to specific panels/images.

Thanks Scott

[Mottie]

Here is a demo on how to add an updating display under MovingBoxes (demo):

HTML added

<p id="display"></p>

Script

var updateDisplay = function(slider){
    var txt = "Image " + slider.curPanel + ' of ' + slider.totalPanels;
    $('#display').text(txt);
};

$('#slider').movingBoxes({

    // if true, navigation links will be added
    buildNav: true,

    // **** Callbacks ****
    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function(e, slider, tar){
        updateDisplay(slider);
    },
    // callback after animation completes
    completed: function(e, slider, tar){
        updateDisplay(slider);
    }

});​

I wasn't sure how you planned for the user to interact with MovingBoxes, but I set the buildNav option to true to add the navigation links. If you had other plans on how user would interact, let me know, or better yet, update the demo I shared above.

[dubdesign]

hi, the demo looks like it does what i need so i'll try adding it to my site shortly.

For your reference i have buildNav set to false. I use Moving Boxes as a portfolio slideshow, below the images there's the forward and backward buttons, a play button and a stop button. next step i think will be a 'show thumbnails' link, from the thumbnails page i'd like to be able to make them clickable and go to the correct panel but as i dont use the hash tags is this possible?

[Mottie]

Ok, try this demo then... I added a <div> with <a> links inside which you can put thumb nail images inside, the href attribute should point to the desired panel number:

HTML

<div id="mb-nav">
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
    <a href="#5">5</a>
    <a href="#6">6</a>
    <a href="#7">7</a>    
</div>

Script

$('#mb-nav a').click(function(){
    // grab hash from href
    panel = (this.hash || '').substring(1);
    $('#slider').data('movingBoxes').change(panel);
    return false;    
});

[dubdesign]

sorry i've not had chance to look at this until now. Thank you for your help the first solution worked perfectly for displaying the current image number and the total images, i initially had a slight problem in that it was displaying nothing until all of the images had loaded (which can take some time) but i was able to get around this by using the php value that i get when generating the images and then updating it using the code you provided.

Unfortunately the thumbnail code you've suggested would not do what i'm after, perhaps i didn't explain properly what i'm trying to do. Basically the best way i can explain is to say i need to be able to link to any image from other pages, the thumbnails i mentioned will not be on the same page as the slider. Clicking on the thumbnail will take you to the page with the slider on and focus on the correct image. i hope that makes sense. Another way to look at it would be if i wanted to give someone a link to a specific image what would that link be?

[Mottie]

You can link to any panel inside of MovingBoxes using the hash tags... for example, this link http://chriscoyier.github.com/MovingBoxes/#&slider1=5 will open the fifth panel in the first slider on page load. Just include the hash in the thumbnail link

[dubdesign]

Even with hash tags turned off? As said previously I'm not able to have hash tags turned on

EDIT: Just tried and it will not work with hash tags turned off, i dont want hash tags turned on as not only does it look messy in the url it also renders the browsers back button useless. If its possible to use the hash tag purely for linking purposes without it being used for normal operation (as in hash tags turned off) that would be a lot more useful i think

[Mottie]

Ok, I just updated the plugin to allow using hash tags and ignore the hashTags option.

Additionally, you can target any ID or class of the slide or any element inside the slide. This link targets the sixth slide of the main demo using #astronaut as the hash.

[Mottie]

I'm guessing this has been resolved. Please feel free to reopen this issue if you continue to have problems.

[dubdesign]

sorry for not responding earlier, i've only just had chance to try this. Works perfectly, thank you for your help!