Volker
Volker

Reputation: 578

How to define an additional dynamic link for Colorbox-Images?

I have a one-pager with a lot of images and some galleries. These are triggered to show up in a colorbox-overlay (with Drupal, Colorbox-Plugin), when clicked on the images. So far so good, working great.

Now i want to have additional icons attached to the images and gallerys (for redundancy) to open these images in the colorbox as well.

For my test-gallery i got this working:

<script>
(function($){
    $('.field-name-field-slideshow-trigger').append('<div id="bgShowOverlay"></div>').css("cursor","pointer");
            $('#bgShowOverlay').click(function() {
                $("a[rel='gallery-all']").colorbox({open:true});
             });
})(jQuery);
</script>

Now for the single images (no gallery) i need to specify this somehow for the dynamically created image-links. I dont know how to contruct this part

$('#bgImageOverlay').click(function() {
                $("a[rel=?????]").colorbox({open:true});
             });

to get it working with my images, that have an rel-attribute like this:

rel="gallery-field_collection_item-60"

I hope my question is clear enough, please excuse my bad english. Any help highly appreciated!

EDIT:

I found out that

"a[rel='gallery-all']"

does not work (like i was expecting) when i have more than one gallery on my one-pager. All images that are in galleries show in the one i open in the colorbox.

I'm looking for a way to give some kind of differentiation to the link.

How can i form the script, that it takes the dynamically created galleries into account?

Upvotes: 0

Views: 462

Answers (1)

Jack
Jack

Reputation: 9538

This perhaps?

$("a[rel^=gallery]").colorbox({open:true});

I'm don't really have a clear enough idea of how you have things laid out to give a definitive answer.

Upvotes: 2

Related Questions