CODEWITHSUNDEEP
javascriptjquerybuttonfancyboxeach
sider
sider

Reputation: 687

Displays the same image with fancybox plugins on button click

I have some buttons with same id - previewPhoto. I'm using fancybox to display photo. But all button displays the same image. Where could be a problem, my 'photo' and 'id' vars are different. 

$(function() {
    $('button#previewPhoto').each(function() {
        photo = $(this).val();
        id = $(this).attr("title");
        link = 'http://domain.com/members/photos/'+id+'/'+photo;
        $(this).click(function() {
            $.fancybox({
                //'orig'            : $(this),
                'padding'       : 0,
                'href'          : link,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });
        });
    });
});

Upvotes: 0

Views: 183

Answers (1)

JFK
JFK

Reputation: 41143

You don't need .each(), simply do this :

jQuery(function ($) {
    $(".previewPhoto").on("click", function () {
        var photo = $(this).val(),
            id = this.title,
            link = 'http://farm8.staticflickr.com/' + id + '/' + photo;
        $.fancybox(link, {
            // API options here
        });
    });
});

See JSFIDDLE

NOTE: .on() requires jQuery v.1.7+

Upvotes: 1

Related Questions