Le bloc-notes professionnel d'un développeur front-end senior
Attention : ne fonctionne pas si le contenu chargé dans l'iframe provient d’un domaine différent de celui de la page parente. Fonctionne notamment si vous cherchez à accéder à du contenu affiché dans une popin (plug-in jQuery Fancybox), une modal (boite de dialogue)…
Source : How to Access Elements in FancyBox iframe, mais voir aussi Access child iFrame DOM from parent page.
|
1 |
$('#fancybox-content iframe').contents().find('.selector'); |
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 :
|
1 2 |
<a class="fancybox i300"...>..</a> <a class="fancybox i420"...>...</a> |
Then you can declare different API options of each fancybox in separated variables like :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 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
|
1 2 3 4 5 6 |
.iphone_300 { background: rgba(58, 42, 45, 0.8) } .iphone_420 { background: rgba(0, 0, 0, 0.2) } |
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 :
|
1 |
$(".fancybox-overlay").removeClass("iphone_300").removeClass("iphone_420"); |
Nature du bug : Les dimensions du wrapper d’une pop-in Fancybox sont supposées s’adapter automatiquement aux dimensions de l’image que cette pop-in contient. Cependant, l’image est plus grande que la pop-in…
Résolution du bug : Le problème peut venir d’une déclaration CSS Reset qui entrerait en conflit avec les styles propres au plug-in Fancybox. Cette déclaration fixerait la propriété box-sizing des DIVs à border-box.
La solution consiste à surcharger les styles de Fancybox en fixant la propriété box-sizing des DIVs wrap, outer et inner à content-box.
/*----------*/
/* fancybox */
/*----------*/
#fancybox-wrap,
#fancybox-outer,
#fancybox-inner {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}