.scale()取消扩展:功能(选项).我如何让这两个玩得很好

Question

使用Galleria 1-2-8，经典主题。

我有..

$('#galleria').galleria({
    imageCrop: "false",
    thumbnails: 'lazy',
    carouselSteps: 1,
    transition: 'flash',
    transitionSpeed: 800,
    extend: function(options) {
        var gallery = this;
        this.bind(Galleria.IMAGE, function(e) {
            TONS OF CODE
        });
    }
});

然后在下面我有

Galleria.ready(function(options) {
    this.bind('image', function(e) {
        this.lazyLoadChunks( 3, 200 );
        this.scale();
    });
});

行" this.scale（）;"行是一个新的补充。该代码以前工作正常，但是我不得不在主要图像上强制恢复重新生命。原因是，我大量调整了Galleria，并且遇到了一个问题，即缩略图滚动的行为非常不稳定。为了修复奇怪的缩略图行为，我单击了Nav-Right Arrow Div，单击Galleria底部的Nav-Left箭头Div。/p>

$('.galleria-image-nav-right').click();
$('.galleria-image-nav-left').click();

我之所以选择这样做的原因是因为我注意到用户单击主图像的下一个箭头时，它就修复了缩略图滚动问题。因此，一旦Galleria加载，我强制单击下一个图像，然后单击返回（在所有上面显示加载图像时，用户都不会注意到）。

无论如何..当我在图像上调用.scale（）时，它覆盖了我在那里的第一个代码中写的所有选项。它完全取消它们，好像它们从未在那里。我已经在代码中使用警报进行了测试，以查看我设置的变量是否仍然存在，它们不在。

我已经尝试了不同的方法.. .scale（），.refreshimage（），._scaleimage（）等。

请帮助！

如果此信息还不够，或者您需要完整查看我的代码，则是..

