JQuery или PHP бесшовная галерея изображений - PullRequest
Новая
       17

JQuery или PHP бесшовная галерея изображений

2 голосов
/ 05 марта 2012

Я ищу способ отображения галереи изображений различной ширины и высоты, чтобы между ними не было пробелов.

Что-то вроде этого решения, но совместимо с IE и предпочло бы горизонтальноестроки, а не вертикальные столбцы: http://css -tricks.com / seamless-responseive-photo-grid /

Если плагин или подобное отсутствует, есть ли у кого-нибудь информация о том, как этого добиться??Я использовал bash с небольшим количеством PHP и выяснил, как пропорционально масштабировать изображения до заданной максимальной высоты строки и отслеживать, сколько места осталось, однако это не помогает, когда вы получаете изображения короче, чеммакс (вы все еще получаете немного пробела).

Одна идея состояла в том, чтобы просто отобразить изображения, а затем использовать jQuery для их масштабирования (используя атрибуты ширины / высоты) так, как я мог бывозьмите y изображений и выясните, как разместить их в ряд шириной x пикселей.

Не хватает локоть-смазки, просто нужно подтолкнуть в правильном направлении.Любая помощь приветствуется

Ответы [ 2 ]

1 голос
/ 06 марта 2012

Я уже некоторое время пытаюсь получить то, что вы хотите.Я также посмотрел на бесшовную сетку фотографий Криса Койера и столкнулся с некоторыми проблемами, когда я ввел фильтрацию.

Вы можете увидеть мои вопросы / ответы по stackoverflow относительно css-column бесшовных сеток фотографий здесь и здесь .

Затем я попробовал подход javascript, используя jQuery Masnory в жидкой среде.Вы можете прочитать о том, как это сделать, в этом сообщении stackoverflow .

Это работает, но я все еще пытаюсь выяснить, почему между изображениями есть вертикальные промежутки.

Так что мой ответ - , чтобы использовать Masonry, если вы хотите использовать JavaScript-подход, но также помните, что я никогда не видел его бесшовной и отзывчивой реализации его фотографий,Я все еще смотрю.

1 голос
/ 05 марта 2012

Хорошо, поэтому, во-первых, вы, вероятно, должны мысленно пометить пространство в сетке. Итак, ваш «холст» имеет ширину x единиц и высоту y единиц. Теперь присвойте изображения структуре, которая содержит начальную точку x, y и количество широких и высоких единиц измерения.

Теперь самое интересное - как выполнить Используя php, я бы создал массив типа 

$images = array( array(x1_1, y1_1, length_1, width_1, src_1)
                     array(x1_2, y1_2, length_2, width_2, src_2))

Это расскажет вам все о ваших фотографиях, которые вам нужно знать, чтобы распечатать их на экране. 

echo "<div id=\"myDiv\">;
foreach($images as $i){
    echo "<img src=\"{$i[5]}\" height=\"{$i[3]}\" width=\"{$i[4]}\" x1=\"{$i[0]}\ y1=\"{$i[1]}\">";
echo "</div>";

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

$(document).ready(function(){
    var scale = 30; //30 pixels maybe?
    //I'm not a jquery ninja, so please assume my syntax is wrong
    $("#myDiv").children().each(function(){
        this.attr("height", this.attr("height")*scale);
        this.attr("width", this.attr("width")*scale);
    });

})

Теперь разместите изображение в нужном месте, основываясь на свойствах x1 и y1 

$(document).ready(function(){
    var scale = 30; //30 pixels maybe?
    //I'm not a jquery ninja, so please assume my syntax is wrong
    $("#myDiv").children().each(function(){
        this.css('property', value);
    });

})
...