Галерея изображений, видимых в зависимости от размера экрана - PullRequest
Новая
       7

Галерея изображений, видимых в зависимости от размера экрана

2 голосов
/ 08 июля 2011

Мне нужно, чтобы галерея фотографий отображалась в 3 рядах, в каждом ряду было показано разное количество изображений. Не все изображения имеют одинаковую ширину. Когда размер экрана изменится, я хочу показать больше изображений, но в том же соотношении (увеличиться до 3/5/4, 4/6/5 и т. Д.). Соотношение должно быть таким (квадратные скобки представляют изображение): 

[][]
[][][][]
[][][]

Визуальный пример здесь.

Он работал частично, за исключением смещения. Я попытался написать цикл смещения, и теперь он не работает вообще. Вот код: 

<script>
jQuery(document).ready(function() {
jQuery('.gallery').wrap('<div class="gal-wrapper" />');
  resizeGallery("#gallery-1",2);
  resizeGallery("#gallery-2",4);
  resizeGallery("#gallery-3",3);
});
jQuery(window).resize(function() {
  resizeGallery("#gallery-1",2);
  resizeGallery("#gallery-2",4);
  resizeGallery("#gallery-3",3);
});

function resizeGallery(gall, initpos){
var x = 0;
var y = 0;
var accum_width = 0;
var final_width = accum_width;
var offset = initpos;
var wW = jQuery(window).width()-jQuery("#nav").width();

while(accum_width < wW){

    var new_width = jQuery(gall).find("img.attachment-medium:eq("+x+")").width();
    if((accum_width + new_width) > wW){
        break;
    }else{
        accum_width += new_width+4;
    }
    x++;
}
/* worked partly to this point... onto the offset! */ 
while(y < offset){
    var subtract_width = jQuery(gall).find("img.attachment-medium:eq("+x+")").width();
    final_width -= subtract_width+4;
    y++;
    x--;
}


jQuery(gall).parent().width(final_width);
}
</script>

Вот пример jsfiddle .

1 Ответ

0 голосов
/ 17 июля 2011

Ваша рабочая JS-скрипка

В случае, если эта скриптовая ссылка не работает ... 

jQuery(document).ready(function() {
    jQuery('.gallery').wrap('<div class="gal-wrapper" />');
    var picCount = resizeGallery("#gallery-2", Number.POSITIVE_INFINITY);
    resizeGallery("#gallery-3", picCount-1);
    resizeGallery("#gallery-1", picCount-2);
});
jQuery(window).resize(function() {
    var picCount = resizeGallery("#gallery-2", Number.POSITIVE_INFINITY);
    resizeGallery("#gallery-3", picCount-1);
    resizeGallery("#gallery-1", picCount-2);
});

function resizeGallery(gall, picCount) {
    var x = 0;
    var y = 0;
    var accum_width = 0;
    var wW = jQuery(window).width() - jQuery("#nav").width();

    while (accum_width < wW && x < picCount) {

        var new_width = jQuery(gall).find("img.attachment-medium:eq(" + x + ")").width();
        if ((accum_width + new_width) > wW) {
            break;
        } else {
            accum_width += new_width + 4;
        }
        x++;
    }

    jQuery(gall).parent().width(accum_width);

    return x;
}
...