Switching the order around in a gallery

12 views
Skip to first unread message

Brian J. Cohen

unread,
Dec 22, 2010, 3:30:07 PM12/22/10
to fancybox
I have three links that appear in this order in my HTML, and have
applied fancybox to them.

<a class="fancybox" href="#who" rel="group">Who</a>
<a class="fancybox" href="#where" rel="group">Where</a>
<a class="fancybox" href="#what" rel="group">What</a>

Obviously, the resulting fancybox will create a gallery where indices
0, 1, and 2 are respectively #who, #where, and #what.

Is there a programmatic way to switch #where and #what without
changing the order of the links in my HTML? I want the order in the
gallery to be #who, #what, #where.

Thanks!

mygoggie

unread,
Dec 23, 2010, 4:59:03 AM12/23/10
to fancybox
This took some thinking to do, but this works on my sandbox server

IMPORTANT POINTS:
1. The order of your images displayed on the www page are important
and are kept in an array. Therefore make note of where your images
are that you want to swap out.
2. In your case: Who = 0; Where = 1; What = 2;
3. The code below will just switch two images. Use google to find
other array element switching code if you want to switch more elements
around.
4. The global variable of type array where the images are stored in is
named 'currentArray'. It is defined in the FancyBox code.

<script type='text/javascript'>

jQuery(document).ready(function(){

/* Apply FancyBox settings to all FancyBox'ed hyperlinks */
var flagSwitched = false;

jQuery('.fancybox').fancybox({

'onComplete': function(currentArray){
if (flagSwitched === false)
{
var b = currentArray[2]; /* Load 'What'
into temp var named 'b' */
currentArray[2] = currentArray[1]; /* Swap 'Where
and 'What' */
currentArray[1] = b; /* Complete
swap */

flagSwitched = true; /* We have done
the swap, so set the flag */
}

/* Return nothing */
return false;
}
});
)};

</script>
Reply all
Reply to author
Forward
0 new messages