Durant quelques temps, j'étais à la rechercher d'une lightbox qui me permettrait de réaliser ce dont j'avais besoin mais malheureusement, rien ne m'a convenu alors j'ai réaliser mon propre script.
Je ne viens pas vous présenter mon projet car il y a encore quelques erreurs que j'aimerai corriger.
A ce stade, je me retrouve un peu perdu je l'avoue...
Voici mon code :
(function($) {
$.fn.myLightBox = function(settings){
settings = $.extend({
/*
* Effects configuration
*/
slideType: 'fade', // @type string - @property horizontal or vertical or fade
backgroundColor: '#000', // @type int - @property #RGB (hexadecimal color value)
backgroundOpacity: 0.7, // @type int - @property value between 0 and 1
containerColor: '#FFF', // @type int - @property #RGB (hexadecimal color value)
containerTextColor: '#777', // @type int - @property #RGB (hexadecimal color value)
borderSize: 10, // @type int - @property more than 0
animationSpeed: 500, // @type int - @property more than 0
/**
* Image configuration
*/
url: '', // @type string - @property url to the image
alt: '', // @type string - @property alternative text to the image
imageNumber: 1, // @type int - @property number of image
theImage: 0, // @type int - @property the first left side to display (start at 0)
/**
* Icon configuration
*/
imgLoading: 'images/myLightBoxLoading.gif', // @type string - @property url to image
imgNext: 'images/myLightBoxNext.gif', // @type string - @property url to image
imgPrev: 'images/myLightBoxPrev.gif', // @type string - @property url to image
imgClose: 'images/myLightBoxClose.gif', // @type string - @property url to image
/**
* Text configuration
*/
txtPart: 'Part', // @type string - @property Value to display "Part" x of x
txtOf: 'of', // @type string - @property Value to display Part x "of" x
errorMessage: 'An error occured'
},settings);
/**
* Initialize the lightbox
*/
function _initialize() {
// We verify that everything is correct...
if(_verify_settings())
_start(this);
// ...otherwise tell it ti him
else
alert(settings.errorMessage);
}
/**
* Verify some mistakes
* (Not much made, I prefer test before)
*/
function _verify_settings() {
var returnValue = true;
if(settings.theImage >= settings.imageNumber)
settings.theImage = 0;
if(settings.imageNumber <= 0)
settings.imageNumber = 1;
if(settings.url == '')
returnValue = false;
if(settings.alt == '')
returnValue = false;
return returnValue;
}
/**
* Beggin the lighbox creation
* (objectClicked will be used when I'll know
* how to call it form a event choosen
* by the user)
*/
function _start(objectClicked) {
_setUp();
_setUpImage();
}
/**
* Beggining of the image loading
*/
function _setUpImage(){
$('#myLightBox-loader').show();
var image = new Image();
image.onload = function(){
_setLightBoxImage(image.width, image.height);
_resizeMyLightBox(image.width, image.height);
_setNavigation(image.width);
image.onload = function(){};
};
image.src = settings.url;
}
/**
* Create the div of the image
*/
function _setLightBoxImage(width, height) {
$('#myLightBox-image').css({
'background-image' : 'url(' + settings.url + ')',
'background-position': width - (settings.theImage * width / settings.imageNumber) + 'px',
width: width / settings.imageNumber,
height:height
});
}
/**
* Resize the lightbox
* using the image size
*/
function _resizeMyLightBox(imgWidth, imgHeight) {
width = imgWidth / settings.imageNumber;
height = imgHeight;
top = (_getPageSize()[1] - imgHeight) / 2 - 40;
$('#myLightBox-container-insideContent').animate({
width: width,
height: height + 40,
top: top
}, settings.animationSpeed
, function(){
_showImage();
});
}
/**
* Display the image
* (Such as the descriptive
* of the bottom)
*/
function _showImage() {
$('#myLightBox-loader').hide();
$('#myLightBox-image').fadeIn(function(){
$('#myLightBox-bottomBox').css({
'background-color': settings.containerColor,
'padding-top': (settings.borderSize + 2),
'color': settings.containerTextColor
}).slideDown();
});
}
/**
* Let the user navigate in the image
*/
function _setNavigation(width) {
$('#myLightBox-nav-prev').hover(function(){
$('#myLightBox-nav-prev').css({
'outline': 'none'
});
if(settings.theImage > 0)
$('#myLightBox-nav-prev').css({
'background': 'url(' + settings.imgPrev + ') left 15% no-repeat'
});
},
function(){
$('#myLightBox-nav-prev').css({
'background': 'url()'
});
}).click(function(){
if(settings.theImage > 0) {
$('#myLightBox-image').animate({
'background-position': width - (--settings.theImage * width / settings.imageNumber) + 'px'
}, settings.animationSpeed);
$('#currentPart').text(settings.theImage + 1);
}
});
$('#myLightBox-nav-next').hover(function(){
$('#myLightBox-nav-next').css({
'outline': 'none'
});
if((settings.theImage + 1 ) < settings.imageNumber)
$('#myLightBox-nav-next').css({
'background': 'url(' + settings.imgNext + ') right 15% no-repeat'
});
},
function(){
$('#myLightBox-nav-next').css({
'background': 'url()'
});
}).click(function(){
if((settings.theImage + 1 ) < settings.imageNumber) {
$('#myLightBox-image').animate({
'background-position': width - (++settings.theImage * width / settings.imageNumber) + 'px'
}, settings.animationSpeed);
$('#currentPart').text(settings.theImage + 1);
}
});
}
/**
* Create the lightbox div
*/
function _setUp() {
$('body').append('<div id="myLightBox-overlay"></div><div id="myLightBox-container"><div id="myLightBox-container-insideContent"><div id="myLightBox-image"><a href="#" id="myLightBox-nav-prev"></a><a href="#" id="myLightBox-nav-next"></a></div><div id="myLightBox-bottomBox"><div id="myLightBox-altText">' + settings.txtPart + ' <span id="currentPart">' + (settings.theImage + 1) + '</span> ' + settings.txtOf + ' ' + settings.imageNumber + ' - ' + settings.alt + '</div><div id="myLightBox-closeButton"><img src="' + settings.imgClose + '"</div></div><div id="myLightBox-loader"><img src="' + settings.imgLoading + '" /></div></div></div>');
var pageSize = _getPageSize();
/**
* Create the lightbox overlay
*/
$('#myLightBox-overlay').css({
width: pageSize[0],
height: pageSize[1],
backgroundColor: settings.backgroundColor,
opacity: settings.backgroundOpacity
}).fadeIn('fast');
/**
* Create the lightbox container
*/
$('#myLightBox-container').fadeIn();
$('#myLightBox-container-insideContent').css({
'background-color': settings.containerColor,
'border': settings.borderSize + 'px solid ' + settings.containerColor,
top: ( ( pageSize[1] - 250 ) / 2 )
});
/**
* Assign the lightbox destruction ways
*/
// $('#myLightBox-container').click(function(){
// _destroy();
// });
$('#myLightBox-closeButton').click(function(){
_destroy();
});
/**
* Resizable lightbox
* Doesn't work very well
*/
$(window).resize(function(){
_destroy();
var pageSize = _getPageSize();
$('#myLightBox-overlay').css({
width: pageSize[0],
height: pageSize[1]
});
$('#myLightBox-container-insideContent').css('top', ((pageSize[1] - 250) / 2));
});
}
/*
* Fade out and detroy the lightbox
*/
function _destroy() {
$('#myLightBox-container').fadeOut(function(){
$('#myLightBox-container').remove();
});
$('#myLightBox-overlay').fadeOut(function(){
$('#myLightBox-overlay').remove();
});
$('embed, object, select').show();
}
/**
* Get the inner window size
*/
function _getPageSize() {
var pageHeight = window.innerHeight ? window.innerHeight : $(window).height();
var pageWidth = window.innerWidth ? window.innerWidth : $(window).width();
return new Array(pageWidth, pageHeight);
}
/**
* Let the user initialize by clicking
*/
return this.click(_initialize);
}
})(jQuery);
Voilà ce que j'ai réussit à faire mais je bloque sur plusieurs points :
- Le redimmensionnement de la lightbox lors du redimmensionnement de la fenetre.
- L'appel de la function, j'aimerai faire $('#div').click(function(){}); mais je ne trouve pas comment faire
- Et je pense qu'il y a pas mal de choses à refaire aussi
Merci d'avance pour votre aide
[jQuery] myLightBox
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
