Lightbox est une bibliothèque JavaScript open-source gratuit que vous pouvez utiliser pour présenter une galerie d'images sur votre page Web d'une manière visuellement attrayante . Quand un utilisateur clique sur l'une de vos images miniatures , Lightbox se fanent le fond de page et agrandir l' image pour remplir la fenêtre du navigateur . Le créateur de la Visionneuse a permis d' ajouter cette fonctionnalité à votre site avec seulement quelques modifications mineures à votre code HTML. Choses que vous devez navigateur Web page HTML (s) Images Afficher plus Instructions 1
Ouvrez votre navigateur Web et accédez à la Lightbox page d'accueil (voir Ressources) . Télécharger la dernière version de la bibliothèque. 2
Extraire le fichier ZIP que vous avez téléchargé . Il contient un fichier HTML de l'échantillon et trois dossiers: " css ", qui contient des feuilles de style utilisées par Lightbox , " images ", qui contient des images utilisées par la bibliothèque , et "js ", qui contient le code source de la visionneuse ainsi que le prototype et Scriptaculous bibliothèques qui sont requis par la Visionneuse . 3
Copier les "CSS ", " images " et " dossiers js " à un endroit qui est accessible à partir de votre page web. Les étapes restantes vais supposer que vous avez placé dans le même répertoire que le fichier HTML , si vous les mettez dans un autre emplacement, vous devrez ajuster les chemins dans ces mesures en conséquence 4
. Ouvrez le fichier HTML qui utilisera Lightbox dans votre éditeur de texte préféré . 5
Si vous n'êtes pas déjà en utilisant le prototype et les bibliothèques Scriptaculous sur votre page Web , ajoutez les deux lignes suivantes dans le "
, " section du fichier HTML:
< script type =" text /javascript " src = " js /scriptaculous.js ? load = effets , constructeur "> Photos
Vous pouvez sauter cette étape si vous utilisez déjà Prototype et Scriptaculous . 6 < p> Ajoutez les deux lignes suivantes dans la section "
" après les lignes qui Prototype de charge et Scriptaculous :
< script type = " text /javascript" src = " js /lightbox.js " > 7
