2013-06-03 84 views
2

我開始一個畫廊與多個預覽圖片(鏈接)。第一個在畫廊開始,下一個到同一個畫廊的特定照片,但是如果您願意,您可以點擊整個畫廊。把它看作是一個設置書籤,可以將你帶到一個更大的圖像庫的不同點。從多個預覽圖片開始一個畫廊,與Fancybox2

我已經複製瞭如何現在爲我工作,雖然它是多餘的,不是很有效。我只是假裝它,以便整個事情循環。我很欣賞任何建議。

這裏是鏈接:

<a class="open_fancybox" href=""><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a> 
<a class="open_fancybox2" href=""><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a> 

這裏是多餘的Javascript(顯示爲第二鏈路以不同的順序圖像):

$(".open_fancybox").click(function() { 

$.fancybox.open([ 
    { 
     href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',     
     title : '1st title' 
    }, 
    { 
     href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',     
     title : '2nd title' 
    }, 
    { 
     href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',     
     title : '3rd title' 
    }, 
    { 
     href : 'http://fancyapps.com/fancybox/demo/4_b.jpg',     
     title : '3rd title' 
    } 
], { 
    padding : 0 
}); 

return false; 

}); 


$(".open_fancybox2").click(function() { 

$.fancybox.open([ 
    { 
     href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',     
     title : '1st title' 
    }, 
    { 
     href : 'http://fancyapps.com/fancybox/demo/4_b.jpg',     
     title : '2nd title' 
    }, 
    { 
     href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',     
     title : '3rd title' 
    }, 
    { 
     href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',     
     title : '3rd title' 
    } 
], { 
    padding : 0 
}); 

return false; 

}); 

,你可以在這裏看到:

http://jsfiddle.net/uZCC6/2687/

回答

0

您可以只使用一個腳本,一個爲您的所有鏈接。然後,您可以爲任何鏈接添加(HTML5)data-index屬性,以設置它應從哪個圖片開始。

舉例來說,如果你希望第二個鏈接,開始從圖像畫廊,你可以這樣做:

<a class="open_fancybox" href=""><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a> 

<a class="open_fancybox" data-index="3" href=""><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a> 

然後在你的腳本,發現如果鏈接的data-index屬性和設置的fancybox index因此,否則從第一個元素開始的畫廊,所以:

$(".open_fancybox").click(function() { 
    // detect if data-index exists otherwise index = 0 (first image) 
    var theIndex = $(this).data("index") ? $(this).data("index") - 1 : 0; 

    $.fancybox.open([{ 
     href: 'http://fancyapps.com/fancybox/demo/1_b.jpg', 
     title: '1st title' 
    }, { 
     href: 'http://fancyapps.com/fancybox/demo/2_b.jpg', 
     title: '2nd title' 
    }, { 
     href: 'http://fancyapps.com/fancybox/demo/3_b.jpg', 
     title: '3rd title' 
    }, { 
     href: 'http://fancyapps.com/fancybox/demo/4_b.jpg', 
     title: '4th title' 
    }], { 
     padding: 0, 
     index: theIndex // set what index should the gallery start from 
    }); 
    return false; 
}); 

記住在javascr IPT的index數量總是0開始,這就是爲什麼我們做$(this).data("index") - 1

見分叉JSFIDDLE

+1

數據索引的伎倆。實施和測試 - 完美無缺!謝謝你,肯尼迪!我非常感謝你的支持。 – revelyn99

+0

@ revelyn99:沒問題 – JFK