Les partenaires publicitaires:

Comment supprimer un titre sur une image sur Lightbox

Une variété de plugins jQuery lightbox existent qui vous permettent d'afficher des images et des galeries dans une fenêtre de style qui se superpose à votre site Web. Selon la façon dont la visionneuse a été programmé, il peut inclure des fonctionnalités telles que des flèches, des descriptions ou des titres de navigation. Cachant une quelconque de ces options est également dépendant du plugin lightbox et comment il a été conçu. Dans le cas du plugin jQuery lightBox original, cachant le titre de l'image ou la légende peut être fait à travers la feuille de style CSS ou par la modification du fichier javascript.

Modifier le titre L'utilisation de CSS

  1. Ouvrez la feuille de style CSS qui a été fourni avec votre plugin visionneuse. Pour jQuery Lightbox, vous ouvrez le "jquery.lightbox.css" fichier situé dans le "css" dossier.

  2. Situer le sélecteur se rapportant à votre titre de la visionneuse ou le conteneur de la légende. Si vous n'êtes pas sûr de sélecteur pour choisir, utiliser Opera ou Firebug pour Firefox et cliquez-droit sur le texte que vous voulez cacher.

  3. Choisir "Inspecter l'élément" pour voir l'extrait de code lié à la zone de texte, et prendre note de l'ID ou classe attribuée à la durée ou div. Par exemple, jQuery utilise lightBox "# lightbox-image-de détails" et "# lightbox-image-détails-légende." Copiez ces styles en CSS principale feuille de style de votre site Web.

  4. Ajouter une ligne pour chaque classe avec un "display: none" régner. Ceci aura pour effet masquer l'élément dans la plupart des cas. Depuis astuces CSS sont imprévisibles dans tous les navigateurs, les résultats peuvent varier. Si cacher l'élément ne fonctionne pas, ajouter une ligne à chaque classe avec un négatif "text-indent" valeur. Cette astuce CSS va pousser tout texte dans l'élément loin à l'extérieur des frontières de l'élément. Assurez-vous que chaque changement que vous faites est annexé avec "! Important" de dire au navigateur d'utiliser votre déclaration de style à la place de la valeur par défaut du script. Par example:

    lightbox-conteneur de données d'image # lightbox-image-de détails {
    largeur: 70% -

    float: gauche

    text-align: gauche

    affichage: aucune important-

    text-indent: -9999px important-




    }

  5. Changer la couleur de fond ou un attribut de fond de la classe à "aucun" si votre titre de l'image ou de la description conteneur est la superposition de vos images. Par example:

    lightbox-conteneur-image-données-box {
    police: 10px Verdana, Helvetica, sans-serif-

    background-color: aucune important-

    margin: 0 auto

    line-height: 1.4em-

    overflow: auto-

    largeur: 100% -

    padding: 10px 0- 0

    }

Conseils & Avertissements

  • Remplacer titres sur vos images avec "alt" texte à la place. Ceci est considéré comme une meilleure pratique que d'utiliser les hacks CSS ou modifier votre fichier javascript et est moins susceptible de causer des effets visuels étranges dans les navigateurs plus anciens. Gardez toujours une copie de sauvegarde de votre feuille de style original au cas où vous faites un changement, vous ne pouvez pas inverser. Certains scripts lightbox contiennent une "titleShow" attribuer dans le script d'initialisation, ou le fichier principal javascript qui peut simplement être modifié pour "fausse." Ce ne sont pas présents dans tous les scripts cependant, et sera écrasé si vous mettez à jour le script, créant ainsi des styles personnalisés est souvent plus infaillible.
» » » » Comment supprimer un titre sur une image sur Lightbox