0

I have this image slider that was build using bxslider which is supposed to show captions when the mouse hovers over the image. The code works just fine for images that I put in but there is a list of clones generated in the slider for which the captions don't work. I'm not sure how to get them working. 

           $('.thisOne',this).hover(function() {        
    var title = $(this).attr('title');   
    if (title != undefined && ('' + title).length) {    
        $(this.parentNode).append('<div class="bx-caption"><span>' + title + '</span></div>');                       
    }               
    });

The broswer generates a copy of the images with a class 'bx-clone' out the list and appends them the list of images such as the one below. 

        <ul class="bxslider1">
          <li><img class="thisOne" img src="images/pic1.jpg" title="Lorem ipsum dsafkjhsdaflkhdsafkj"/></li>
          <li><img class="thisOne" src="images/pic2.jpg"     title="Lorem ipsum dsafkjhsdaflkhdsafkj" /></li>
          <li><img class="thisOne" src="images/pic3.jpg"     title="Lorem ipsum dsafkjhsdaflkhdsafkj" /></li>
          <li><img class="thisOne" src="images/pic4.jpg"     title="Lorem ipsum dslfakjds;lafkjds;lafkjg;oljdfgopi ds ogijugjdfoi" /></li>
          <li><img class="thisOne" src="images/pic5.jpg"     title="Lorem ipsum dslfakjds;lafkjds;lafkjg;oljdfgopi ds ogijugjdfoi" /></li>
          <li><img class="thisOne" src="images/pic7.jpg"     title="Lorem ipsum dslfakjds;lafkjds;lafkjg;oljdfgopi ds ogijugjdfoi" /></li>
        </ul>

I don't know how to get the cpations to show up on top of the duplicate images. If it helps I wrapped my function inside the $(document).ready(); I'm sorry but I don't have a better way of explaining the code.

4

1 回答 1

0

这是您的解决方案

我所做的是，使用了一个名为slide的自定义属性，并为不同的图像分配了唯一的幻灯片编号。并且在悬停时尝试找到具有相同属性的克隆对象。

此外，您的代码会在每次悬停时不断附加标题。这不是最佳的，所以添加了一个检查是否已经添加了标题。

   $('img').hover(function() {        
   var title = $(this).attr('title');   
   var slideNo = this.getAttribute('slide');
   if (title != undefined && ('' + title).length) {    
     var captionAdded = $(this.parentNode).find('.bx-caption');
     if(captionAdded.length == 0){
        var imgObjs = $(this).parents('ul').find('img[slide='+slideNo + ']');
        for(var i=0; i<imgObjs.length; i++){
          $(imgObjs[i].parentNode).append('<div class="bx-caption"><span>' + title + '</span></div>');    
        }
     }
  }               
  });
于 2013-10-29T13:25:17.233 回答