这是一个在每个图像上插入标题的脚本。但是在这里,脚本只为第一张,第二张和最后一张图片插入标题,而不是全部。
以下是一些屏幕截图http://postimg.org/gallery/2tm4oxfcq/7e60df9f/。 这是控制台:http://postimg.org/image/xiyve517n/
//if an element exist do something
$.fn.onAvailable = function(fn) {
var sel = this.selector;
var timer;
if (this.length > 0) {
fn.call(this);
}
else {
timer = setInterval(function() {
if ($(sel).length > 0) {
fn.call($(sel));
clearInterval(timer);
}
}, 0);
}
};
$('.rhs-banner #supersized li a').onAvailable(function() {
var imgalt = [];
var imgaltdefine = [];
var supersized_li = [];
$('.gallery-admin-content div.photoGalleryElement div.thumbnail').each(function(i, v) {
v = $(v);
imgalt.push({
title: $(".thumbContents a", v).attr("title").split(/\s+/).join(" ")
});
});
if ($('body div.photoGalleryElement div.thumbnail a').attr('title')) {
$('.rhs-banner #supersized li').each(function(i, v) {
v = $(v);
imgaltdefine.push({
li : $("a",v),
li_holder : $(v),
li_holder_html : $(v).html()
});
if (imgalt[i].title.trim().length) {
console.log(imgaltdefine[i].li, imgalt[i].title);
$(imgaltdefine[i].li).prepend('<div class="img_caption">' + imgalt[i].title + '</div>');
}
});
} else {
console.log('No Description for slider images');
}
});
&#13;
<ul id="supersized" style="visibility: visible; display: block;">
<li class="slide-0" style="left: -1600px; visibility: visible;">
<a target="_blank">
<div class="img_caption">Communication</div>
<img src="/Mainfolder/Home-Banner/DSC_0641.jpg" style="width: 1600px; left: 0px; top: -73px; height: 704px;">
</a>
</li>
<li class="slide-1" style="visibility: visible; left: -1600px;">
<a target="_blank">
<div class="img_caption">Two Words</div>
<img src="/Mainfolder/Gallery/DSC_0048.jpg" style="width: 1600px; left: 0px; top: -273px; height: 1104px;">
</a>
</li>
<li class="slide-2 prevslide" style="visibility: visible; left: -1600px;">
<a target="_blank">
<img src="/Mainfolder/Gallery/DSC_0042.jpg" style="width: 1600px; height: 1104px; left: 0px; top: -273px;">
</a>
</li>
<li class="slide-3 activeslide" style="visibility: visible; left: 0px;">
<a target="_blank">
<img src="/Mainfolder/Gallery/DSC_0061.jpg" style="width: 1600px; height: 1104px; left: 0px; top: -273px;">
</a>
</li>
<li class="slide-4" style="visibility: visible; left: -1600px;">
<a target="_blank">
<div class="img_caption">123456789012345</div>
<img src="/Mainfolder/Gallery/DSC_0131.jpg" style="width: 1600px; height: 1104px; left: 0px; top: -273px;">
</a>
</li>
</ul>
&#13;