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.

12 réponses


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 ^^

rrolet
Auteur

Bonjour messieur le docteur je suis malade

Le docteur

  • Regardez dans un livre de médecine .....

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?

rrolet
Auteur

En l'état et quand il y a l'appel de la fonction

Tu as essayé sans le alert?

rrolet
Auteur

oui

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.

rrolet
Auteur

donc tu ne vois pas une erreur synthaxique ou de construction.

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+

rrolet
Auteur

Merci bien , la suite lundi ...

rrolet
Auteur

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.

rrolet
Auteur

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