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) :
/**
* 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] -150 ) {
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];
};
Yes, merci beaucoup, c’est pile ce qu’il me faut!
Bravo pour l’astuce 🙂
sympatoche comme tout cette modif.
question subsidiaire : 🙂
et comment faire pour qu’une toute petite image (du genre un picto) s’affiche quand même dans un « conteneur » assez grand pour voir correctement les images « suivant » « précédent » et « fermer » ??
merci !
Et bien je pense qu’il suffirait de tester les dimensions à appliquer à l’image juste avant le redimensionnement (soit avant : _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);) et de voir si elles sont en deça des dimensions minimales que tu auras définies, auquel cas, tu forces leurs valeurs aux dimensions voulues.
Bonjour 🙂 Très utile comme script…
J’aurais une petite question… j’utilise le script jQuery 0.5
et j’aimerais lancer la galerie au load d’une page. (éventuellement, encore mieux sur le onDomReady)
Je rajoute donc à la fin de mon script un petit « window.onload = function() {} »
mais je ne sais pas quelle fonction lancer !!! tous les noms de fonctions du script sont faîts avec un $ que je ne comprends pas…
ex :
(function($){
var opts;
$.fn.lightbox = function(options){
// build main options
opts = $.extend({}, $.fn.lightbox.defaults, options);
// initalize the lightbox
$.fn.lightbox.initialize();
return this.each(function(){
$(this).click(function(){
$(this).lightbox.start(this);
return false;
});
});
};
// lightbox functions
$.fn.lightbox.initialize = function(){
$(‘#overlay’).remove();
$(‘#lightbox’).remove();
opts.inprogress = false;
vous pourriez m’aider ??
merci !
@chou : merci d’utiliser le forum pour les demandes de support 😉
Merci énormement pour ce Mod que je cherchais depuis un petit moment par flemme de me mettre dans le moding de jquery 🙂
« Attention : vous ne pourrez pas faire les modifications sur les fichier suffixés .min.js et .pack.js, ou alors vous aimez le sport… »
ben si… il suffit de « repacker » le js modifié pour avec une version réduite modifiée
d
Merci mille fois pour cette évolution, je n’aurai jamais cru trouver la solution à mon problème ! Enfin 100% intégré comme il faut sur Scooter System 😉
Nickel merci.
Ca m’a fait gagner quelques heures de galère…
Merci pour cette modification, je viens de l’intégrer sur l’Etoile Polaire : http://v5.etoilepolaire.fr
Une nouvelle lightbox est disponible sous Jquery, elle se nomme YoxView est elle est vraiment originale!
http://www.outils-du-web.com/2010/03/jquery-lightbox-yoxview.html
Merci beaucoup !
Super travail c’est exactement ce qu’il manquait au script.
Geniiaaaaaal !!
Merci beaucoup, c’est ce que je cherchais et en plus c’est simple.
Adrien
parfait, ça fonctionne nickel ! merci