<script type="text/javascript">
        Galleria.loadTheme('/js/galleria.classic.js');
            $('#galleria').galleria({
                imageCrop: "false",
                thumbnails: 'lazy',
                carouselSteps: 1,
                transition: 'flash',
                transitionSpeed: 800,
            extend: function(options) {
                var gallery = this;
                this.bind(Galleria.IMAGE, function(e) {

                    // $(window).resize(function() {
                        // this.scale();
                    // });//yep, tried it here.. no luck

                    var current = gallery.getData(gallery.getIndex());
                    var currImg = current.original;
                    var altText = $(currImg).attr('alt');
                    var src = $(currImg).attr('src');
                    var thehref = $(currImg).parent().attr('href');
                    var actualCurrent = $(currImg).parent();
                    getFFData(altText);
                    function getSource(val) {
                        var source = val;
                        while(source) {
                            if( n=source.indexOf("Vertical/") ) {
                                if(n!==-1) {
                                    $(".galleria-images img").removeClass();
                                    $(".galleria-images img").addClass("vertIMG");
                                    $("#galleria-bigImage-popup").addClass("vertDIV");
                                    $(".galleria-info-title").css("right", "34.2%");
                                    $(".galleria-info-title").css("top", "45%");
                                    $(".galleria-info").css("top", "94%");
                                    $(".galleria-info").css("display", "block");
                                    $(".galleria-info-title").css("display", "block");
                                    $(".galleria-info-text").css("visibility", "visible");
                                    $(".galleria-info-text").fadeIn(800);
                                }
                            }
                            if( n=source.indexOf("Horizontal/") ) {
                                if(n!==-1) {
                                    $(".galleria-images img").removeClass();
                                    $(".galleria-images img").addClass("horizIMG");
                                    $("#galleria-bigImage-popup").addClass("horizDIV");
                                    $(".galleria-info-title").css("right", "25.8%");
                                    $(".galleria-info-title").css("top", "45%");
                                    $(".galleria-info").css("top", "94%");
                                    $(".galleria-info").css("display", "block");
                                    $(".galleria-info-title").css("display", "block");
                                    $(".galleria-info-text").css("visibility", "visible");
                                    $(".galleria-info-text").fadeIn(800);
                                }
                            }
                            if( n=source.indexOf("Pano/") ) {
                                if(n!==-1) {
                                    $(".galleria-images img").removeClass();
                                    $(".galleria-images img").addClass("panoIMG");
                                    $("#galleria-bigImage-popup").addClass("panoDIV");
                                    $(".galleria-info-title").css("right", "25.8%");
                                    $(".galleria-info-title").css("top", "inherit");
                                    $(".galleria-info").css("top", "73%");
                                    $(".galleria-info").css("display", "block");
                                    $(".galleria-info-title").css("display", "block");
                                    $(".galleria-info-text").css("visibility", "visible");
                                    $(".galleria-info-text").fadeIn(800);
                                }
                            }
                            if( n=source.indexOf("Pano-Tall/") ) {
                                if(n!==-1) {
                                    $(".galleria-images img").removeClass();
                                    $(".galleria-images img").addClass("panoTallIMG");
                                    $("#galleria-bigImage-popup").addClass("panoTallDIV");
                                    $(".galleria-info-title").css("right", "25.8%");
                                    $(".galleria-info-title").css("top", "inherit");
                                    $(".galleria-info").css("top", "84%");
                                    $(".galleria-info").css("display", "block");
                                    $(".galleria-info-title").css("display", "block");
                                    $(".galleria-info-text").css("visibility", "visible");
                                    $(".galleria-info-text").fadeIn(800);
                                }
                            }
                            if( n=source.indexOf("Pano-Vert/") ) {
                                if(n!==-1) {
                                    $(".galleria-images img").removeClass();
                                    $(".galleria-images img").addClass("panoVertIMG");
                                    $("#galleria-bigImage-popup").addClass("panoVertDIV");
                                    $(".galleria-info-title").css("right", "42.1%");
                                    $(".galleria-info-title").css("top", "45%");
                                    $(".galleria-info").css("top", "94%");
                                    $(".galleria-info").css("display", "block");
                                    $(".galleria-info-title").css("display", "block");
                                    $(".galleria-info-text").css("visibility", "visible");
                                    $(".galleria-info-text").fadeIn(800);
                                }
                            }
                            return;
                        }//end while
                    }// end function getSource
                    getSource(thehref);
                    var newSrc = thehref.replace("sized","large"); //change contents of src variable to point to the large images dir.
                    getBigImage(newSrc);  //this function is located in the utils.js file
                    function bigImageResizer(val) {
                        var theA = val;//this works
                        var theImage = $(theA).find('img');//this works
                        var theSource = $(theImage).attr('src');//this works. same as var thehref
                        //how do I get the height of the IMAGE?
                        var winWidth = $(window).width();
                        var imgWidth = $(theImage).width();
                        // var widthToUse = winWidth - imgWidth;
                        // var widthToUse = winWidth * 0.09;
                        //static css
                        $('#bigPopWrap').css('max-width', winWidth);
                        $('#bigPopWrap img').css('max-width', winWidth);
                        while(theSource) {
                            if( n=theSource.indexOf("Vertical/") ) {
                                if(n!==-1) {
                                    //dynamic css
                                    $('#bigPopWrap img').css('margin-left', winWidth*0.25);
                                    $('#bigPopWrap').css('margin', 'auto');
                                    //set some vars..
                                    var OMG = $('#bigPopWrap img').width();
                                    var tipPoint = winWidth*0.68;
                                    //when window is too small to contain full size image
                                    while ( OMG > tipPoint ) {
                                        $('#bigPopWrap img').animate({
                                                marginLeft: '0'
                                        }, 500 );
                                        $('#bigPopWrap img').css('margin-left', '0');
                                        $('#bigPopWrap').animate({
                                                margin: '0'
                                        }, 500 );
                                        $('#bigPopWrap').css('margin', '0');
                                        return;
                                    }
                                    while ( OMG < tipPoint ) {
                                        $('#bigPopWrap img').stop(true);
                                        $('#bigPopWrap img').css('margin-left', winWidth*0.25);
                                        $('#bigPopWrap').stop(true);
                                        $('#bigPopWrap').css('margin', 'auto');
                                        return;
                                    }
                                }
                            }// end vertical
                            if( n=theSource.indexOf("Horizontal/") ) {
                                if(n!==-1) {
                                    //dynamic css
                                    $('#bigPopWrap img').css('margin-left', winWidth*0.1);
                                    $('#bigPopWrap').css('margin', 'auto');
                                    //set some vars..
                                    var OMG = $('#bigPopWrap img').width();
                                    var tipPoint = winWidth*0.83;
                                    //when window is too small to contain full size image
                                    while ( OMG > tipPoint ) {
                                        $('#bigPopWrap img').animate({
                                                marginLeft: '0'
                                        }, 500 );
                                        $('#bigPopWrap img').css('margin-left', '0');
                                        $('#bigPopWrap').animate({
                                                margin: '0'
                                        }, 500 );
                                        $('#bigPopWrap').css('margin', '0');
                                        // $('#bigPopWrap img').stop(true,true);
                                        // $('#bigPopWrap').stop(true,true);
                                        // $('#bigPopWrap img').css('margin-left', '0');
                                        // $('#bigPopWrap').css('margin', '0');
                                        return;
                                    }
                                    while ( OMG < tipPoint ) {
                                        $('#bigPopWrap img').stop(true);
                                        $('#bigPopWrap img').css('margin-left', winWidth*0.1);
                                        $('#bigPopWrap').stop(true);
                                        $('#bigPopWrap').css('margin', 'auto');
                                        return;
                                    }
                                }
                            }// end horizontal
                            if( n=theSource.indexOf("Pano/") ) {
                                if(n!==-1) {
                                    //dynamic css
                                    $('#bigPopWrap img').css('margin-left', winWidth*0.065);
                                    $('#bigPopWrap').css('margin', 'auto');
                                    //set some vars..
                                    var OMG = $('#bigPopWrap img').width();
                                    var tipPoint = winWidth*0.868;
                                    //when window is too small to contain full size image
                                    while ( OMG > tipPoint ) {
                                        $('#bigPopWrap img').animate({
                                                marginLeft: '0'
                                        }, 500 );
                                        $('#bigPopWrap img').css('margin-left', '0');
                                        $('#bigPopWrap').animate({
                                                margin: '0'
                                        }, 500 );
                                        $('#bigPopWrap').css('margin', '0');
                                        return;
                                    }
                                    while ( OMG < tipPoint ) {
                                        $('#bigPopWrap img').stop(true);
                                        $('#bigPopWrap img').css('margin-left', winWidth*0.065);
                                        $('#bigPopWrap').stop(true);
                                        $('#bigPopWrap').css('margin', 'auto');
                                        return;
                                    }
                                }
                            }// end pano
                            if( n=theSource.indexOf("Pano-Tall/") ) {
                                if(n!==-1) {
                                    //dynamic css
                                    $('#bigPopWrap img').css('margin-left', winWidth*0.07);
                                    $('#bigPopWrap').css('margin', 'auto');
                                    //set some vars..
                                    var OMG = $('#bigPopWrap img').width();
                                    var tipPoint = winWidth*0.864;
                                    //when window is too small to contain full size image
                                    while ( OMG > tipPoint ) {
                                        $('#bigPopWrap img').animate({
                                                marginLeft: '0'
                                        }, 500 );
                                        $('#bigPopWrap img').css('margin-left', '0');
                                        $('#bigPopWrap').animate({
                                                margin: '0'
                                        }, 500 );
                                        $('#bigPopWrap').css('margin', '0');
                                        return;
                                    }
                                    while ( OMG < tipPoint ) {
                                        $('#bigPopWrap img').stop(true);
                                        $('#bigPopWrap img').css('margin-left', winWidth*0.07);
                                        $('#bigPopWrap').stop(true);
                                        $('#bigPopWrap').css('margin', 'auto');
                                        return;
                                    }
                                }
                            }// end panotall
                            if( n=theSource.indexOf("Pano-Vert/") ) {
                                if(n!==-1) {
                                    //dynamic css
                                    $('#bigPopWrap img').css('margin-left', winWidth*0.38);
                                    $('#bigPopWrap').css('margin', 'auto');
                                    //set some vars..
                                    var OMG = $('#bigPopWrap img').width();
                                    var tipPoint = winWidth*0.5;
                                    //when window is too small to contain full size image
                                    while ( OMG > tipPoint ) {
                                        $('#bigPopWrap img').animate({
                                                marginLeft: '0'
                                        }, 500 );
                                        $('#bigPopWrap img').css('margin-left', '0');
                                        $('#bigPopWrap').animate({
                                                margin: '0'
                                        }, 500 );
                                        $('#bigPopWrap').css('margin', '0');
                                        return;
                                    }
                                    while ( OMG < tipPoint ) {
                                        $('#bigPopWrap img').stop(true);
                                        $('#bigPopWrap img').css('margin-left', winWidth*0.38);
                                        $('#bigPopWrap').stop(true);
                                        $('#bigPopWrap').css('margin', 'auto');
                                        return;
                                    }
                                }
                            }//end panovert
                            return;
                        }//end while
                    }// end function bigImageResizer

                    bigImageResizer(actualCurrent);
                    $(window).resize(function() {
                        bigImageResizer(actualCurrent);
                    });
                    $('.galleria-images').click(function () {
                        bigImageResizer(actualCurrent);
                    });
                });// end bind Galleria.IMAGE
            }// end extend function(options)
        });
    Galleria.ready(function(options) {
        // this.bind('loadfinish', function(e) {
            // $('.galleria-image').scale();
        // });
        this.bind('image', function(e) {
            this.lazyLoadChunks( 3, 200 );
            // this.scale();
            // $('#galleria').scale();
            // this.joshScale();
            // refreshImage(this);
        }); 
        this.bind('thumbnail', function(e) {
            function thumbResizer() {
                //container height
                var containerHeight = $('.galleria-thumbnails').height();
                $(window).resize(function() {
                    containerHeight = $('.galleria-thumbnails').height();
                });
                //the array
                var thumbIMGS = $('.galleria-thumbnails').find('img');
                //iterate through it
                $.each(
                    thumbIMGS,
                        function( intIndex, objValue ){
                            //thumbnail source
                            var theThumbSource = $(objValue).attr('src').replace('thumbs','sized');
                            // alert(theThumbSource);
                            // var theThumbSource = $(objValue).attr('src');
                            //modify width based on thumbnail source
                            if( n=theThumbSource.indexOf("Pano-Vert/") ) {
                                if(n!==-1) {
                                    // alert('pano-vert');
                                    $(objValue).parent().css('width', '0.175%');
                                }
                            }
                            if( n=theThumbSource.indexOf("Vertical/") ) {
                                if(n!==-1) {
                                    // alert('vert');
                                    $(objValue).parent().css('width', '0.39%');
                                }
                            }
                            if( n=theThumbSource.indexOf("Horizontal/") ) {
                                if(n!==-1) {
                                    // alert('horiz');
                                    $(objValue).parent().css('width', '0.6%');
                                }
                            }
                            if( n=theThumbSource.indexOf("Pano-Tall/") ) {
                                if(n!==-1) {
                                    // alert('pano-tall');
                                    $(objValue).parent().css('width', '0.8%');
                                }
                            }
                            if( n=theThumbSource.indexOf("Pano/") ) {
                                if(n!==-1) {
                                    // alert('pano');
                                    $(objValue).parent().css('width', '1.27%');
                                }
                            }
                    }//end function
                );//end each
            }// end function thumbResizer
            thumbResizer();
        });// end bind 'thumbnail'
        //one solution. breaks scalability
            // this.next();
            // this.prev();
        //another solution. breaks scalability
            // this.show(1);
            // this.show(0);
        //another solution. breaks scalability. what if I force rescale?
            $('.galleria-image-nav-right').click();
            $('.galleria-image-nav-left').click();
            //force rescale
            // this.bind('image', function(d) {
                // // this.lazyLoadChunks( 3, 200 );
                // $(window).resize(function() {
                    // this.scale();
                // });
            // });
        // $('.galleria-image-nav-right').attr('id', 'galleria-image-nav-right');
        // $('.galleria-image-nav-left').attr('id', 'galleria-image-nav-left');
    });// end galleria.ready
    Galleria.run('#galleria',{

    });

