Colorbox - Help!

[Goksly]

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:

$(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
                });
            });
        });

<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>

 

[SoapSurgeon]

Just a quick glance, but what does $(this) refer to when inside the colorbox function?

Your line:

if ($(this).attr('href') != undefined)

looks like you are trying to refer to the anchor that has been clicked, but inside colorbox $(this) probably doesn't refer to that?

You can do something like:

var $this = $(this);

just after your event.preventDefault() line to cache a reference to the link that was clicked and then in your colorbox function change:

$(this).attr('href')

to

$this.attr('href')

See if that makes any difference.

 

[Goksly]

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.

 

[visibleman]

Surely the 'changing of the thumb to preview' should be outside the preview click function?

The below works though -

JQ - 
<script type="text/javascript">
$(document).ready(function() {
  $(".thumbCb").click(function() {
      // ColorBox Preview
      $("#previewCb").colorbox();

      // Thumb to Preview
      $("#previewCb").attr("href", $(this).attr("src").replace("Thumb/", ""));
      $("#previewCbImg").attr("src", $(this).attr("src").replace("Thumb/", "Preview/"));
  });
});
</script>

HTML - 
<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 id="previewCb" href="">
        <img id="previewCbImg" src="" />
    </a>
</div>

 

[Goksly]

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.

 

[SoapSurgeon]

I have not got much experience with colorbox but I have used fancybox pretty extensively. To group in fancybox you set the rel attribute on all the images that are part of the same group.

Could you not set the rel attribute of all the thumbs to "thumbCb" but only have the class "thumbCb" on the ones that are clickable?

 

[dave_a141]

I think your error is as follows:

$(".thumbCb").colorbox(...)

This code is initialising a colorbox on the css class thumbCb. Colorbox works by (1) setting up click handers on the relevant css classes AND (2) showing the colorbox

Therefore all you need to do is

$(". previewCb").colorbox(...)

 

[Goksly]

How will it know that the thumbs are part of the gallery though?