CODEWITHSUNDEEP
javascriptjquerywordpresscolorbox
Phil Salesses
Phil Salesses

Reputation: 870

Colorbox multiple image slideshow by clicking one image

Please take a look at this site as a reference: http://www.philsalesses.com/place-pulse/

On the left you'll see a screenshot of an image. If you click the image, it will open colorbox for that one image.

I'm using wordpress, so associated with that post there are 4 more screenshots, all in a gallery.

What I want to do is when you click on that one image, to cycle through all the images in the gallery associated with that post.

I'm brand spanking new to wordpress, so please speak down to me.

Upvotes: 1

Views: 5908

Answers (2)

Phil Salesses
Phil Salesses

Reputation: 870

I used NextGen Gallery, imported the pictures using that, set the "Effect" in the options to off. Then I went in to the nextgen source and added colorbox-1 as a class under each img. Style the CSS and I'm done. 4 hours tops.

Take a look at http://www.philsalesses.com/seaswarm for a demo.

Upvotes: 0

Pat
Pat

Reputation: 25675

No need to speak down to - everyone starts somewhere. As for showing your other images, the way the colorbox plugin is setup on your page is like so (pseudocode):

for all links that contain an image {
    if the link is to an image {
        if the image has a CSS class of "colorbox-[0-9]+" {
            group it with all other images with the same CSS class
        }     
        if the image has a CSS class of "colorbox-manual" or no CSS class {
            don't group it with any other images
        }       
    }
}

Looking at your page I see two problems:

  1. Your one image link has the CSS class "colorbox-manual".
  2. There's only one link on your page that meets the above criteria :)

The easiest way to fix it would be to add the other 4 images to your post so they show up as thumbnails, however I suspect this isn't what you want. As a hack, what you could do is add the other 4 images and then give them all a display: none style. That way the colorbox plugin would find them and group them with you main image, but not actually show the thumbnails on the post.

Something like this for the four images:

<a href="image1.jpg" style="display: none;"><img src="image1-thumb.jpg" /></a>
<a href="image2.jpg" style="display: none;"><img src="image2-thumb.jpg" /></a>
<a href="image3.jpg" style="display: none;"><img src="image3-thumb.jpg" /></a>
<a href="image4.jpg" style="display: none;"><img src="image4-thumb.jpg" /></a>

If that doesn't work, check in your markup for the class that the colorbox plugin adds to your images. It should be in the form colorbox-[0-9]+ (i.e. colorbox-123).

Upvotes: 3

Related Questions