jQuery Girl
  1. jQuery Girl
  3. FancyBox 2 Background Issue
Intereting Posts
Formulaire API Web Collecte de données comment configurer ce cookie pour qu’il n’expire jamais Select2 charge les données avec Ajax depuis un fichier jquery – vérifie la longueur du champ de saisie? Validation côté client non obstructive pour les champs d’entrée ajoutés dynamicment Ouverture et fermeture en fondu d’un modal Bootstrap 3 jQuery slideToggle saute Comment appeler une fonction Java intégrée dans une page Web Comment puis-je arrêter cette animation de télétype après sa première itération? Barre latérale collante qui ne colle que lorsque le bas de la barre latérale est au bas de la fenêtre Comment vérifier si l’image est visible ou non? Uncaught SyntaxError: Impossible d’exécuter ‘querySelector’ sur ‘Document’ Génération d’éléments de liste cliquables dynamics Quel est le moyen le plus efficace de vider un élément avec jQuery jQuery: Obtenir les valeurs de titre et href sous forme de variables

FancyBox 2 Background Issue

J’essaie d’utiliser fancybox ( http://fancyapps.com/fancybox/ ) pour afficher automatiquement une image sur ma page, mais la partie arrière-plan (grisée) ne fonctionne pas. Des idées?

Voir l’exemple sur http://www.southshoreopera.org

Le problème est que si vous ouvrez fancybox par programme AVANT que le DOM soit prêt, la superposition n’est pas ajoutée à l’élément body .

Ce :

… déclenchera fancybox au chargement de la page SANS superposition (un click manuel click le lien ne reproduira pas le problème par la suite)

Vous devez au moins .sortinggger() méthode .sortinggger() dans la méthode .ready() comme:

Vous pouvez laisser la fancybox init en dehors de la méthode .ready() SI vous l’initialisez au bas de la page, sinon vous devriez également le déplacer.

Avez-vous téléchargé et placé correctement le fichier fancybox_overlay.png?

L’arrière-plan est créé à l’aide d’une image. Par conséquent, si le fichier .png n’est pas au bon chemin appelé, il n’apparaîtra pas. Je crois qu’il doit être dans le même dossier que le fichier .css.

MODIFIER:

En regardant de plus près le fichier CSS, vous trouvez ceci: 

 .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('fancybox_overlay.png'); }

Vous pouvez placer le fichier overlay.png dans le dossier CSS ou modifier le chemin de l’URL de manière à ce qu’il trouve l’image. J’espère que cela t’aides.