Attention : astuce valable pour Fancybox à partir de sa version: 2.1.5 (Fri, 14 Jun 2013).
Source : Need to add a surrounding div to fancybox or add a class to body when clicked
You can bind all your fancyboxes to the same selector so you won’t need to have a different script for each fancybox. You can add an extra class to your links to separate each fancybox like :
|
<a class="fancybox i300"...>..</a> <a class="fancybox i420"...>...</a> |
Then you can declare different API options of each fancybox in separated variables like :
|
// settings for fancybox 300 var f300 = { maxWidth: 320, maxHeight: 569, minWidth: 300 }; // settings for fancybox 420 var f420 = { maxWidth: 480, maxHeight: 600, minWidth: 420 }; |
…and use a single script with the common shared options AND using the afterLoad callback to apply each individual setting, depending on the class as well as adding the corresponding class to the fancybox overlay like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
$(".fancybox").fancybox({ // common API options fitToView: false, width: '90%', height: '90%', autoSize: false, closeClick: false, openEffect: 'none', closeEffect: 'none', padding: 0, afterLoad: function () { if ($(this.element).hasClass("i300")) { $.extend(this, f300); $(".fancybox-overlay").addClass("iphone_300"); } else if ($(this.element).hasClass("i420")) { $.extend(this, f420); $(".fancybox-overlay").addClass("iphone_420"); } } }); |
Notice we are adding classes either iphone_300
or iphone_420
to the fancybox overlay, which may have different styles within your own css stylesheet like
|
.iphone_300 { background: rgba(58, 42, 45, 0.8) } .iphone_420 { background: rgba(0, 0, 0, 0.2) } |
Simulation jsfiddle.net
when i put these in a rel=gallery
, that when i click next it doesnt remove the previous addclass
Just add this as first line inside the afterLoad
callback :
|
$(".fancybox-overlay").removeClass("iphone_300").removeClass("iphone_420"); |
Simulation jsfiddle.net