скрипт изменения размера для галереи - PullRequest
Новая
       11

скрипт изменения размера для галереи

2 голосов
/ 28 февраля 2011

Я хочу изменить размер всего галереи div и изменить размеры всех изображений, динамически генерируемых с помощью скрипта galleria.

пока у меня есть 

    $(window).resize(function() {
    var h = $(window).height();
    var galleriaHeight = h-54;
    var w = $(".content").width();
    var galleriaWidth = w-18;

    $("#galleria").height(galleriaHeight);
    $("#galleria").width(w);


    $(".galleria-stage").height(galleriaHeight);
    $(".galleria-stage").width(galleriaWidth);

    $(".galleria-images .galleria-image img").css({"max-height":"auto"});
    $(".galleria-images .galleria-image img").css({"max-width":galleriaWidth-36});

    $(".galleria-stage").height(galleriaHeight);
    $(".galleria-stage").width(galleriaWidth);

    $(".galleria-container").width(w);
    $(".galleria-container").height(galleriaHeight);

    $(".caption").width(w);
    $(".counter-nav").width(w);

    var sidebarHeight =h-54;
    var contentHeight =h-36;

    $(".sidebar1").height(sidebarHeight);
    $(".content").height(contentHeight);




});

Но все масштабируется неравномерно и очень запутано.Посмотрев на полноэкранный код, я также добавил 

this.bind(Galleria.RESCALE, function() {
 POS = this.getStageHeight() - tab.height() - 2;
 thumbs.css('top', OPEN ? POS - list.outerHeight() + 2 : POS);
 var img = this.getActiveImage();
 if (img) 
     {
     fixCaption(img);
     }
});

, но это тоже не работает ...

Полагаю, я хочу перезагрузить страницу после изменения размера, но на лету.... или изменить размер всех элементов относительно друг друга, или использовать скрипт изменения размера Galleria ...

Есть идеи?

1 Ответ

5 голосов
/ 01 декабря 2011

Я знаю, что это старо, но я нигде не вижу ответа.Надеюсь, это поможет следующему парню.

Это будет динамически изменять размер Galleria при изменении размера окна браузера.

Я столкнулся с похожими проблемами.В итоге я связал следующую функцию с событием изменения размера окна.Я использовал логику для события resize из этого поста

Сначала настройте функцию resize: 

          function ResizeGallery() {

                gWidth = $(window).width();
                gHeight = $(window).height();
                gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
                gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
                $("#gallerycontainer").width(gWidth);
                $("#gallery").width(gWidth);
                $("#gallery").height(gHeight);
   Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
        }

Затем привяжите ее к событию resize окна:1012 * 

   var TO = false;
    $(window).resize(function () {
        if (TO !== false)
            clearTimeout(TO);
        TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
    });

Это будет по существу переинициализироваться путем перезагрузки темы по умолчанию.В этом примере я использую второй параметр, чтобы указать, какое изображение показывать, иначе будет отображаться первое изображение.Имейте в виду, что это может вызвать другой случай Galleria.Я считаю, что это ошибка, и опубликовал на своих форумах .Вы можете удалить более старые экземпляры следующим образом: 

 var gcount = Galleria.get().length;

       if (gcount > 1) {
           Galleria.get().splice(0, gcount - 1);
       }

Запустите его после метода loadTheme.Используйте settimeout, чтобы задержать его, потому что loadTheme занимает некоторое время для завершения.Я использую 200 мс.Ужасно, но мне нужны некоторые функции в Galleria.Надеюсь, это поможет.

...