jquery img和img title swap

-1

我有一个图像库，当单击缩略图时可以切换主图像。我希望在点击主图像上方的div上显示img标题。图像交换正在处理这个代码。我是一个jquery总新手，所以将不胜感激任何帮助。jquery img和img title swap

$(document).ready(function() { 
$("#gallery li img").click(function(){ 
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
}); 

var imgSwap = []; 
$("#gallery li img").each(function(){ 
    imgUrl = this.src.replace('thumb/', ''); 
    imgSwap.push(imgUrl); 
}); 

$(imgSwap).preload(); 
}); 

$.fn.preload = function() { 
this.each(function(){ 
    $('<img/>')[0].src = this; 
}); 
} 

<div class="wrap"> 
<div id="gallery"> 
<div id="caption"></div><img src="gallery/img_1.jpg" alt="" width="940" height="534" id="main-img" /> 
<ul> 
    <li><img src="gallery/thumb/img_1.jpg" id="imgcap" title="this is cap 1" alt="" width="220" height="125" /></li> 
    <li><img src="gallery/thumb/img_2.jpg" id="imgcap" title="this is cap 2" alt="" width="220" height="125" /></li> 
    <li><img src="gallery/thumb/img_3.jpg" id="imgcap" title="this is cap 3" alt="" width="220" height="125" /></li> 
    <li><img src="gallery/thumb/img_4.jpg" id="imgcap" title="this is cap 4" alt="" width="220" height="125" /></li> 
    <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 5" alt="" width="220" height="125" /></li> 
    <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 6" alt="" width="220" height="125" /></li> 
    <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 7" alt="" width="220" height="125" /></li> 
    <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 8" alt="" width="220" height="125" /></li> 
</ul></div></div>

来源

2013-01-25 boontoony

请问您可以使用jsfiddle并在此处发布链接？ –

你可以像下面这样做

<html> 
    <head> 
    <title></title> 
    <meta charset="utf-8"> 
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> 
    <script> 
     $(document).ready(function(){ 
      $("#thumb_gallery > li > img").click(function(){ 
       $("#caption").html($(this).attr('title')); 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="gallery"> 
<div id="caption"></div><img src="gallery/img_1.jpg" alt="" width="500" height="200" id="main-img" /> 
<ul id="thumb_gallery"> 
    <li><img src="gallery/thumb/img_1.jpg" id="imgcap" title="this is cap 1" alt="" width="20" height="12" /></li> 
    <li><img src="gallery/thumb/img_2.jpg" id="imgcap" title="this is cap 2" alt="" width="20" height="12" /></li> 
    <li><img src="gallery/thumb/img_3.jpg" id="imgcap" title="this is cap 3" alt="" width="20" height="12" /></li> 
    <li><img src="gallery/thumb/img_4.jpg" id="imgcap" title="this is cap 4" alt="" width="20" height="12" /></li> 
    <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 5" alt="" width="20" height="12" /></li> 
    <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 6" alt="" width="20" height="12" /></li> 
    <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 7" alt="" width="20" height="12" /></li> 
    <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 8" alt="" width="20" height="12" /></li> 
</ul></div> 

    </body> 
</html>

我已经改变了大小我的测试

来源

2013-01-25 08:42:03 Roger

我加了这个，它工作！谢谢。 $（“＃thumb_gallery> li> img”）。first（）。click（）; – boontoony

如果有帮助，然后接受答案。 :) – Roger

@LouisaTracey尝试阅读我添加到问题中的评论。 –

试试这个，

$("#gallery li img").click(function(){ 
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
    $("#caption").html($(this).attr('title')); 
});

来源

2013-01-25 07:47:28

我想这应该是更好：

$(document).ready(function(){ 

    // for each element exists now and will be added in the future and is matched by this selector, will add a click function that does the work 
    $("#gallery li img").live("click", function(){ 
     $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
     $("#caption").html($(this).attr('title')); 
    }); 
    $("#gallery li img").first().click(); 
}

来源

2013-01-25 07:54:29

太棒了！非常感谢。第一张图片是否可以在不点击的情况下显示其标题标题？它只是一直空着，直到再次点击。 – boontoony

@LouisaTracey检查我更新的代码。 –

使用这个： –

jquery img和img title swap

回答

相关问题