0

如何使用fancybox对多个图像进行分组而没有任何重复？我试过使用 rel="group" 虽然这要么显示最近图像的列表。

我有以下 HTML：

<ul>    
    <li>        
        <a rel="group1" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">            <img alt="" src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg">        </a>        
        <h2><a rel="group1" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">Test title about image</a></h2>    
    </li>    
    <li>        
        <a rel="group2" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">            
            <img alt="" src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg">        
        </a>        
        <h2><a rel="group2" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">Test title about image</a></h2>    
    </li>    
    <li>        
        <a rel="group3" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">            
            <img alt="" src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg">        
        </a>        
        <h2><a rel="group3" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">Test title about image</a></h2>    
    </li>    
    <li>        
        <a rel="group4" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">            
            <img alt="" src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg">        
        </a>        
        <h2><a rel="group4" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">Test title about image</a></h2>    
    </li>
</ul>
4

2 回答 2

4

您可以触发“花式”链接的点击事件，如下所示 - http://jsfiddle.net/K44HR/

（如果需要，调整 jQuery 选择器）

于 2012-07-03T12:11:59.787 回答
0

现在不是那么容易：

<li>        
        <a rel="group1" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">            
            <img alt="" src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg">        
        </a>        
        <h2><a rel="group2" class="fancy" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">Test title about image</a></h2>    
    </li>
于 2012-07-03T13:12:49.093 回答