Plugin jQuery Lightbox : adapter l’affichage à la zone client
Jusqu’à aujourd’hui, j’utilisais le très bon Lightbox 2 de Lokesh Dhakar. Mais, j’ai appris l’existence de jQuery Lightbox plugin qui fait rigoureusement la même chose mais qui a l’avantage d’être beaucoup plus léger et un peu plus paramétrable.
Seul point noir (commun à ces deux scripts) : ils affichent les images dans leurs dimensions réelles. Hors, j’ai besoin que mes images soient adaptées à la zone cliente de mon navigateur.
Qu’à cela ne tienne, une petite modification et le tour est joué !
Avant-propos : cette modification concerne la version 0.5 du plugin. Elle peut sûrement être appliquée aux versions précédentes mais je ne l’ai pas testée !
Si vous avez décidé d’utiliser jQuery Lightbox Plugin et que vous avez vous aussi besoin que vos images soient adaptées à l’écran je vous invite à modifier le fichier jquery-lightbox-0.5.js. Attention : vous ne pourrez pas faire les modifications sur les fichier suffixés .min.js et .pack.js, ou alors vous aimez le sport…
La marche à suivre est on ne peut plus simple. La modification doit être ajoutée dans le code de la fonction _set_image_to_view() (aux alentours de la ligne 177) et cette fonction doit ressembler après modification à ça (le hack se trouve entre les commentaires // MOD) :
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 | /** * Prepares image exibition; doing a image´s preloader to calculate it´s size * */ function _set_image_to_view() { // show the loading // Show the loading $('#lightbox-loading').show(); if ( settings.fixedNavigation ) { $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide(); } else { // Hide some elements $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide(); } // Image preload process var objImagePreloader = new Image(); objImagePreloader.onload = function() { $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]); // MOD : adapter la taille à la zone cliente var fImgRatio = objImagePreloader.width / objImagePreloader.height; var arrPageSizes = ___getPageSize(); if( objImagePreloader.width > arrPageSizes[2] ) { objImagePreloader.width = arrPageSizes[2]; objImagePreloader.height = objImagePreloader.width * (1/fImgRatio); } if( objImagePreloader.height > arrPageSizes[3] ) { objImagePreloader.height = arrPageSizes[3] - 150; objImagePreloader.width = objImagePreloader.height * fImgRatio; } $('#lightbox-image').width(objImagePreloader.width).height(objImagePreloader.height); // MOD // Perfomance an effect in the image container resizing it _resize_container_image_box(objImagePreloader.width,objImagePreloader.height); // clear onLoad, IE behaves irratically with animated gifs otherwise objImagePreloader.onload=function(){}; }; objImagePreloader.src = settings.imageArray[settings.activeImage][0]; }; |
BC:
Yes, merci beaucoup, c’est pile ce qu’il me faut!
7 mai 2008, 10h32Bravo pour l’astuce