Jquery - 带有 addClass 和 removeClass 的简单画廊

Question

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

我让它工作，除了当你点击拇指时 - 它会这样做:

1. 用第一张图片替换现有缩略图的空间
2. 将大拇指置于主图像上方以抛出 float
   • 点击最后​​一个拇指看看我的意思

有人知道如何使用 CSS 或 Jquery 解决这个问题吗？

我正在努力让这个 super 简单。

谢谢

这是 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 .