Handpuzzles.com


Comment régler la taille maximale en Lightbox

Comment régler la taille maximale en Lightbox

Lightbox est un terme général désignant une fenêtre "modal" qui se superpose à une page Web quand une image est cliqué, affichant une version agrandie de l'image. Le script jQuery origine, maintenant appelé «Lightbox 2," a servi de base pour de nombreux autres scripts qui ont depuis été libérés, comme prettyPhoto, Litebox et Slimbox. Chaque script est écrit avec ses propres styles et les variables uniques et peut avoir différentes méthodes pour contrôler la taille maximale des images. PrettyPhoto, par exemple, vous permet de définir une hauteur par défaut et la largeur dans le script de configuration inséré dans la tête de votre document HTML. Avec Lightbox2, modifications doivent être apportées au script pour permettre une image pour se adapter à la taille de l'écran du spectateur.

Instructions


•  Téléchargez la dernière version du script de la visionneuse de la page officielle de Lightbox2. Extraire le dossier de script, et ouvrez-le pour localiser le "lightbox.js" fichier. Ouvrez le fichier dans un éditeur de texte ou HTML.

•  Recherchez les lignes de code suivantes autour de la ligne 262 du fichier de script: this.lightboxImage.width = imgPreloader.width; this.lightboxImage.height = imgPreloader.height; Placez votre curseur au début de chaque ligne et tapez deux barres obliques pour désactiver le code: //this.lightboxImage.width = imgPreloader.width; //this.lightboxImage.height = imgPreloader.height;

•  Entrez une nouvelle ligne ci-dessous les deux lignes que vous avez désactivé. Copiez et collez le code suivant à la nouvelle ligne: if (imgPreloader.width> 850) imgPreloader.width = 800; if (imgPreloader.height> 620) imgPreloader.height = 600; Par défaut, cette mise à jour le code fixera la largeur et la hauteur maximum de 800 pixels de large par 600 pixels de haut. Pour ajuster les valeurs à vos dimensions souhaitées, ajouter 50 à la largeur désirée et modifier la première valeur numérique. Modifier la deuxième valeur de la largeur exacte. Modifier les troisième et quatrième valeurs avec la valeur de votre hauteur désirée, ajouter 20 à la troisième valeur. Les pixels supplémentaires permettent un rembourrage du récipient de la visionneuse.

•  Enregistrez le fichier de script et ouvrez le fichier "lightbox.css" situé dans le dossier "css". Ajouter un "max-height" et la déclaration "max-width" pour le sélecteur "#lightbox img" et définir les valeurs à votre hauteur et la largeur choisie. Par exemple: #lightbox img {width: auto; height: auto; max-width: 800px; max-height: 600px;}

•  Enregistrez le fichier et accéder à votre serveur Web. Renommez les "lightbox.js" existants "et lightbox.css" des fichiers sur votre serveur un fail-safe dans le cas où quelque chose se passe mal avec vos fichiers modifiés. Téléchargez vos fichiers modifiés, puis effacez le cache de votre navigateur. Testez vos modifications en cliquant sur une image de Lightbox-permis et continuer à modifier les styles comme vous le souhaitez.




        

Publish my comment