Open Fancybox from button class text instead of image link

Question

This is probably a simple fix but it is sure stumping me! Anyhow, I am trying to link to a thumbnail gallery using a button class. For example:

Here is my fancybox init code:

  $(document).ready(function() {
    $(".fancybox-thumb").fancybox({
        beforeShow: function(){ 
            $("body").css({"overflow":"hidden"}); 
        }, 
        afterClose: function(){ 
            $("body").css({"overflow":"visible"}); 
        }, 
        padding : 2,
        modal : false,
        prevEffect  : 'fade',
        nextEffect  : 'fade',
        nextSpeed   : 'slow',
        prevSpeed   : 'slow',
        openSpeed   : 'slow',
        closeSpeed  : 'slow',
        helpers : {
            title   : {
                type: 'outside'
            },
            overlay : {
                opacity : 0.8,
                css : {
                    'background-color' : '#000'
                }
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    });
});

In my HTML I have the following:

<a class="fancybox-thumb" rel="fancybox-thumb" href="images/weddings/PienkosWed-1649.jpg" title="Image 1 Text">
                    <img src="images/weddings/PienkosWed-1649.jpg" alt="" width="150" /></a>
                <a class="fancybox-thumb" rel="fancybox-thumb" href="images/weddings/PienkosWed-1653.jpg" title="Image 2 Text"></a>
                <a class="fancybox-thumb" rel="fancybox-thumb" href="images/weddings/PienkosWed-1655.jpg" title="Image 3 Text"></a>
                <a class="fancybox-thumb" rel="fancybox-thumb" href="images/weddings/PienkosWed-1657.jpg" title="Image 4 Text"></a>
                <a class="fancybox-thumb" rel="fancybox-thumb" href="images/weddings/PienkosWed-1661.jpg" title="Image 5 Text"></a>
                <a class="fancybox-thumb" rel="fancybox-thumb" href="images/weddings/PienkosWed-1667.jpg" title="Image 6 Text"></a>

This works great, except I want to open the fancybox from a button class like:

<a href="OPEN FANCYBOX" class="button1"><span></span><strong>Launch Picture Gallery</strong></a>

I am not sure how to go about this and any help would be greatly appreciated!

http://stackoverflow.com/a/10838140/1055987 – JFK Jun 15 '12 at 18:53 — JFK, Jun 15 '12 at 18:53

lucuma · Accepted Answer · 2012-06-15T19:09:33.440

4

Try this:

$('.button1').click(function(e) {
   e.preventDefault();
    $('.fancybox-thumb:eq(0)').click();
});

Demo: http://jsfiddle.net/lucuma/Skpyw/2/

edited Jun 15 '12 at 19:09

answered Jun 15 '12 at 18:34

lucuma

18,247
4
66
91

Thanks to both of you, I appreciate the time and answer! – tmparisi Jun 15 '12 at 21:34

score 2 · Answer 2 · answered Jun 15 '12 at 18:50

2

Add the below click event on document ready.

$("a.button1").click(function(){
  $(".fancybox-thumb").trigger("click");
});

answered Jun 15 '12 at 18:50

Kundan Singh Chouhan

13,952
4
27
32

This will be problematic unless you call `event.preventDefault()` – lucuma Jun 15 '12 at 19:10

Open Fancybox from button class text instead of image link

2 Answers2