1

I'm trying to make a relatively simple gallery which has 3 sizes for the images: -

  1. fullsize - this is linked to using "colorbox" for a modal display
  2. mediumsize - there is only one of these on the page, it is what's clicked to trigger the colorbox
  3. thumbnail- these are under the medium sized image. Clicking on these replaces the medium sized image with the relevant image (depending on which thumbnail is clicked), and also replaces the href for the colorbox link on the medium image.

Here's what I've got so far, simplified. Note that the filenames / paths will never be this simple, so I can't use manipulation of them as a solution.

<script type="text/javascript">
    $(document).ready(function() {

        //gallery image swap
        $("#gallery a").click(function(){
            $('#main-img').attr('href',$(this).attr('href'));

            // swap image with fade in-out
            var src = $(this).attr("rel");
            $("#themediumimage").fadeOut(50, function() {
                $(this).attr("src", src).fadeIn(300);
            });

        });

    });
</script>

<a class="colorbox" href="path/to/mainimage_fullsize.jpg" rel="colorbox-gallery" id="main-img"><img border="0" id="themediumimage" src="path/to/mainimage_mediumsize.jpg" /></a>
<a class="colorbox" href="path/to/extraimage1_fullsize.jpg" rel="colorbox-gallery"></a>
<a class="colorbox" href="path/to/extraimage2_fullsize.jpg" rel="colorbox-gallery"></a>
<a class="colorbox" href="path/to/extraimage3_fullsize.jpg" rel="colorbox-gallery"></a>
<a class="colorbox" href="path/to/extraimage4_fullsize.jpg" rel="colorbox-gallery"></a>
<a class="colorbox" href="path/to/extraimage5_fullsize.jpg" rel="colorbox-gallery"></a>

<div id="gallery">
    <a href="path/to/mainimage.jpg" rel="path/to/mainimage_mediumsize.jpg"><img src="path/to/mainimage_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
    <a href="path/to/extraimage1.jpg" rel="path/to/extraimage1_mediumsize.jpg"><img src="path/to/extraimage1_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
    <a href="path/to/extraimage2.jpg" rel="path/to/extraimage2_mediumsize.jpg"><img src="path/to/extraimage2_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
    <a href="path/to/extraimage3.jpg" rel="path/to/extraimage3_mediumsize.jpg"><img src="path/to/extraimage3_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
    <a href="path/to/extraimage4.jpg" rel="path/to/extraimage4_mediumsize.jpg"><img src="path/to/extraimage4_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
    <a href="path/to/extraimage5.jpg" rel="path/to/extraimage5_mediumsize.jpg"><img src="path/to/extraimage5_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
</div>

This works pretty well, the "medium" image is changed by clicking on the thumbnails, and the correct full size image is shown in the colorbox modal if you then click on the new medium image.

The only problem is, if you click on, for example, the 3rd thumbnail, then click on the medium image, the correct fullsize image shows but it is incorrectly referenced as "Image 1 of 6" and then correctly as "Image 3 of 6" when advancing through the colorbox back / forward buttons. In other words, the colorbox sequence is changed to: -

#3 #2 #3 #4 #5 #6

the original number one is gone completely from the sequence. I know why this is happening, the javascript I have is completely replacing image #1's src and href.

I feel I'm really close to what I ideally want, which is as I have but when the "medium" image is changed to #3, clicking on it brings the colorbox up with "Image 3 of 6" and #1 will still be in the right place in the colorbox sequence.

The number of images can change but will always be 2, 3, 4, 5 or 6.

Any help would be greatly appreciated!

EDIT: Using jQuery 1.4.4.

4

0 回答 0