1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Colorbox - Help!

Discussion in 'HTML, Graphics & Programming' started by Goksly, 6 Jun 2012.

  1. Goksly

    Capodecina

    Joined: 5 Mar 2003

    Posts: 10,649

    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>
    
     
  2. SoapSurgeon

    Wise Guy

    Joined: 14 Apr 2003

    Posts: 1,101

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

    Your line:

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

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

    Code:
    $(this).attr('href')
    to
    Code:
    $this.attr('href')
    See if that makes any difference.
     
  3. Goksly

    Capodecina

    Joined: 5 Mar 2003

    Posts: 10,649

    Location: Nottingham

    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.
     
  4. visibleman

    Wise Guy

    Joined: 3 Jun 2005

    Posts: 1,909

    Location: The South

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

    The below works though -
    Code:
    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>
    
     
  5. Goksly

    Capodecina

    Joined: 5 Mar 2003

    Posts: 10,649

    Location: Nottingham

    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.
     
  6. SoapSurgeon

    Wise Guy

    Joined: 14 Apr 2003

    Posts: 1,101

    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?
     
  7. dave_a141

    Gangster

    Joined: 9 May 2005

    Posts: 121

    Location: Yorkshire

    I think your error is as follows:

    Code:
    $(".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

    Code:
    $(". previewCb").colorbox(...)
     
  8. Goksly

    Capodecina

    Joined: 5 Mar 2003

    Posts: 10,649

    Location: Nottingham

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