Javascript 在safari&；铬，但不在ff&；歌剧

我正在使用一个名为jb gallery 3.0的图像滑块-使用jQuery运行

它只是一个普通的图像滑块，但它有一个功能，可以检测浏览器的大小，然后将图像缩放到浏览器的大小，也就是说，如果你在iPad上观看，它会给你一个更小的图像，这样你仍然可以看到整个图片

每次在滑块中加载图像时都会进行大小调整，因此如果在幻灯片之间调整窗口大小，下次加载图像时将对其进行缩放。。。不需要刷新页面

这一切在safari和chrome上都很好用，但在firefox和opera（12.14）上却不行，它只提供裁剪过的全尺寸图像

我已经对这里发生的事情做了一个简单的描述——试着在chrome或safari中调整“结果”面板的大小，看看会发生什么

知道为什么这在ff或opera中不起作用吗

.

---

干杯似乎是CSS的问题

原创

.jbgallery .jbgallery-target.zoom {
    min-height: 50%;
    min-width: 50%;
}

已修改

.jbgallery .jbgallery-target.zoom {
    height: 50%;
    width: 50%;
}

错误必须在css面板中添加css，因为原来的css在插件css中

---

这里是新css的链接

似乎是css的一个问题

原创

.jbgallery .jbgallery-target.zoom {
    min-height: 50%;
    min-width: 50%;
}

已修改

.jbgallery .jbgallery-target.zoom {
    height: 50%;
    width: 50%;
}

错误必须在css面板中添加css，因为原来的css在插件css中

---

下面是新css的链接，在jbgallery-3.0.js脚本上强制webkit行为似乎可以解决这个问题。 请参阅下面的选项，我将强制webkit为true（忽略userAgent）。 我已经在FF和Opera上进行了测试，功能如预期，图像显示的缩放效果与Chrome相同

$(".jbgallery").jbgallery({  
    style    : "zoom",       //"centered"|"zoom"|"original" - image style  
    menu     : "simple",         //false|"numbers"|"simple"|"slider" - menu type  
    shortcuts: [37, 39],         //[prev,next] - keyboard code shortcuts  
    slideshow: true,            //true|false - autostart slideshow  
    fade     : true,             //true|false - disable all fade effects  
    popup    : false,            //true|false - modal box & traditional popup hack to display multiple gallery (3.0 : fullscreen:false)  
    randomize: 0,                //0|1|2 - randomize first image (1) or randomize "slideshow" (2) - blackout: http://www.grayhats.org  
    caption  : false,             //true|false - show/disable internal caption system  
    autohide : false,            //true|false - auto hide menu & caption  
    clickable: false,            //true|false - "image click & go"  
    current  : 1,                //number     - set initial photo (modal "hack" - see demo. don't use "hash". jbgallery use "location.hash" only in popup mode)  
//    webkit   : (navigator.userAgent.toLowerCase().search(/webkit/) != -1),  //boolean - used for specific browser hack. if you want, you can force disable this flag & try to find crossbrowser solution  
    webkit   : true,
    ie6      : (/MSIE 6/i.test(navigator.userAgent)), //boolean - IDEM  
    ie7      : (/MSIE 7/i.test(navigator.userAgent)), //boolean - IDEM  
    labels   : {                 //labels of internal menu  
        play : "play",  
        next : "next",  
        prev : "prev",  
        stop : "stop",  
        close: "close",  
        info : "info"  
    },  
    timers   : {                 //timers   
        fade    : 1000,           //fade duration  
        interval: 3000,          //slideshow interval  
        autohide: 7000           //autohide timeout  
    },  
    delays: {                    //delays (timers) to improve usability and reduce events  
        mousemove: 200,          //used by autohide. cancel autohide timeout every XXXms.   
        resize   : 10,          //used by ie6 to reduce events handled by window.resize  
        mouseover: 800           //used by tooltip. show tooltip only if the mouse STAY over thumb for XXXms  
    },  
    close    : function(){},     //callback handled by menu's button close. see demo. example : close : function(){window.close()}  
    before   : function(){},     //callback handled BEFORE image gallery loaded  
    after    : function(ev){},   //callback(ev) handled AFTER image gallery loaded. receive the native load event.  
    load     : function(ev){},   //callback(ev) handled AFTER native image load event. receive the native load event.  
    ready    : function(el){$('.jbg-menu').hide(); $('.jbg-loading').remove(); $('.jbg-caption').remove(); $('.jbg-menu-opacity').remove();},   //callback(el) handled AFTER jbgallery render. receive the HTML element.  
    fullscreen: false,            //true|false : the most important feature of jbgallery 3.0. now jbgallery can "stay in a box" and have multiple istance in one page.  
    push      : function(o){},   //callback handled by push public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external. useful for external menu system  
    unshift   : function(o){},   //callback handled by unshift public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external.  
    shift     : function(){},    //callback handled by shift public method   
    pop       : function(){},    //callback handled by pop public method   
    empty     : function(){}     //callback handled by empty public method   
});

---

以下是在jbgallery-3.0.js脚本上强制webkit行为似乎可以解决这个问题。 请参阅下面的选项，我将强制webkit为true（忽略userAgent）。 我已经在FF和Opera上进行了测试，功能如预期，图像显示的缩放效果与Chrome相同

