FancyBox open same gallery from multiple links

Question

How can I open the same galery that '.fancybox' is opening when i click on '.fancybox-button' while keeping the same fancy box settings?

<div class="custom-thumbnail"><a class="fancybox" rel="group" href="Gallery/Image3.jpg"><img title="Bird Caption" src="Gallery/_t/testImage3_jpg.jpg"></a></div>
<div class="custom-caption"><a class="fancybox-button"  rel="fancybox-button" href="Gallery/testImage3.jpg">Click here to open gallery</a></div>

Here's my code to manage the fancybox attributes

        jQuery(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '100%',
        height      : '100%',
        title: this.title,
        wmode: 'transparent',
        allowfullscreen   : 'true',
        allowscriptaccess : 'always',
        beforeLoad: function() {
            this.title = jQuery(this.element).find('img').attr('title');
        },
        next : {
            13 : 'left', // enter
            34 : 'up',   // page down
            39 : 'left', // right arrow
            40 : 'up'    // down arrow
        },
        prev : {
            8  : 'right',  // backspace
            33 : 'down',   // page up
            37 : 'right',  // left arrow
            38 : 'down'    // up arrow
        },
        close  : [27], // escape key

        helpers:  {
            title : {
                type : 'inside' // 'float', 'inside', 'outside' or 'over'
            },
            overlay : {
                showEarly : false
            },
            thumbs : {
                width: 50,
                height: 50
            }
        }
    });

score 2 · Answer 1 · answered May 07 '15 at 23:13

2

This worked for me. What do you guys think of this solution?

jQuery('.fancybox-button').click(function(){
        jQuery(this).parent().prev().find('.fancybox').trigger('click');
        return false;
    });

answered May 07 '15 at 23:13

Hectooorr

665
1
8
15

You're making things much complicated than they should. You just need to use "fancybox" class. Not "fancy-box", as you wrote in my answer's comment. Your solution may work, but is a no way to go! Please, just read my answer again, and try to understand how FancyBox plugin activates. – ilter May 08 '15 at 01:16
your solution is exactly what you need to do. See similar answer http://stackoverflow.com/a/10838140/1055987 – JFK May 09 '15 at 04:45
@ilter : this solution is the way to go – JFK May 09 '15 at 04:46
Thanks, @JFK. I see it after a closer look at the question :) – ilter May 09 '15 at 13:04

ilter · Answer 2 · 2015-05-09T13:04:02.903

0

EDIT: Thanks to @JFK, I finally understood what's OP's issue. And yes, OP's solution seems to be fine :)

FancyBox activates itself by the class definition fancybox. So, the reason your anchor tag opens fancybox window (the one inside the div.custom-thumbnail) is that it has a fancybox class. If you have different css attributes defined for your fancybox-button you can just add fancybox class near it. Or else, just change the fancybox-button to fancybox and you should be good to go.

I've created a fiddle for you. The only thing I changed was changing "fancybox-button" class to "fancybox" and it works.

By adding a seperate fancybox class near the fancybox-button class also works. See the updated fiddle.

edited May 09 '15 at 13:04

answered May 06 '15 at 21:36

ilter

4,030
3
34
51

That duplicated the images in the dialog window. – Hectooorr May 06 '15 at 23:19
I prepared a fiddle for you. See the updated answer. – ilter May 07 '15 at 08:36
Still 'fancybox-button' with the addition of 'fancy-box' doesn't open the gallery with the same properties as the link inside 'custom-thumbnail'. – Hectooorr May 07 '15 at 22:47
The class name which activates FancyBox plugin is "fancybox", not "fancy-box"! When you write "fancybox" near "fancybox-button", plugin activates with the same settings as your "custom-thumbnail". – ilter May 08 '15 at 01:17
Using the class `fancybox` is not mandatory since fancybox can be bound to any selector like `$(".foo").fancybox()`. Changing classes is not the answer – JFK May 09 '15 at 04:37
In OP's question, he configured FancyBox plugin with to be accessable with "fancybox" class. Anyways, I see it now, I got the question all wrong :) – ilter May 09 '15 at 13:01

FancyBox open same gallery from multiple links

2 Answers2