[Plugin: jQuery Colorbox] Several photo groups on same page

Hi,

yeah, you could do that.

If you add the CSS classes yourself (in the WordPress admin interface or directly in the HTML), for example to all thumbnails of the first group add “colorbox-1”, for the second “colorbox-2” and so on.
The plugin will then not add the CSS classes it would usually add automatically if you checked the box in the settings.

Cheers,
Arne

WOOWWW so simple and it works!!!

THANK YOU Arne for your quick answer!

Roger

I am trying to accomplish the same thing but I’m having trouble figuring out where to place the code for multiple galleries on the same page. Here is what I tried:

<strong>Single Image</strong>
[gallery link="file" "colorbox-1" columns="1"]

<strong>Multiple Images</strong>
[gallery link="file" "colorbox-2" columns="3"]

I also tried editing the the CSS Class input field in the main Posting panel but it would only save one class for each page.

Hi,

it is possible to display more than one gallery in a page or post, but not in the way that you tried.

See this post for more information.

The CSS class is added automatically to the pictures in a gallery (providing you checked either one of the “Automate jQuery Colorbox …” options), but I can’t say whether the class will be the same if two galleries are displayed in the same post.

You could add the individual thumbnails to the post or page and add the CSS class in the image dialog.

Cheers,
Arne

If I understand correctly, the workaround is to post the gallery images somewhere in another post and then reference them in the existing post that will display multiple galleries.

Photos from Gallery Post 123
[gallery link="file" id="123" columns="4"]

Photos from Gallery Post 456
[gallery link="file" id="456" columns="4"]

This seems like a very long and tedious way to show multiple galleries in a single post. Also it requires the each gallery to be previously posted. Is there not another workaround that uses some tags in the [gallery] code or through CSS? What am I missing here. I’m imagining something similar to the “rel” tag that was mentioned earlier that works for the basic colorbox (sans WordPress).

Hi,
I’m sorry, but I don’t know another way besides putting the thumbnails into the post by hand and assigning the CSS class by hand, just like JamesBB did on his page.
Maybe it would be possible to add multiple NextGEN galleries to one page, but then all images would be grouped into one Colorbox group because they appear on the same page… If NextGEN gallery would allow a CSS class to be applied to all images in one gallery, then you could add “colorbox-1” to the first, and so on.
Cheers,
Arne

Hi Arne,

Can we add different NextGen galleries on a single page which won’t be displayed as a single slideshow?

Thanks,
-tejas

Hi Tejas,

not if you use both plugins without modifications. Nextgen places the picture on a page or post, for example the post with the id “123”.

If set to automatically work for all images, my plugin then adds a CSS class to every picture, in this example “colorbox-123”

Maybe you could switch the automatic adding of the colorbox-class of and add the classes using Nextgen, but I don’t know if the Nextgen plugin can do that.
It does not matter which number follows after “colorbox-“, all images with the same number are grouped.

Cheers,
Arne

Hey Arne,

Thank you so much for your jQuery Colorbox plugin. It’s freaking awesome!

I came across this thread and thought I’d have a crack at documenting how I modified NextGEN to work with multiple galleries/photo groups on one page.

I did a bit of a step by step in a blog post that will hopefully help everyone in the thread out and help out people in future. If you get anyone asking you about how to do this via email or on your site then hopefully you can refer back to this blog post!
NextGEN gallery and jQuery Colorbox with multiple galleries

Thanks again for your plugin Arne. I hope this helps the others out ??

Cheers,

Bronson

Bronson,

Great article you wrote brother. I was wondering if you could help me out with a bit more info as I seem to be a bit stuck due to having multiple pages per gallery.

Basically, I have multple ngg galleries on the same page, for each one I am only displaying 10 thumbnails, and there is the page nav at the bottom of each gallery.

So firstly, I was wondering if you could show an example of the css class that you created for a “colorbox-ID#”.

Since only 10 images per gallery are displayed, the slideshow then only scrolls through 10 images of the gallery rather than all of them. If you are on page 2 when you begin the slideshow, it scrolls through images 11-20.

My other problem will be a bit more complicated I think. That is that when you flip to the second page of a specific gallery, it changes to page 2 for all the galleries displayed on the page.

Thanks again for the great article, it got me 98% of the way there ?? And thanks in advance for any further info.

-Hoss

Hey Hoss,

Sorry for the slow reply. I’ve been interstate for a few days. Have you managed to solve your problem yet? If not can you please send me a link to the site you are working on so I can have a look at an example and check out the generated code so I can help you get on the right track.

Thanks dude!