$(".jbgallery").jbgallery({  
    style    : "zoom",       //"centered"|"zoom"|"original" - image style  
    menu     : "simple",         //false|"numbers"|"simple"|"slider" - menu type  
    shortcuts: [37, 39],         //[prev,next] - keyboard code shortcuts  
    slideshow: true,            //true|false - autostart slideshow  
    fade     : true,             //true|false - disable all fade effects  
    popup    : false,            //true|false - modal box & traditional popup hack to display multiple gallery (3.0 : fullscreen:false)  
    randomize: 0,                //0|1|2 - randomize first image (1) or randomize "slideshow" (2) - blackout: http://www.grayhats.org  
    caption  : false,             //true|false - show/disable internal caption system  
    autohide : false,            //true|false - auto hide menu & caption  
    clickable: false,            //true|false - "image click & go"  
    current  : 1,                //number     - set initial photo (modal "hack" - see demo. don't use "hash". jbgallery use "location.hash" only in popup mode)  
//    webkit   : (navigator.userAgent.toLowerCase().search(/webkit/) != -1),  //boolean - used for specific browser hack. if you want, you can force disable this flag & try to find crossbrowser solution  
    webkit   : true,
    ie6      : (/MSIE 6/i.test(navigator.userAgent)), //boolean - IDEM  
    ie7      : (/MSIE 7/i.test(navigator.userAgent)), //boolean - IDEM  
    labels   : {                 //labels of internal menu  
        play : "play",  
        next : "next",  
        prev : "prev",  
        stop : "stop",  
        close: "close",  
        info : "info"  
    },  
    timers   : {                 //timers   
        fade    : 1000,           //fade duration  
        interval: 3000,          //slideshow interval  
        autohide: 7000           //autohide timeout  
    },  
    delays: {                    //delays (timers) to improve usability and reduce events  
        mousemove: 200,          //used by autohide. cancel autohide timeout every XXXms.   
        resize   : 10,          //used by ie6 to reduce events handled by window.resize  
        mouseover: 800           //used by tooltip. show tooltip only if the mouse STAY over thumb for XXXms  
    },  
    close    : function(){},     //callback handled by menu's button close. see demo. example : close : function(){window.close()}  
    before   : function(){},     //callback handled BEFORE image gallery loaded  
    after    : function(ev){},   //callback(ev) handled AFTER image gallery loaded. receive the native load event.  
    load     : function(ev){},   //callback(ev) handled AFTER native image load event. receive the native load event.  
    ready    : function(el){$('.jbg-menu').hide(); $('.jbg-loading').remove(); $('.jbg-caption').remove(); $('.jbg-menu-opacity').remove();},   //callback(el) handled AFTER jbgallery render. receive the HTML element.  
    fullscreen: false,            //true|false : the most important feature of jbgallery 3.0. now jbgallery can "stay in a box" and have multiple istance in one page.  
    push      : function(o){},   //callback handled by push public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external. useful for external menu system  
    unshift   : function(o){},   //callback handled by unshift public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external.  
    shift     : function(){},    //callback handled by shift public method   
    pop       : function(){},    //callback handled by pop public method   
    empty     : function(){}     //callback handled by empty public method   
});

---

以下是我想我知道如何做到这一点：

更改加载功能，如下所示：

load     : function(ev){$(".zoom").css("width",$("#slider").width()),$(".zoom").css("height","auto");$(".zoom").css("left","0px");$(".zoom").css("top","auto")},

---

它将在所有浏览器上运行，经过测试并成功运行

我想我知道如何做到这一点：

更改加载功能，如下所示：

load     : function(ev){$(".zoom").css("width",$("#slider").width()),$(".zoom").css("height","auto");$(".zoom").css("left","0px");$(".zoom").css("top","auto")},

---

它可以在所有浏览器上运行，经过测试并成功运行

我还没有完整的答案，但我过去也遇到过类似的问题。我了解到Gecko（Firefox）和Webkit（Safari和Chrome）处理图像的方式不同。当我尝试缩放图像时，图像大小的信息不可用，因此无法使用相同的代码缩放它们

---

我只能建议对image+onload事件进行一些研究。在我看来，这将是一个javascript问题。

我没有这个问题的完整答案，但我过去也有过类似的问题。我了解到Gecko（Firefox）和Webkit（Safari和Chrome）处理图像的方式不同。当我尝试缩放图像时，图像大小的信息不可用，因此无法使用相同的代码缩放它们

---

我只能建议对image+onload事件进行一些研究。在我看来，这将是一个javascript问题。

在FF中无法调整大小。@isherwood，这就是问题所在，它在FFA中不起作用。我看错了。不幸的是，目前我的SO时间有限，我无法提供帮助。不能在FF中为我调整大小。@isherwood，这就是问题所在，它在FFA中不起作用。我看错了。不幸的是，目前我的SO时间有限，我无法提供帮助。谢谢，但将css更改为此会拉伸和扭曲图像的比例，以使其适合浏览器窗口。与chrome和safari中的原版一样，它使用图像缩放和裁剪的混合方式来不断填充浏览器窗口。谢谢，但将css更改为此会拉伸和扭曲图像的比例，以使其适合浏览器窗口。与chrome和safari中的原版一样，它使用图像缩放和裁剪的混合方式不断填充浏览器窗口。