Je suis en train de faire ma propre lightbox (car celles dispos sur le web ne font pas exactement pile poil ce que je veux et pour apprendre -c'est en forgeant que l'on devient forgeron- )
voici à quoi ressemble le code de début
(function($)
{
$.fn.njbox=function(options)
{
//On définit nos paramètres par défaut
var defauts=
{
'callback': null //Fonction appelée à chaque nouvelle image
};
//On fusionne les options et le defaults
var param=$.extend(defauts, options);
// Definition html de la box
var box =' \
<div id="njbox"> \
<div id="njbox_conteneur"> \
<div id="njbox_close"></div> \
<div id="njbox_next"></div> \
<div id="njbox_prev"></div> \
<div id="njbox_zoom"></div> \
</div> \
</div> \
';
// liste des propriètés des images
var liste = new Array();
// propriètés d'une image
var l={ lien: null, titre: null, html:null }
var wind={ x : 0, y : 0, ratio : 0, delx : 0, dely : 0 }
var img={ ox : 0, oy : 0,x : 0, y : 0, ratio : 0, cadrex : 0, cadrey : 0 }
return this.click(function(e)
{
// desactivation des events
e.preventDefault();
// extraction du sous album auquel appartient l'image via l'attribut rel
var current_alb=$(this).attr("rel");
// recuperation de l'index de l'image sélectionnée dans le sous album
var ind = $('a.njbox[rel^='+ current_alb+']').index(this);
var nbr_img;
// Dimention de la fenetre explorateur
wind.x = $(window).width();
wind.y = $(window).height();
wind.ratio= wind.x/wind.y;
// Recherche de toutes les images appartenent au même sous album
$('a.njbox[rel^='+ current_alb+']').each(function(i){
var boximg='<img id="njbox_img" src="' ;
l.lien=$(this).attr("href");
l.titre=$(this).attr("title")
l.html=boximg + l.lien + '" /> '
nbr_img=i;
liste.push(l);
});
$('body').append(box);
$('#njbox_conteneur').append(liste[ind].html);
$('#njbox_conteneur').hide();
$('#njbox_img').load(function(){
$('#njbox_conteneur').show();
img.ox = $('#njbox_img').width();
img.oy = $('#njbox_img').height();
img.x = img.ox;
img.y = img.oy;
img.ratio=img.x/img.y;
img.cadrex=img.x+20;
img.cadrey=img.y+20;
redim_taille();
// alert(img_x);
// alert(img_y);
$('#njbox_conteneur').css({'left':''+wind.delx+'px','top':''+wind.dely+'px','height':''+img.cadrey+'px','width':''+img.cadrex+'px'});
$('#njbox_img').css({'height':''+img.y+'px','width':''+img.x+'px'});
});
function redim_taille(){
//alert('wind.x='+wind.x+'; '+'wind.y='+wind.y+'; '+'img.x='+img.x+'; '+'img.y='+img.y+'; '+'img.cadrex='+img.cadrex+'; '+'img.cadrey='+img.cadrey+'; ');
if (wind.x<img.cadrex){
//alert('xxxxxxxxxx');
img.cadrex=wind.x;
img.x=img.cadrex-20;
img.y=Math.round(img.x/img.ratio);
img.cadrey=img.y+20;
// alert('wind.x='+wind.x+'; '+'wind.y='+wind.y+'; '+'img.x='+img.x+'; '+'img.y='+img.y+'; '+'img.cadrex='+img.cadrex+'; '+'img.cadrey='+img.cadrey+'; ');
}
if (wind.y<img.cadrey){
//alert('yyyyyyyyy');
img.cadrey=wind.y;
img.y=img.cadrey-20;
img.x=Math.round(img.y*img.ratio);
img.cadrex=img.x+20;
// alert('wind.x='+wind.x+'; '+'wind.y='+wind.y+'; '+'img.x='+img.x+'; '+'img.y='+img.y+'; '+'img.cadrex='+img.cadrex+'; '+'img.cadrey='+img.cadrey+'; ');
}
wind.delx=Math.round((wind.x-img.cadrex)/2);
wind.dely=Math.round((wind.y-img.cadrey)/2);
//alert('wind.x='+wind.x+'; '+'wind.y='+wind.y+'; '+'img.x='+img.x+'; '+'img.y='+img.y+'; '+'img.cadrex='+img.cadrex+'; '+'img.cadrey='+img.cadrey+'; '+'wind.delx='+wind.delx+'; '+'wind.dely='+wind.dely+'; ');
}
$("#njbox_close").click(function(){
$("#njbox").remove();
});
$(window).resize(function() {
alert('resize');
// ici il devrait y avoir un appel à redim_taille
});
});
};
})(jQuery);
Mon problème est avec
$(window).resize(function() {
alert('resize');
// ici il devrait y avoir un appel à redim_taille
});
Quand je redimentionne mon explorateur (firefox) je me retrouve avec un fenêtre vidée de tout son contenu (barre, menu, ...) et ff plante.
Merci de votre aide.
Les balises
sont là pour nous aider à mieux lire :)
Sinon tu peux t'inspirer des autres plugins pour voir comment ils ont fait
Voilà tout ^^
Bonjour messieur le docteur je suis malade
Le docteur
Au risque d'être vexant voila à quoi correspond ta (non) réponse.
Si j'avais compris comment c'est fait dans les autres plugins , je serais pas chez le medecin ....
PS j'ai mis la balise et c'est vrai c'est un rien plus lisible.
Salut,
Ca bug à l'état actuel comme tu nous le montres ou quand tu ajoutes l'appel à la fonction redim_taille?
Je dis ça par ce que le alert, peut provoquer une erreur, en fait quand tu redimensionnes le navigateur, il ne fait pas qu'une fois l'évènement resize, donc cette fonction est appelé plein de fois, tout dépend de la rapidité de redimensionnement.
Là vu que c'est difficile de dire ce qui déconne, moi je mettrais tout en commentaire sauf la partie resize, et je vois si ça plante.
Si ça plante pas je décommente au fur et à mesure pour voir ce qui fait planter.
Le seul truc que je vois pour le moment
var defauts=
{
'callback': null //Fonction appelée à chaque nouvelle image
};
Les guillements sur le Callback?
Manque des points-virgules :
l.titre=$(this).attr("title")
l.html=boximg + l.lien + '" /> '
A+
en faisant les quelques modifications et en mettant
$(window).resize(function() {
// alert('resize');
// // ici il devrait y avoir un appel à redim_taille
redim_taille();
$('#njbox_conteneur').css({'left':''+wind.delx+'px','top':''+wind.dely+'px','height':''+img.cadrey+'px','width':''+img.cadrex+'px'});
$('#njbox_img').css({'height':''+img.y+'px','width':''+img.x+'px'});
});
Je n'ai plus le bug décrit par contre il ne se passe rien(pas de redim de la div #njbox_conteneur ni de l'image, ce qui laisse penser que la fonction n'est pas appellée.
Ps en ajoutant
$('body').prepend('<div>' +'wind.x='+wind.x+'; '+'wind.y='+wind.y+'; '+'img.x='+img.x+'; '+'img.y='+img.y+'; '+'img.cadrex='+img.cadrex+'; '+'img.cadrey='+img.cadrey+'; '+'wind.delx='+wind.delx+'; '+'wind.dely='+wind.dely+'; '+ '</div>');
Je constate que les variable ne change pas, c'est donc ma fonction redim_taille qui est boiteuse.
Bonjour
Suite de mes (més)aventures avec jQuery
J'ai une div (principale) dans laquelle est imbriquée une autre div (secondaire).
Dans la div secondaire il y a un texte, une image, peu importe.
Ce que je voudrais c'est qu'au survole de la principale, la secondaire d'affiche et lorsque l'on quitte la principale, la secondaire disparait.
Pour cela je fais
$("#njbox_znext").mouseover(function() {
$('#njbox_next').stop(true,true).hide().fadeIn(1000);
}).mouseout(function(){
$('#njbox_next').stop(true,true).show().fadeOut(1000);
});
Le problème c'est que lorsque la souris est à la limite des deux div il y a un effet de clignotement que je n'arrive pas à éviter/supprimer.
J'ai essayer divers combinaison avec stop, clearqueue, e.preventDefault, e.stopPropagation sans succes.
Merci par avance de votre aide