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和position absolute;

<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执行类似操作。