Étiquette : Fancybox

[jQuery] Accéder à un élément contenu dans une iframe depuis la page parente avec la méthode contents()

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.

[jQuery] Cibler une popin fancybox en fonction du support (smartphone, tablette, desktop …) et lui passer des arguments différents

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 :

Then you can declare different API options of each fancybox in separated variables like :

…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

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

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 :

Simulation jsfiddle.net

[jQuery][CSS][Fancybox] Le wrapper de Fancybox ne s’adapte pas correctement aux dimensions d’une image

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…

fancybox-bug_image

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;
}