3

我有一个作为目标的 div：

<div id="rightbox"></div>

我有按组组织的缩略图：

<img src="group1/thumb/01.png" width="160" height="97" class="imgtopleft" />
<img src="group1/thumb/02.png" width="160" height="97" class="imgtopright" />
<img src="group2/thumb/01.png" width="160" height="97" class="imgbottomleft" />
<img src="group2/thumb/02.png" width="160" height="97" class="imgbottomright" />

我有对应于每个拇指的较大图像：

<img src="group1/large/01.png" width="560" height="297" class="largeimage" />
<img src="group1/large/02.png" width="560" height="297" class="largeimage" />
<img src="group2/large/01.png" width="560" height="297" class="largeimage" />
<img src="group2/large/02.png" width="560" height="297" class="largeimage" />

我想知道是否可以通过使用函数在目标 div（带有 id="rightbox"）中单击相应的缩略图时显示每个较大的图像？

注意：我有大约 10 组带有相应较大图像的缩略图，每组都在一个特定的文件夹中。我可以将所有图像放在同一个目录中并使用不同的命名约定，例如 image01_thumb.jpg 和 image01_large.jpg，但底线是我希望能够打开目标 div 中的每个拇指。

我已经到处寻找这个问题，但还没有找到这个确切的问题的答案。

非常感谢所有建议和帮助。

4

4 回答 4

5

假设元素中已经存在大图像#rightbox，我建议：

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').hide();
            $('#rightbox img').eq(that.index()).show();
            /* or:
            var newSrc = that.attr('src').replace('thumb','large');
            $('img[src="' + newSrc + '"]').show();
            */
        }
    });

但是，如果它们存在于 DOM 中，但不存在于#rightbox：

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').empty();
            var newSrc = that.attr('src').replace('thumb','large');
            $('img[src="' + newSrc + '"]').clone().appendTo('#rightbox');
        }
    });

如果它们不存在于 DOM 中但必须创建：

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').empty();
            var newSrc = that.attr('src').replace('thumb','large'),
                newImg = $('<img />',{src : newSrc}).appendTo('#rightbox');
        }
    });

参考：

  1. jQuery：
  2. '普通' JavaScript
于 2012-04-27T13:15:51.380 回答
1

尝试这个：

$("img").click(function(){
    var largesrc = $(this).attr("src").replace("thumb","large");
    $("#rightbox").html('<img src="'+largesrc+'" width="560" height="297" class="largeimage" />');
});

当一个img被点击时，这个函数将获取图片src，将文件夹thumb替换为large，然后将它作为一个带有该src的图片放在rightbox div中。这将对您页面上的所有图像执行此操作，因此您可能希望为较小的图片提供“smallimage”类或类似的类，然后将第一行更改为$(".smallimage").click(function(){

于 2012-04-27T13:21:45.313 回答
0

这会有帮助吗？只需更改给定的宽度，它将自动更改高度。

$(document).ready(function() {
        $(".imgtopleft").click(function() {
            $(".imgtopleftlargerimage").css("width","1000");
        });
});
于 2012-04-27T13:15:01.963 回答
0

我会将此作为源代码，然后劫持链接上的点击事件。

<a href="group1/large/01.png" class="viewLargeImage">
   <img src="group1/thumb/01.png" width="160" height="97" class="imgtopleft" />
</a>

使用此 JavaScript：

$('.viewLargeImage').click( function(event){
    event.preventDefault();
    var bigPath = $(this).attr('href');
    $(this).replaceWith( "<img src=" + bigPath + " />" );
});

如果需要出现在右框中：

$('.viewLargeImage').click( function(event){
    event.preventDefault();
    var bigPath = $(this).attr('href');
    $('#rightbox').html( "<img src=" + bigPath + " />" );
});

然后google可以索引大图片，没有javascript的人可以找到它们。

于 2012-04-27T13:25:38.997 回答