所有图像的滑块标题

时间:2016-03-26 09:37:43

标签: javascript caption

这是一个在每个图像上插入标题的脚本。但是在这里,脚本只为第一张,第二张和最后一张图片插入标题,而不是全部。

以下是一些屏幕截图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;
&#13;
&#13;

0 个答案:

没有答案