Question

我正在尝试制作一个相对简单的画廊，其中有三种尺寸的图像： -

fullsize - 这与使用“colorbox”进行模态显示相关联
mediumsize - 页面上只有其中一个，它是点击触发彩盒的内容
缩略图 - 这些是中等大小的图像。单击这些将使用相关图像替换中等大小的图像（取决于单击的缩略图），并替换介质图像上的颜色框链接的href。

这是我到目前为止所获得的，简化的。请注意，文件名/路径永远不会这么简单，所以我不能使用它们作为解决方案。

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

这很好非常，点击缩略图可以更改“中等”图像，如果您再点击新的媒体图像，则会在颜色框模式中显示正确的完整尺寸图像。

唯一的问题是，如果你点击，例如，第三个缩略图，然后点击媒体图像，正确的全尺寸图像显示，但它被错误地引用为“图像1的6”，然后正确地作为“图像通过颜色框后退/前进按钮前进时的“3 of 6”。换句话说，颜色框序列更改为： -

＃3＃2＃3＃4＃5＃6

原来的第一号完全从序列中消失了。我知道为什么会这样，我的javascript完全取代了＃1的src和href。

我觉得我非常接近我理想的想法，就像我一样，但当“中等”图像改为＃3时，点击它会使彩色盒带上“Image 3 of 6”和＃ 1仍将位于颜色框序列中的正确位置。

图像数量可以更改，但始终为2,3,4,5或6。

非常感谢任何帮助！

编辑：使用jQuery 1.4.4。

jQuery图像交换链接和Colorbox

0 个答案: