Здравствуйте.
С
загрузкой изображений на сервер разобрался, еще раз спасибо пользователю
Serg_pnz.
Настало время изображения красиво выводить
Очень недолгие поиски привели меня к плагину
jquery-gp-gallery - его возможности включают в себя все то, что я хотел (если очень вкратце - вывод фотографий "как в гугл плюс").
Все было замечательно, пока я не стал подгружать фотографии на страницу с помощью AJAX.
Итак, имеем HTML:
<div class='pictures'>
<a href='/uploads/2012/99.jpg'><img src='/uploads/2012/thumbs/99.jpg'></a>
<a href='/uploads/2012/98.jpg'><img src='/uploads/2012/thumbs/98.jpg'></a>
<a href='/uploads/2012/97.jpg'><img src='/uploads/2012/thumbs/97.jpg'></a>
<div class='clear'></div>
</div>
<div>
<a href='#' id='morephoto' onclick='return false;'>+ Показать еще фотографии</a>
</div>
div.pictures - контейнер с фотографиями. Он имеет ограниченную ширину (width), изображения не выходят за его границы.
Внутри находятся, собственно, сами изображения в контейнерах-ссылках. Ничего примечательного, для работы плагина даже не требуется помечать их каким-либо классом.
Также, внутри, после списка изображений находится div.clear, необходимый плагину для красивого отображения фотографий.
Следующий div со ссылкой a#morephoto - уже мой. Клик по ссылке отлавливается в коде и, как уже понятно, на сервер отсылается запрос на загрузку фотографий.
$('#morephoto').click(function() {
$.ajax({
url:'ajax.php', type:'POST', data:'offset=' + galleryOffset + '&photocount=' + galleryAjaxPhotoCountLoad, success: function(data, textStatus) {
$('.clear').before(data);
$('.pictures a img').removeAttr('style'); // без этого плагин начинает после ~5-ой подгрузки картинок отображать их так, будто контейнер стал более узким (на деле это не так)
$('.pictures').gpGallery('a'); // собственно, "включаем" красивое отображение для подгруженных фотографий
galleryOffset += galleryAjaxPhotoCountLoad; // не обращайте внимания; всего лишь указание с какой фотографии подгружать по следующему ajax-запросу
}
});
});
В переменную data отдается просто html-код со следующими фотографиями (код аналогичен HTML-коду выше).
Я проверял Firebug'ом на каждом шаге, в html-коде не появляется ничего лишнего. Впрочем, думаю, моя проблема либо в плагине, либо в jQuery, либо в браузерах (надеюсь, что не в них).
Итак, проблема: подгруженные фотографии в браузерах выглядят ну очень по-разному.
- Firefox: все отлично, как задумывалось
- Chrome: если ранее какие-то фото не загружались, то при первой загрузке они как будто не подвержены влиянию плагина - выводятся в оригинальном размере (отметил зелеными стрелками). Но если обновить страницу и подгрузить эти фотографии, то они отобразятся нормально! Но следующая партия опять некорректно.
- Opera: проблема практически идентична отображению в Хроме, за одним исключением: изображения растягиваются на всю ширину контейнера.
IE даже запускать боюсь
Чуть не забыл. В Opera смотрел код страницы в момент создания скриншота - там для этих кривых изображений явно была задана ширина (width) в стилях! Более 700px, что как раз занимает весь контейнер.
Есть мысли насчет этого? Подходят к концу вторые сутки моих мучений, мне нужна помощь
