jackmoore / colorbox

A light-weight, customizable lightbox plugin for jQuery
http://www.jacklmoore.com/colorbox/
MIT License
4.75k stars 1.14k forks source link

Integrate Ad Gallery plugin with Colorbox plugin #259

Open edwinmugendi opened 12 years ago

edwinmugendi commented 12 years ago

I have an Ad Gallery plugin (http://adgallery.codeplex.com/documentation) and want when I click on the image it opens colorbox plugin. There is this code snippet provided by Ad gallery which integrates with Fancybox:

$(".ad-gallery").on("click", ".ad-image", function() { $.fancybox.open({ href : $(this).find("img").attr("src"), closeBtn: false, closeClick : true, openEffect : 'elastic', openSpeed : 150, closeEffect : 'elastic', closeSpeed : 150, helpers : { overlay : null } }); });

How should the colorbox code be?

Your assistance will be highly appreciated.

jackmoore commented 12 years ago

This should be all there is to it:

$(".ad-gallery").on("click", ".ad-image", function() { $.colorbox({ href : $(this).find("img").attr("src") }); });

You'll have to look at colorbox's settings documentation to decided what other properties you want to change.

On Wed, Oct 3, 2012 at 2:03 PM, edwinmugendi notifications@github.comwrote:

I have an Ad Gallery plugin (http://adgallery.codeplex.com/documentation) and want when I click on the image it opens colorbox plugin. There is this code snippet provided by Ad gallery which integrates with Fancybox:

$(".ad-gallery").on("click", ".ad-image", function() { $.fancybox.open({ href : $(this).find("img").attr("src"), closeBtn: false, closeClick : true, openEffect : 'elastic', openSpeed : 150, closeEffect : 'elastic', closeSpeed : 150, helpers : { overlay : null } }); });

How should the colorbox code be?

Your assistance will be highly appreciated.

— Reply to this email directly or view it on GitHubhttps://github.com/jackmoore/colorbox/issues/259.

Jack Moore jacklmoore.com twitter.com/jacklmoore

edwinmugendi commented 12 years ago

This works for a single image but I have a number of images and I want to open them as a gallery. I have tried to include the "rel" property but to no avail.

    $(".ad-gallery").on("click", ".ad-image", function() { 
        $.colorbox({ 
            rel:'modal-image-overlay-group',
            href : $(this).find("img").attr("src")
        }); 
    });

Any ideas?

Thanks in advance