Javascript Lightbox Tutorial

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

Ajouter l'effet de la visionneuse de tous les liens d' image en ajoutant l'attribut rel = "lightbox" de la balise " " du lien , et de fournir un titre optionnel qui sera affiché dans la fenêtre pop-up . Par exemple, si vous avez un lien de la forme suivante :

Re - écrire le lien comme suit :

< /a>