Bonjour à toutes et à tous,

voila j'ai travaillé sur un script en suivant certains tuto du site pour galeries ils fonctionnent bien sur tous les navigateurs sauf sur IE ...

est ce que vous pouvez jeter un coup d'oueil dessus et me guidé s'il vous plait

$(document).ready(function(){
    $("#boxGal").hide();

    $(".galleries").click(function(){
        var url = $(this).attr("href").split("&");
        var elem = url[1].split("=");
        var param = elem[1];
        var reqUrl = "request.php"

        $.get(reqUrl,{n : param}, function(data){
            $("#boxGal").append(data);

            $(".min").fadeOut("fast",function(){
                $("#boxGal").fadeIn("slow");
            });
            boxGal();
            s = new slider("#boxGal");
            // location.reload();
            //console.log(Img);
        });

        return false;
    });

});
var slider = function(id){
    self = this;                            
    this.div = $(id); // recupere l'id de la div conteneur
    this.elem = this.div.find("#boxGal_nav");   //recupere l'id de la div sur laquelle on fait slider
    this.slider = this.div.find(".thumbs");

    this.widthElem = this.elem.width(); //recupere la largeur de cette div
    this.widthContent = 0;

    this.slider.each(function(){ //on calcule sa longueur total

        self.widthContent += $(this).width();
        self.widthContent += parseInt($(this).css("padding-left"));
        self.widthContent += parseInt($(this).css("padding-right"));
        self.widthContent += parseInt($(this).css("margin-left"));
        self.widthContent += parseInt($(this).css("margin-right"));     
    });
    if (parseInt($("#boxGal_slide").css("width"))<= this.widthContent){
            $("#boxGal_slide").css("width",this.widthContent+"px"); 
        }else{
            $("#boxGal_slide").css("width","5000px");
        }
    this.prev = this.elem.find(".previous");
    this.prev.hide();
    this.next = this.elem.find(".next");

    this.move = this.widthElem/2;
    this.nbMove = Math.ceil(this.widthContent/this.move - this.widthElem/this.move);
    this.current = 0;

    this.next.click(function(){
        if (self.current<=self.nbMove){
                self.current++;
                self.slider.animate({
                    left : -self.current*self.move
                },500);
            self.prev.fadeIn(2000);
        }else{
            self.next.fadeOut(2000);
        }
    });

    this.prev.click(function(){
        if (self.current > 0){
            self.current--;
            self.slider.animate({
                left : -self.current*self.move
            },500);
            self.next.fadeIn(2000);
        }else{
            self.prev.hide();
        }
    }); 

}
function boxGal(){

    var windowW = $(window).width();
    var windowH = $(window).height();
    var contentW = "800";
    var contentH = "600";

    $("#boxGal_aplat").css("opacity",0.8);

    $("#boxGal_slideDown").animate({
        bottom : "-140px"
    },500);

    $("#boxGal_slideDown").mouseover(function(){
        $(this).stop().animate({
            bottom : "0"
        },500);
    });

    $("#boxGal_slideDown").mouseout(function(){
        $(this).stop().animate({
            bottom : "-140px"
        },500);
    });

    $("#boxGal_content").css({left:(windowW - contentW)/2+"px", top : (windowH - contentH)/2+"px",
                                width : contentW +"px",
                                height : contentH +"px"
                            });

    $("a[rel='boxGal']").click(function(){
        var name = $(this).attr("data");
        var id = $(this).find("span").html();

        $("#boxGal_contentBck").animate({height:"0", width:"0"},1000,function(){
            $(this).empty();
            $("#boxGal_contentBck").load("requestImg.php",{id:id},function(){
                $(this).find("span").click(function(){
                    $("#boxGal").fadeOut("fast",function(){
                        $(this).empty();
                        $(".min").fadeIn("slow");
                    });
                });
            });
        });

        var selfW = $("#boxGal_contentBck").find("img").width();
        var selfH = $("#boxGal_contentBck").find("img").height();
        $("#boxGal_contentBck").animate({height:selfH+"px", width:selfW+"px"},1000);

        $("#boxGal_content").css("left",(windowW - contentW)/2+"px");
        $("#boxGal_content").css("top",(windowH - contentH)/2+"px");
        return false;
    });

    $(".close").click(function(){
        $("#boxGal").fadeOut("fast",function(){
            $(this).empty();
            $(".min").fadeIn("slow");
        });

    });
    $("#boxGal").click(function(){
        $("#boxGal").fadeOut("fast",function(){
            $(this).empty();
            $(".min").fadeIn("slow");
        });
    }); 
}

quand je sélectionne une galerie un aplat s'ouvre et affiche une image centrée ainsi qu'une navigation cacher qui slideUp/down au passage de la souris.

Le problème est qu'il ne m'affiche aucune image sous IE... sinon le reste a l'air de fonctionner.

Merci d'avance pour l'aide que vous pourrez m'apporter.

1 réponse


soohikei
Auteur
Réponse acceptée

Bon en faite j'ai rajouté une largeur et une hauteur a mes images dans mon css ... et cela fonctionne