determine my own fancybox order

Question

I'm working on a website where images need a fancybox. The images are however not placed in a chronological order in the HTML because they are part of a booklet I realised using booklet.js. So my question is, can I determine in what order fancybox opens my images?

I have tried to get this to work for some time now and made a fiddle for demonstrative purposes.

http://jsfiddle.net/XF8WW/7/

In my fiddle I determine what image has been clicked and what the next/previous image can be. Next I check if fancybox opens the correct image on a first attempt. If it fails I try to close fancybox and open it myself for the correct image.

The only problem in my solution can be found in the last function I wrote (clickPage). In clickPage I try to close fancybox and reopen it for the correct image. Unfortunately either fancybox doesn't completely close or it doesn't reopen for that image.

function clickPage($pageNr) {
  $.fancybox.close();
  //$('.fancybox-overlay.fancybox-overlay-fixed').click();
  $pageNrMinOne = $pageNr - 1;
  $pageNrMinOne = $pageNrMinOne.toString();
  $pageNr = $pageNr.toString();
  console.log($pageNr);
  console.log($pageNrMinOne);
  $(".page" + $pageNr).eq($pageNrMinOne).trigger('click');
  //$('.page' + $pageNr).click();
}

I know the code works, because when I enter it in the console it does.

Thank you for your time Have a nice day

1. What does chronological order in HTML mean? 2. What exactly happens when this function executes? — Andrei Cristian Prodan, Jan 24 '13 at 15:47
you rather need a script to place your images in "chronological order" within your html on page load, then fancybox will just play them alike — JFK, Jan 24 '13 at 19:09
By chronological order I mean what comes first in the HTML should be first when fancybox executes and not third or forth.... I tried to change the order, because, like you say it's the quickest solution but it would destroy another script that is running on the site. The script that turns the images in a book that allows pages to be flipped etc. (it's called booklet.js) — Dries, Jan 28 '13 at 09:41

score 1 · Accepted Answer · answered Jan 29 '13 at 07:55

Alright, I managed to fix it. Rather than using this script for my booklet: http://www.netzgesta.de/booklet/ which rearanges the HTML I used this script: http://builtbywill.com/code/booklet/

The latter doesn't rearange the HTML and is in my opinion the best booklet script out there so far.

Thanks everyone for your replies!

Have a nice day

Bosworth99 · Answer 2 · 2013-01-24T15:56:33.093

0

I recommend handling your data needs separately (instead of using img src), passing it into the fb sig as the first argument:

    var images = [
        {
           'href' : 'http://dromenopmaat.be/dromen_op_maat/images/nl/1_big.jpg',
           'title' : 'some title'  //optional
        },
        {
           'href' : ' http://dromenopmaat.be/dromen_op_maat/images/nl/2_big.jpg ',
           'title' : 'some title'
        },
            //etc
    ]

    $.fancybox.open( 
        images,
        {
            index       : 0,
            nextEffect  : 'none', 
            prevEffect  : 'none',
            margin      : 100,
            padding     : 10,
            type        : 'image',
            wrapCSS     : 'fancy-gallery-wrapper',
            helpers     : {
                overlay : {
                    speedIn  : 0,
                    speedOut : 300,
                    opacity  : 0.7
                },
                title   : {
                    type    : 'inside'

                }
            }
    });

(fancybox v2.0)

Ultimately, you are making your project overly complex, needlessly. Build a json object in the order you wish, and send fb whatever extra params you might need (i just pulled this from a project, so tailor as you see fit).

Hope that helps -

edited Jan 24 '13 at 15:56

answered Jan 24 '13 at 15:47

Bosworth99

4,206
5
37
52

this works great, thanks! there's just one problem, this opens fancybox when the page is loaded, not when a link is clicked. Whenever I try to get it to work this way the options I hand to fancybox don't work, nor is the order of my array being respected. `var images = []; for (var i = 1; i < 212; i++) { images.push({ href : 'http://www.dromen.be/dromen_op_maat/images/nl/' + i + '_big.jpg' }); } $(".fotoviewer").fancybox( images, { fitToView : false, padding : 0, loop : false });` – Dries Jan 28 '13 at 09:16
well - you'll need to tie the fancybox open call to some event (such as a button click), of course = or it will just run automatically. As for the order of things - make sure you pull class references out of the markup. That will confuse things, I'm sure. And don't forget the .open method in there too. Heres the API : http://fancyapps.com/fancybox/ – Bosworth99 Jan 28 '13 at 15:55
and if this was helpful, or solved your issue, don't forget to upvote/accept – Bosworth99 Jan 28 '13 at 15:55
and I'm using 2.0, theres an API for 1.0 as well if that is your version. it will change the option syntax a bit. – Bosworth99 Jan 28 '13 at 15:57

determine my own fancybox order

2 Answers2