Fancybox on click with element binding in Yii CGridView with ajax Pagination

Question

I am using Yii CGridView with ajax Pagination and one of the column is Link for image or inline ajax content and i want to use FancyBox to the column.

When i use pagination i lose the binding on the new element.

if i try to make it on element click i always get error if the element has fancy-box already like below

$('a.fancy-img').live('click', function () {
     $(this).fancybox({});
      return false;
});

But I always get javascript error if i click twice on the same link.

Check http://stackoverflow.com/a/9084293/1055987 – JFK Apr 04 '14 at 19:07 — JFK, Apr 04 '14 at 19:07

Tushar Gupta - curioustushar · Answer 1 · 2014-04-04T15:30:15.043

0

Try

fancybox uses $(element).data() to store its element related configuration.

So check if(!$(this).data().fancybox) --> if there is no data that means no fancybox is registered to it than register fancybox

$('a.fancy-img').live('click', function () {
    if(!$(this).data().fancybox){ //or if(!$(this).data("fancybox"))
      $(this).fancybox({});
    }
      return false;
});

.live() is deperciated use .on()

Syntax

$( elements ).on( events, selector, data, handler );

edited Apr 04 '14 at 15:30

answered Apr 04 '14 at 15:25

Tushar Gupta - curioustushar

58,085
24
103
107

@user3498582 Try `if(!$(this).data("fancybox"))` – Tushar Gupta - curioustushar Apr 04 '14 at 15:30
1

I know its depreciated, but i am using older version of jquery ! thanks for your help other answer works perfect:) cheers – Apr 04 '14 at 15:35

score 0 · Accepted Answer · answered Apr 04 '14 at 15:26

0

The problem you are trying to initialize fancybox for the element twice so your javascript breaks and doesn't work.

You can add class or some attribute to the element that has already has Fancybox init so you don't initialized it again for the same element and your javascript beaks as below :

$('a.fancy-img').live('click', function () {
            var El = $(this);
            $(this).fancybox({});
            if (!El.hasClass('fancy-box-init')) {
                El.addClass('fancy-box-init');
                El.trigger('click');
            }
            return false;
 });

answered Apr 04 '14 at 15:26

Meabed

3,828
1
27
37

`.live()` is deprecated, use `.on()` (jQuery v1.7+) instead – JFK Apr 04 '14 at 19:04
@JFK yes but from his code and other comment he is using older version of jQuery. so .live works fine. thanks for the comment. – Meabed Apr 04 '14 at 21:24

Fancybox on click with element binding in Yii CGridView with ajax Pagination

2 Answers2