jquery img和img标题交换_Jquery_Title_Swap

jquery img和img标题交换

jquery

jquery img和img标题交换,jquery,title,swap,Jquery,Title,Swap,我有一个图像库，当点击缩略图时可以交换主图像。我想有img标题显示在一个div上面的主要图像点击以及。图像交换正在使用此代码。我是jquery的新手，所以如果有任何帮助，我将不胜感激 $(document).ready(function() { $("#gallery li img").click(function(){ $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); }); var i

我有一个图像库，当点击缩略图时可以交换主图像。我想有img标题显示在一个div上面的主要图像点击以及。图像交换正在使用此代码。我是jquery的新手，所以如果有任何帮助，我将不胜感激

$(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>

$（文档）.ready（函数（）{
$（“#图库li img”）。单击（函数（）{
$（'#main img'）.attr（'src'，$（this.attr（'src'））.replace（'thumb/'，''）；
});
var imgSwap=[]；
$（“#图库li img”）。每个（函数（）{
imgUrl=this.src.replace（'thumb/'，''）；
imgSwap.push（imgUrl）；
});
$（imgSwap.preload（）；
});
$.fn.preload=函数（）{
这个。每个（函数（）{
$('

试试这个

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

我认为这应该更好：

$(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();
}

你可以这样做

<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>


$（文档）.ready（函数（）{
$（“#thumb_gallery>li>img”）。单击（函数（）{
$（“#caption”）.html（$（this.attr（'title'））；
});
});

我已更改了测试的大小

请使用JSFIDLE并在此处发布链接好吗？太好了！非常感谢。第一张图像是否可以不单击而显示其标题？在再次单击之前，它将保持为空。使用此：$（“#gallery li img”）。first（）。单击（）；我在中添加了此内容，效果很好！谢谢。$（“#thumb_gallery>li>img”）。首先（）。单击（）；@LouisaTracey尝试阅读我添加到问题中的评论。