javascript - colorbox bind on live with elements' grouping won't work - Stack Overflow

admin管理员组

文章数量:1325497

I'm using the well known and good jQuery Colorbox for a gallery. Part of images are being added to the page with ajax. I am trying to have colorbox bind to all new and existing images on page and also group all of them together. Right now, I succeed to achieve only one of the two. With this code, all images are well grouped together to one colorbox gallery, but after adding more images to the page (via ajax), colorbox is not being binded to them at all:

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

With this code, images are binded to colorbox after adding more images to page, but the rel grouping is not working (even not to the set of images that were first loaded to the page):

$('a.exhibition').live('click', function() {
    $.fn.colorbox({
        inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true,      
        rel:"hpexhibition"
    });
    return false;
});

I also tried this code, but it is the same - images are well binded to colorbox, but as single images, not as a (rel) gallery:

$("ul#home-exhibition").on("click", "a[rel='hpexhibition']", function (event) {
    event.preventDefault();
        $.colorbox({
            inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true, 
        rel:"hpexhibition"                
         });
});

My html markup for the images gallery is this:

<ul id="home-exhibition">       
    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="3" href="#artitem-cb-details-3">
            <img src="path/to/image53.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-3" class="artitem-cb">
            //Some data of image 3 here...
          </div>    
        </div>
    </li>

    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="4" href="#artitem-cb-details-4">
            <img src="path/to/image4.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-4" class="artitem-cb">
            //Some data of image 4 here...
          </div>    
        </div>
    </li>

    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
</ul>

Is there a way to bine theses two, so that colorbox will work for all images on page - also those that added via ajax - and also will group all of them together? I coulnd't make this work. I believe there should be a way for this to work.

I'm using the well known and good jQuery Colorbox for a gallery. Part of images are being added to the page with ajax. I am trying to have colorbox bind to all new and existing images on page and also group all of them together. Right now, I succeed to achieve only one of the two. With this code, all images are well grouped together to one colorbox gallery, but after adding more images to the page (via ajax), colorbox is not being binded to them at all:

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

With this code, images are binded to colorbox after adding more images to page, but the rel grouping is not working (even not to the set of images that were first loaded to the page):

$('a.exhibition').live('click', function() {
    $.fn.colorbox({
        inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true,      
        rel:"hpexhibition"
    });
    return false;
});

I also tried this code, but it is the same - images are well binded to colorbox, but as single images, not as a (rel) gallery:

$("ul#home-exhibition").on("click", "a[rel='hpexhibition']", function (event) {
    event.preventDefault();
        $.colorbox({
            inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true, 
        rel:"hpexhibition"                
         });
});

My html markup for the images gallery is this:

<ul id="home-exhibition">       
    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="3" href="#artitem-cb-details-3">
            <img src="path/to/image53.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-3" class="artitem-cb">
            //Some data of image 3 here...
          </div>    
        </div>
    </li>

    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="4" href="#artitem-cb-details-4">
            <img src="path/to/image4.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-4" class="artitem-cb">
            //Some data of image 4 here...
          </div>    
        </div>
    </li>

    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
</ul>

Is there a way to bine theses two, so that colorbox will work for all images on page - also those that added via ajax - and also will group all of them together? I coulnd't make this work. I believe there should be a way for this to work.

• javascript
• jquery
• colorbox

Share Improve this question Follow asked Aug 7, 2012 at 10:30 Maor BarazanyMaor Barazany 76122 gold badges1111 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

The approach that would probably work would require you to reinitialize your colorbox after new elements are loaded.

In other words you would have to do:

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

after ajax call is plete.

Looking at the code of colorbox I don't see other simple ways to handle your case.

Put this instead of $('.colorbox').colorbox();

$('body').on('click', '.colorbox', function() {
    $('.colorbox').colorbox({rel: $(this).attr('rel')});
});

My solution

  // This is the trick. Initialize but don't open
  $('.colorbox').colorbox({open:false, rel:'gallery'});

  // Handle click event    
  $('.colorbox').live('click',function(e){
     $(this).colorbox({open:true, rel:'gallery'}); // now open colorbox
     return false;
  });

本文标签： javascriptcolorbox bind on live with elements39 grouping won39t workStack Overflow