Jquery - 带有 addClass 和 removeClass 的简单图库

Question

我正在尝试创建一个简单的 jquery 库。

我有它的工作除了，当你点击拇指 - 它这样做：

1. 用第一张图片替换现有拇指的空间
2. 用大拇指在主图像上方抛出浮动
   • 点击最后​​一个拇指看看我的意思

有谁知道我可以用 CSS 或 Jquery 解决这个问题吗？

我试图让这个超级简单。

谢谢

这里是 jsfiddle：http://jsfiddle.net/webdott/zZNBQ/1/

    <div>
    <img src="image1.jpg" class="first"/>
    <img src="image2.jpg" />
    </div>

    <style>
    img {float:right;width:10%;margin:1%;}
    .fullview{width:60%;margin:0 4% 0 0;float:left;}
    .first{width:60%;margin:0 4% 0 0;float:left}
    </style>

    <script>
    $('img').click(function() {
    $(this).addClass('fullview').siblings().removeClass('fullview first');
    });
    </script>

Answer 1

另一种选择是使用容器 div 和绝对位置；

<div style="width:40%;float:right;">

看到这个JSFiddle。

Answer 2

我认为问题在于选择的图像之前和之后会影响较大的图像的显示和浮动方式。如何将大图像作为单个元素浮动，然后更改该元素的源以匹配单击的元素？喜欢this example。

$('.thumbnail').click(function() {
   var src = $(this).attr('src');
   $('#fullview').attr('src',src);
});

和

#fullview {
float:left;
max-width:75%;
}

ul {
float:right;
}

li {
    display: inline;
}
li img {
    width:50px;
    cursor: pointer;
}

或者您可以使用the gallery on the side like this example 做类似的事情。