Question

所以如果可能的话我需要帮助，尽量做到尽可能详细，这样你们才能理解我的问题。我发现了一个简单的ebay风格的图库代码，我希望将其整合到我的网站中。继承人的代码

<table width="500" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="width: 400px; vertical-align: top;">
            <img src="1_large.jpg" width="398" height="299" alt="Large Photo" style="border: 1px solid #000000;" name="swap">
        </td>
        <td style="width: 6px;"></td>
        <td style="width: 94px; vertical-align: top;">
            <img src="1_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='1_large.jpg';">
            <br>
            <img src="2_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='2_large.jpg';">
            <br>
            <img src="3_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='3_large.jpg';">
        </td>
    </tr>
</table>

我的网站上还有一个slimbox2插件，如果有人不知道那是什么链接就在这里。 slimbox2 所以我需要做的就是添加这个

<a href="images/1_large.jpg" rel="lightbox"><img src=........./>

允许使用slimbox将图像扩展为更大的预览，我的问题是，如果我将其添加到主图像中，说明＆＃34; 1_large.jpg＆＃34; href链接仍然链接到该特定图像，无论我是否交换＆＃34;当我点击另一张图片时

例如，我在图库中有3张图片。第一张图片已加载到ebay样式库的大预览中，当我点击图片3时，它会被换成ebay样式的大预览，现在我想展开它并看到更大的图像（这就是slimbox的用武之地）但是一旦我点击大预览，图像就会扩展，但图像1会被加载，而不是图像3。

希望我明白这个问题，如果有人能提供帮助那就太棒了！总而言之，我正在寻找一个类似于neweggs网站的照片库，用于查看产品

Answer 1

这是您正在寻找的功能吗？ - FIDDLE

HTML

<div class='bigpic'></div>
<div class='rightbar'>
    <div class='littlepic'><img src='http://img4.wikia.nocookie.net/__cb20130310121325/youtubepoop/images/c/c0/Goofy_Yop.jpg' /></div>
    <div class='littlepic'>
        <img src='http://img4.wikia.nocookie.net/__cb20130706024933/disney/images/8/88/Mickey-Mouse-High-Resolution-Wallpapers.stillmaza.com-1.jpg' /></div>
    <div class='littlepic'><img src='http://images.wikia.com/disney/images/archive/7/71/20121205062928!Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg' /></div>
</div>

CSS

.bigpic {
    float: left;
    width: 400px;
    height: 300px;
    border: 1px solid black;
    overflow: hidden;
}
.bigpic img {
    width: 400px;
    height: 300px;
}
.rightbar {
    float: left;
    width: 110px;
    margin-left: 5px;
}
.littlepic {
    width: 100px;
    height: 80px;
    border: 1px solid black;
    margin-bottom: 5px;
    overflow: hidden;
}
.littlepic img {
    width: 100%;
}

JS

$('.littlepic img').on('click', function(){
    $('.bigpic').html('');
    $(this).clone().appendTo('.bigpic');
});

编辑：

<script>
$(document).ready(function(){

$('.rightbar .littlepic:first-child img').clone().appendTo('.bigpic');
$('.littlepic img').on('click', function(){
    $('.bigpic').html('');
    $(this).clone().appendTo('.bigpic');
                                           });//end click

});//end ready
</script>
</body>
</html>

易趣风格画廊问题

1 个答案: