Problème d'utilisation du script Lightbox !

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Thoomas, 14 Février 2010.

  1. Thoomas
    Thoomas Nouveau WRInaute
    Inscrit:
    14 Février 2010
    Messages:
    20
    J'aime reçus:
    0
    Bonjour à tous,

    Je n'arrive pas à faire fonctionner le script lightbox disponible ICI

    J'ai pourtant suivi le cheminement et mis dans mon header les 3 fichiers scripts :

    Code:
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
    Et ensuite le fichier CSS relatif au script :

    Code:
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    Enfin, pour chaque image que j'utilise, j'ajoute la balise rel="lightbox" comme ci après :
    Code:
    <img src="masource" rel="lightbox" />
    Je ne vois pas où est le problème et j'ai donc besoin de votre aide :) !

    Merci d'avance,
    Thomas.
     
  2. malvina14
    malvina14 WRInaute discret
    Inscrit:
    5 Janvier 2007
    Messages:
    210
    J'aime reçus:
    0
    Bonjour,

    Difficile de répondre sans avoir une url pour voir le problème, donc sans url je vous conseille de vérifier que vos liens js et css soient bon, ensuite :
    Code:
    <a href="imagelightbox.jpg" rel="lightbox"><img src="imagebase.jpg"  alt="" /></a>
    
    
    je ne vois pas le lien dans votre code car le rel="lightbox" se met sur le lien et non sur l'image.
     
  3. Thoomas
    Thoomas Nouveau WRInaute
    Inscrit:
    14 Février 2010
    Messages:
    20
    J'aime reçus:
    0
    Bonjour Malvina14,

    Pour les liens, oui désolé mais je travaille actuellement en local !

    Et sinon, vous venez de résoudre mon problème, je n'avais pas tilté qu'il fallait mettre le rel="lightbox" dans le lien et pas comme attribut de l'image.

    Merci beaucoup, mais j'ai une autre question à poser.

    J'utilise les attributs max-height et max-width pour mes images, cependant quand j'ouvre l'image en mode "lightbox", l'image ne prend pas sa taille réelle et reste bloquée aux dimensions max-height et max-width... (je ne sais pas si c'est très clair)

    Y aurait-il une possibilité pour résoudre ceci et avoir la taille 100% quand le lightbox est activé ?

    Merci,
    Thomas.
     
  4. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 003
    J'aime reçus:
    128
    Je ne suis pas sûr de comprendre le problème, mais le plus simple est d'utiliser deux images différentes :

    1. Une pour la vignette, sur laquelle se trouve le lien pour ouvrir le mode lightbox
    2. L'image qui s'ouvre en lightbox, plus grande et dans une meilleure résolution

    Niveau rendu visuel c'est beaucoup plus intéressant de procéder comme ça, car redimensionner en HTML une image (ce que je crois comprendre que tu fais au vu de ton dernier post) donne une qualité pas toujours top.
     
  5. malvina14
    malvina14 WRInaute discret
    Inscrit:
    5 Janvier 2007
    Messages:
    210
    J'aime reçus:
    0
    Non je ne crois pas avoir tout compris, mais pourquoi ne pas enlever max-height et max-width, les images seront alors en taille réelle. et de mettre la dimension voulue pour la petite image avec width et height.
     
  6. Thoomas
    Thoomas Nouveau WRInaute
    Inscrit:
    14 Février 2010
    Messages:
    20
    J'aime reçus:
    0
    En fait, j'ai mis aux images une taille maximale (largeur & hauteur) en CSS avant d'éviter de devoir redimensionner chaque image trop grande, et si l'image est plus petite que les tailles données dans le CSS elle n'est pas redimensionnée.

    UsagiYojimbo : L'idée peut être utile pour un site de photos ou de la sorte... mes images sont en fait QUE des screenshoot d'écran. Et ça m'embête car ton idée doublerait le nombre d'images... déjà qu'il y en a pas mal ;) !

    Je vais prendre la solution de malvina14 je pense, sauf si une personne a une meilleure solution.
    Merci à vous deux.
     
Chargement...
Similar Threads - Problème utilisation script Forum Date
Script de backup - Problème à l'utilisation SSH Administration d'un site Web 3 Juillet 2008
Problème utilisation hreflang Référencement international (langues, pays) 7 Juillet 2014
Problème sur utilisation d'une tache cron via PHP Développement d'un site Web ou d'une appli mobile 14 Août 2013
Problème Référencement suite à utilisation de la balise Canonical Crawl et indexation Google, sitemaps 5 Juillet 2013
problème utilisation feedparser Développement d'un site Web ou d'une appli mobile 3 Janvier 2010
Google Sitemap Generator : Problèmes d'utilisation Administration d'un site Web 14 Février 2009
Probleme d'utilisation de Magpierss Développement d'un site Web ou d'une appli mobile 9 Avril 2008
Problème de référencement suite à l'utilisation de GnoZtiK Problèmes de référencement spécifiques à vos sites 28 Juin 2007
Utilisation Joomla : probleme referencement Problèmes de référencement spécifiques à vos sites 20 Juillet 2006
WordPress Problème affichage style avec Elementor (titre, bordures, separateur) Administration d'un site Web Lundi à 12:12
Problème d'indexation de backlinks Débuter en référencement 24 Juillet 2022
Problème d'indexation de backlinks Problèmes de référencement spécifiques à vos sites 21 Juillet 2022
Probleme de visibilité de ma page Facebook Facebook 5 Juillet 2022
problème avec le développeur Droit du web (juridique, fiscalité...) 22 Juin 2022
Problème désindexation des pages de Google Débuter en référencement 21 Juin 2022
Problème d'indexation de pages sur Google Problèmes de référencement spécifiques à vos sites 31 Mai 2022
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio AdWords 26 Avril 2022
Problème de vitesse d'affichage des pages sur Analytics Google Analytics 26 Avril 2022