如何排除特定的图像从JavaScript Photobox动画在一个div



我使用photobox在一个漂亮的画廊风格的div内显示所有图像。但是,我想在div中包含一个图像,我不想在画廊中,一个PDF图标,点击将下载PDF文件。此刻,这个图标出现在画廊点击时,我想知道如何排除也许div的一部分。

我的代码

 <div id="gallery">
           <td width="226" align="right"><table width="206" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="199" align="center"><a href="images/GrndFloor_dimension.jpg" target="_blank"><img src="images/GrndFloor_dimension_th.jpg" alt="Ground Floor" width="182" height="182" border="0"/></a></td>
      </tr>
      <tr>
        <td height="64" align="center" background="images/thumbs-text-holder.jpg" class="planscopy" style="background-repeat:no-repeat"><table width="151" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="104"><span class="planscopy" style="background-repeat:no-repeat">Ground Floor - Dimensions</span></td>
           <td width="47" align="right"><a href="docs/Ground Floor Plan - Dimensions.pdf" target="_blank"><img src="images/pdf.png" width="48" height="51"/></a></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
      </div>
      <script type="text/javascript">
     $('#gallery').photobox('a', { thumbs: true }, imageLoaded);
    function imageLoaded() {
        console.log('image has been loaded...');
    }

我想pdf.png图像不出现在画廊,只是作为一个链接到文档。是否有办法排除div内的div id ?

尝试给a元素(PDF)一个类似"exclude"的类,并尝试这个JS-Code:

<td width="47" align="right"><a class="exclude" href="docs/Ground Floor Plan - Dimensions.pdf" target="_blank"><img src="images/pdf.png" width="48" height="51"/></a></td>
<script type="text/javascript">
    $('#gallery').photobox('a:not(.exclude)', { thumbs: true }, imageLoaded);
        function imageLoaded() {
        console.log('image has been loaded...');
    }
</script>
$("#gallery").photobox("a:not(:has([src$='pdf.png']))', { thumbs: true }, imageLoaded);

。(选择器的演示:http://jsfiddle.net/pUkz2/)


注意,如果将类pdf添加到a并使用

,则上述选择器的速度要慢一些。
$("#gallery").photobox("a:not(.pdf)', { thumbs: true }, imageLoaded);

我做了一个性能测试:http://jsperf.com/pukz2

最新更新