Colorbox Gallery With Only One Image Showing On Node

Colorbox Gallery With Only One Image Showing On Node

Tricky set up to achieve Colorbox gallery like here. Most of the time you see multiple thumbnail images on the page and then clicking one shows a colorbox slideshow of larger images. Tricky also is getting captions for each image in the slideshow/gallery.

Colorbox Image Settings

Colorbox Image Settings

We have multiple images, but only the first one will show a thumbnail inline in the article. It will have a caption using the Caption Filter module. Don't forget to set the [caption align=right] if you want to position the image.

Set the link with a style of display:none and give it a title which will become the caption similar to this: 

<a class="colorbox colorbox-insert-image" href="http://example.com/sites/default/files/field/image/palmetto_island_park2.png" rel="gallery-all" style="display:none;" title="Buzzards and clouds"><img alt="Buzzards and clouds" class="image-thumbnail" src="http://example.com/sites/default/files/styles/thumbnail/public/field/image/palmetto_island_park2.png?itok=s8XQYWkd" typeof="foaf:Image" /></a>