哦，如果您想知道，缩略图滚动的问题甚至会出现？上面的功能，thumbresizer是罪魁祸首 - 我们具有在缩略图浏览器中进行的五个不同的图像方向，并且它们都可以同时可见。该功能会缩放它们以适合缩略图容器div的高度

另外，我不使用单独的缩略图，但实际上我实际上是在伪造它，以使Galleria在一个名为" Poop"的文件夹中寻找缩略图，它不存在，它说"哎呀，找不到它"只使用每个缩略图的主图像，缩小。我们这样做是为了打击Galleria的负载时间，因此它立即变得活跃和可单击，而不是灰色且无法处理8分钟，而它一次加载了200个相当大的图像。请不要说："好吧，你不应该这样做！"相信我，我知道。但是，我的雇主没有，也绝对希望这样做。

现在可能写一本书..：）

谢谢！

编辑：忘了提及 - 虽然this.scale（）代码在完成加载后确实可以修复其可伸缩性，但如果单击下一个图像，则根本不会扩展。而且，如果我们根本不称呼this.scale（）（恢复回到主图像的先前问题而不是重新缩放的问题），然后单击下一个图像，它会正确重新缩放。因此，用户点击并单击单击之间似乎存在某种差异。

Answer 1

如果您希望缩略图始终是容器高度的100％，则...

#container img { height: 100%; } 

...将管理该方面，并在样式表中或JavaScript中没有设置宽度，然后将自动确定每个图像的宽度以保持其长宽比。

很好，简单，可以删除几行麻烦的JavaScript。