同时交换图像和标题

Question

我有一个图像库我正在尝试制作到目前为止效果还不错。我的问题是，无论我如何尝试，我都无法让每个图像都有自己的标题，当我使用JavaScript将它们交换出来时。现在，在任何人对此问题感到不满之前，我已经看到了这里，并发现有些人使用html添加字幕，但是当我交换图像不会工作时。我想也许创建一个空的div并插入HTML文本使用JavaScript，但我怎么能得到标题加载匹配适当的图片？数组是这里唯一的选择吗？这是我的问题页面。

My site

我离开了“照片”分区空的，所以图像可以加载到它。到目前为止，一切正常只是混淆了字幕。

下面是javascript代码

$('#gallery img').each(function(i) { 
    var imgFile = $(this).attr('src'); 
    var preloadImage = new Image(); 
    var imgExt = /(\.\w{3,4}$)/; 
    preloadImage.src = imgFile.replace(imgExt,'_h$1'); 

    $(this).hover(
     function() { 
      $(this).attr('src', preloadImage.src); 
     }, 
     function() { 
     var currentSource=$(this).attr('src'); 
      $(this).attr('src', imgFile); 
    }); // end hover 
}); // end each 




$('#gallery a').click(function(evt) { 
evt.preventDefault(); 
var imgPath = $(this).attr('href'); 
var oldImage = $('#photo img'); 
var newImage = $('<img src=" ' + imgPath + ' ">'); 
newImage.hide(); 
$('#photo').prepend(newImage); 
newImage.fadeIn(1000); 
oldImage.fadeOut(1000,function(){ 
$(this).remove(); 
}); 
}); 
$('#gallery a:first').click(); 

而且我的HTML

<div id="main">   <!-- Main Content --> 

<div id="photo"> 
</div> 

<div id="gallery"> 
<a href="images/home1_h.jpg"><img src="images/home1.jpg" alt="home 1"></a> 
<a href="images/home2_h.jpg"><img src="images/home2.jpg" alt="home 2"></a> 
<a href="images/home3_h.jpg"><img src="images/home3.jpg" alt="home 3"></a> 
<a href="images/home4_h.jpg"><img src="images/home4.jpg" alt="home 4"></a> 
<a href="images/home5_h.jpg"><img src="images/home5.jpg" alt="home 5"></a> 
<a href="images/home6_h.jpg"><img src="images/home6.jpg" alt="home 6"></a> 
</div> 

</div> 

Answer 1

我会做这样的

$('#gallery img').click(function(evt) { 
    var elem = $(this); 
    var oldImage = $('#photo img'); 
    $('#photo').prepend($('<img src=" ' + elem.attr('src') + ' ">').hide().fadeIn(1000)); 
    oldImage.fadeOut(1000,function(){ 
     $(this).remove(); 
     $("#caption").html(elem.attr('alt')); // set the caption 
    }); 
}); 

$('#gallery img:first').trigger('click'); 

和HTML

<div id="main">   <!-- Main Content --> 

<div id="photo"> 
    <div style="text-align:center" id="caption"></div> 
</div> 

<div id="gallery"> 
    <img src="images/home1_h.jpg" alt="home 1"> 
    <img src="images/home2_h.jpg" alt="home 2"> 
    <img src="images/home3_h.jpg" alt="home 3"> 
    <img src="images/home4_h.jpg" alt="home 4"> 
    <img src="images/home5_h.jpg" alt="home 5"> 
    <img src="images/home6_h.jpg" alt="home 6"> 
</div> 

</div> 

和一点CSS的

#gallery img { 
    opacity: 0.8; 
    cursor: pointer; 
} 
#gallery img:hover { 
    opacity: 1 
}