Javascript 同时交换图像和字幕
我有一个图像库,我正在努力使到目前为止,因为它工作良好。我的问题是,无论我如何尝试,当我使用javascript交换图像时,我都无法让每个图像都有自己的标题。现在,在任何人因为这个问题对我感到不安之前,我已经在这里看到了一些人是如何使用html添加标题的,但是当我交换图片时,这是行不通的。我想可能会创建一个空div,并使用javascript插入html文本,但是如何才能让要加载的标题与相应的pic相匹配呢?数组是这里唯一的选项吗?这是我的问题页面 我将“photo”div留空,以便图像可以加载到其中。到目前为止一切正常。只是对字幕感到困惑 下面是javascript代码Javascript 同时交换图像和字幕,javascript,jquery,image,caption,Javascript,Jquery,Image,Caption,我有一个图像库,我正在努力使到目前为止,因为它工作良好。我的问题是,无论我如何尝试,当我使用javascript交换图像时,我都无法让每个图像都有自己的标题。现在,在任何人因为这个问题对我感到不安之前,我已经在这里看到了一些人是如何使用html添加标题的,但是当我交换图片时,这是行不通的。我想可能会创建一个空div,并使用javascript插入html文本,但是如何才能让要加载的标题与相应的pic相匹配呢?数组是这里唯一的选项吗?这是我的问题页面 我将“photo”div留空,以便图像可以加
$('#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();
$(“#画廊img”)。每个(功能(i){
var imgFile=$(this.attr('src');
var preload Image=新图像();
var imgExt=/(\。\w{3,4}$)/;
preload image.src=imgFile.replace(imgExt,“u h$1”);
$(此)。悬停(
函数(){
$(this.attr('src',preload-image.src);
},
函数(){
var currentSource=$(this.attr('src');
$(this.attr('src',imgFile);
});//结束悬停
}); // 结束每一个
$(“#图库a”)。单击(函数(evt){
evt.preventDefault();
var imgPath=$(this.attr('href');
var oldImage=$(“#照片img”);
var newImage=$('');
newImage.hide();
$(“#照片”).prepend(新图像);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,函数(){
$(this.remove();
});
});
$(“#图库a:第一”)。单击();
还有我的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>
我会这样做
$('#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');
我建议你制作一个提琴,这样人们可以更好地帮助你。你在说什么标题?我还没有,但我想在“照片”分区中的相应图像中添加一个标题,当我单击缩略图时加载。我只是想弄清楚我将使用的技术或格式。我在想,也许我可以在javascript中设置一个数组,让每个标题都成为一个使用$加载的数组(这个)?我只是想一定有更好的方法…不要改变标题来匹配图片,虽然这样你就不能有6个不同的标题了。它获取图像的
alt
属性中的任何内容,并将其用作图像标题
<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>
#gallery img {
opacity: 0.8;
cursor: pointer;
}
#gallery img:hover {
opacity: 1
}