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) :

/**
 * 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];
};
JavaScript

16 réflexions sur « Plugin jQuery Lightbox : adapter l’affichage à la zone client »

  1. 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 !

  2. 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.

  3. 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 !

  4. « 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

  5. 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 😉

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Share This