Colorbox - Help!

Goksly

Goksly

Goksly

Soldato
Joined
5 Mar 2003
Posts
10,781
Location
Nottingham
Ah this is doing my nut in!

Basically have three image sizes per image:
thumb
preview
full

I've got 5 or so thumb nails. User clicks on a thumb nail and it loads the preview into the box below. They click on the preview and it pops up the image in a colorbox.

Problem: I can't do it! When I hook up the thumbnails to belong in the colorbox group, when you click on them it just opens up the colorbox. Don't worry about populating the right urls in the preview section (will be done in asp.net)... it's just the client side stuff thats wrecking my head. Any help would be greatly appreciated.

Where I've got too:
Code: 
$(document).ready(function() {
            $(".previewCb").click(function(event) {
                
                // Stop the normal event (redirecting to a new window).
                event.preventDefault(); 
            
                // Open the colour box
                $(".thumbCb").colorbox({
                    href: function() {
                        if ($(this).attr('href') != undefined)
                            return $(this).attr('href');
                        if ($(this).attr('src') != undefined)
                            return $(this).attr('src').replace("Thumb/", "").replace("Preview/", "");
                        return "";},
                    rel: 'thumbCb',
                    open: true
                });
            });
        });

Code: 
<div>
        <img class="thumbCb" src="http://localhost/Thumb/image-1.jpg" />
        <img class="thumbCb" src="http://localhost/Thumb/image-2.jpg"/>
        <img class="thumbCb" src="http://localhost/Thumb/image-3.jpg" />
        <img class="thumbCb" src="http://localhost/Thumb/image-4.jpg"/>
        <img class="thumbCb" src="http://localhost/Thumb/image-5.jpg" />
    </div>
    <div >
        <a class="previewCb" href="http://localhost/image-3.jpg">
            <img src="http://localhost/storagelocationtwo/Preview/image-3.jpg"/>
        </a>
    </div>
 
It appears to be referring to the element with the class definition... So I'm happy that those lines are collecting the right information (the correct image links) its just the functionality. Worst case I'll create the images and anchors separately and hide the links, but seems like a rough way of doing things.
Cheers.
 
The code replacing the thumb and preview from the image string is just to put the full size url into the colorbox logic. As we deal with millions of photos we don't create thumb nails and previews until required which is why clicking thumb -> populating preview has to be done in asp.net.

I just need to be able to have images in the colorbox which do not show the colorbox when clicked (thumbs) but are part of the slideshow.
 
You must log in or register to reply here.
Back
Top Bottom