Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.09.2012, 19:42
Интересующийся
Отправить личное сообщение для frutality Посмотреть профиль Найти все сообщения от frutality
 
Регистрация: 30.08.2012
Сообщений: 26

jquery-gp-gallery.js - разное отображение подгружаемых изображений
Здравствуйте.
С загрузкой изображений на сервер разобрался, еще раз спасибо пользователю 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, либо в браузерах (надеюсь, что не в них).

Итак, проблема: подгруженные фотографии в браузерах выглядят ну очень по-разному.
  1. Firefox: все отлично, как задумывалось
  2. Chrome: если ранее какие-то фото не загружались, то при первой загрузке они как будто не подвержены влиянию плагина - выводятся в оригинальном размере (отметил зелеными стрелками). Но если обновить страницу и подгрузить эти фотографии, то они отобразятся нормально! Но следующая партия опять некорректно.
  3. Opera: проблема практически идентична отображению в Хроме, за одним исключением: изображения растягиваются на всю ширину контейнера.

IE даже запускать боюсь

Чуть не забыл. В Opera смотрел код страницы в момент создания скриншота - там для этих кривых изображений явно была задана ширина (width) в стилях! Более 700px, что как раз занимает весь контейнер.

Есть мысли насчет этого? Подходят к концу вторые сутки моих мучений, мне нужна помощь
Изображения:
Тип файла: jpg firefox.jpg (79.6 Кб, 8 просмотров)
Тип файла: jpg chrome.jpg (78.3 Кб, 5 просмотров)
Тип файла: jpg opera.jpg (70.0 Кб, 6 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2012, 18:15
Интересующийся
Отправить личное сообщение для frutality Посмотреть профиль Найти все сообщения от frutality
 
Регистрация: 30.08.2012
Сообщений: 26

Извините за ап темы, но неужели ни у кого нет идей? Проблема так и не решена, я уже в шаге от начала изобретения собственного велосипеда (:
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery Trackbar - Диффиринциальное отображение бегунка шкалы? Kirty jQuery 5 30.09.2011 20:23
Отображение всех значений точек для jquery flot Mutagena jQuery 0 29.04.2011 13:42
Неккоректное отображение jquery меню в Google Chrome и Opera Galyanov Opera, Safari и др. 6 25.01.2011 00:26
замена изображений в jquery при наведении zlokiz jQuery 0 05.08.2010 22:17
JQuery + Ajax = загрузка изображений jokerbot jQuery 0 06.12.2009 15:10