Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Загрузка изображений по мере прокрутки сладйера

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Без описания
Поиск в теме | Версия для печати
GEN_18
Отправлено: 28 Января, 2014 - 08:40:02
Post Id



Частый гость


Покинул форум
Сообщений всего: 184
Дата рег-ции: Янв. 2012  


Помог: 0 раз(а)
Есть слайдер фотографий на подобие http://grandreport[dot]ru/reportage/ , где крутится около 300 фотографий.
Чтоб увеличить скорость загрузки сайта, решил применить плагин lazyload.
Но он работает только при вертикальной прокрутки страницы. При горизонтальной прокрутке фотографий он не работает...
Вот маюсь все, как такое можно сделать...чтоб фотографии загружались по мере скроллинга в ту, или иную сторону по горизонтали, а не по вертикали ?

единственное, что я могу придумать - это заставить браузер принимать горизонтальный скролл в <div> за вертикальный, тока как это сделать я не знаю

(Отредактировано автором: 28 Января, 2014 - 09:35:06)



-----
Еще вечера сегодня было завтра.
 
 Top
IllusionMH
Отправлено: 28 Января, 2014 - 16:49:26
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
GEN_18, если я правильно загуглил(хотя судя по исходникам я правильно загуглил), то актуальная версия плагина поддерживает горизонтальную прокрутку.
http://www[dot]appelsiini[dot]net/projec[dot][dot][dot]e_container[dot]html
 
 Top
GEN_18
Отправлено: 28 Января, 2014 - 19:40:44
Post Id



Частый гость


Покинул форум
Сообщений всего: 184
Дата рег-ции: Янв. 2012  


Помог: 0 раз(а)
IllusionMH
на это и я натыкался....и даже применял
проблема в том, что первые то изображения показываются, а вот остальные, при прокрутке - нет, за место них выводится серый фон, который должен сменяться изображением, но не сменяется


-----
Еще вечера сегодня было завтра.
 
 Top
IllusionMH
Отправлено: 28 Января, 2014 - 21:30:08
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
GEN_18, там рабочий пример по ссылке. Ищите чем отличается ваш.
Вот сел и накатал рабочий пример http://jsfiddle[dot]net/IllusionMH/3Skbp/
Так же нужно обратить внимание на
Цитата:
PRO TIP! You must set image dimensions either as width and height attributes or in CSS. Otherwise plugin might not work properly.
 
 Top
GEN_18
Отправлено: 28 Января, 2014 - 22:31:49
Post Id



Частый гость


Покинул форум
Сообщений всего: 184
Дата рег-ции: Янв. 2012  


Помог: 0 раз(а)
IllusionMH
да, вижу, работает, у меня сделано, как я считаю - так же, но не работает как надо мой пример
если в стилях прописываю overflow-x: scroll; и overflow-y: hidden; то слайдер становится размеров дива, и работает тока при ручном перетаскивании ползунка


-----
Еще вечера сегодня было завтра.
 
 Top
IllusionMH
Отправлено: 29 Января, 2014 - 02:03:13
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
GEN_18, попробуйте не отрицательное смещение влево задавать, а прокрутку по оси X. Если не поможет еще и $('.gallery').trigger('scroll'); или другой элемент который должен быть контейнером.
 
 Top
GEN_18
Отправлено: 29 Января, 2014 - 07:52:15
Post Id



Частый гость


Покинул форум
Сообщений всего: 184
Дата рег-ции: Янв. 2012  


Помог: 0 раз(а)
IllusionMH, прокрутку по оси Х не получилось сделать. слайдер просто встает
я так понимаю что за скрол отвечают вот эти функции:
CODE (javascript):
скопировать код в буфер обмена
  1. function slideto(x)
  2. {
  3. arrowsstate(window.sliderwidth > 950 && x > 0, window.sliderwidth > 950 && x < (window.sliderwidth - 950));
  4. jQuery(".gallery .list").css({left: -x});
  5. jQuery(".slider .position").css({left: 15 + Math.round(906 * x / (window.sliderwidth - 950))});
  6. }
  7. /**/
  8. function animateto(x, duration)
  9. {
  10. var slider_move = !arguments[2];
  11. jQuery(".gallery .list").animate({left: [-x, "easeOutQuint"]}, {duration: duration * 4, step: function(currentLeft) {
  12.         if (slider_move)
  13.         jQuery(".slider .position").css({left: 15 + Math.round(-906 * currentLeft / (window.sliderwidth - 950))});
  14.         arrowsstate(window.sliderwidth > 950 && -currentLeft > 3, window.sliderwidth > 950 && -currentLeft < (window.sliderwidth - 958));
  15.         }});
  16. }
  17. /**/
  18. jQuery(".gallery .list").bind("mousewheel", function(event, delta) {
  19.         jQuery(".gallery .list").stop(true, false);
  20.         var currentx = parseInt(jQuery(".gallery .list").css("left").replace(/(pt|px|auto)$/, ''));
  21.         if (isNaN(currentx)) currentx = 0;
  22.         else currentx = -currentx;
  23.         if ((currentx <= 0 && delta > 0) || (currentx >= window.sliderwidth - 950 && delta < 0))
  24.         return true;
  25.         currentx -= 300 * delta;
  26.         if (currentx < 0) currentx = 0;
  27.         else if (currentx > window.sliderwidth - 950) currentx = window.sliderwidth - 950;
  28.         animateto(currentx, 150);
  29.         return false;
  30. });

В них я заменил вместо left - overflow-x, но ничего не вышло, скорее всего я не правильно заменил


-----
Еще вечера сегодня было завтра.
 
 Top
imya
Отправлено: 29 Января, 2014 - 08:43:11
Post Id



Участник


Покинул форум
Сообщений всего: 1472
Дата рег-ции: Сент. 2012  
Откуда: Запорожье, Украина


Помог: 19 раз(а)
GEN_18, запустил ваш пример сейчас - работает всё, фотографии подгружаются Улыбка


-----
PHP:
скопировать код в буфер обмена
  1. do {box != cat;} while (cat != box);


Когда нормальный человек, уезжая из дома одевает на жену пояс верности, веб-дизайнер ставит на нее счетчик...
 
My status
 Top
GEN_18
Отправлено: 29 Января, 2014 - 08:46:24
Post Id



Частый гость


Покинул форум
Сообщений всего: 184
Дата рег-ции: Янв. 2012  


Помог: 0 раз(а)
imya, правильно, это первоначальный вариант, который меня не устраивает, т.к. страница долго грузиться. изображения подгружаются все разом, а не по мере прокрутки, как я хочу и пытаюсь сделать.

ПыСы сейчас сделаю чтоб не подгружались

ПыСы делал так, чтоб изображения весили примерно 50Кб, но тогда у них качество серьезно падает, что не приемлемо для фотогаллереи

(Отредактировано автором: 29 Января, 2014 - 08:49:39)



-----
Еще вечера сегодня было завтра.
 
 Top
imya
Отправлено: 29 Января, 2014 - 09:01:26
Post Id



Участник


Покинул форум
Сообщений всего: 1472
Дата рег-ции: Сент. 2012  
Откуда: Запорожье, Украина


Помог: 19 раз(а)
А, вот сейчас серый фон после первый 2-х изображений, да Недовольство, огорчение

Прошу прощения, что ввёл в заблуждение.

(Отредактировано автором: 29 Января, 2014 - 09:01:40)



-----
PHP:
скопировать код в буфер обмена
  1. do {box != cat;} while (cat != box);


Когда нормальный человек, уезжая из дома одевает на жену пояс верности, веб-дизайнер ставит на нее счетчик...
 
My status
 Top
GEN_18
Отправлено: 29 Января, 2014 - 09:08:49
Post Id



Частый гость


Покинул форум
Сообщений всего: 184
Дата рег-ции: Янв. 2012  


Помог: 0 раз(а)
imya, вот, и я никак не могу сделать, чтоб этот фон сменялся на картинку

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

(Отредактировано автором: 29 Января, 2014 - 09:24:45)



-----
Еще вечера сегодня было завтра.
 
 Top
IllusionMH
Отправлено: 29 Января, 2014 - 09:36:32
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
GEN_18, прежде чем говорить, что код такой как и в примерах, потрудитесь объяснить где указан контейнер? Прям как в примере с горизонтальным скролом указано что нужно обозначить контейнер.
 
 Top
GEN_18
Отправлено: 29 Января, 2014 - 10:08:50
Post Id



Частый гость


Покинул форум
Сообщений всего: 184
Дата рег-ции: Янв. 2012  


Помог: 0 раз(а)
IllusionMH, я указывал контейнер, результат указания можно увидеть и сейчас


-----
Еще вечера сегодня было завтра.
 
 Top
IllusionMH
Отправлено: 29 Января, 2014 - 10:49:12
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
GEN_18, тогда помогайте себе сами, если не хотите делать как в документации.
CODE (javascript):
скопировать код в буфер обмена
  1. $("img").lazyload({
  2.   failurelimit : 20,
  3.   threshold : 200,
  4.   placeholder : "/js/grey.gif",
  5.   effect : "fadeIn"
  6. });

Нет контейнера - не должен он и работать.

P.S. jQuery 1.5.1. Серьезно?
(Добавление)
IllusionMH пишет:
Если не поможет еще и $('.gallery').trigger('scroll'); или другой элемент который должен быть контейнером.

Догадайтесь на какой элемент вешать, и на свою прокрутку повесьте это событие.
 
 Top
armancho7777777 Супермодератор
Отправлено: 29 Января, 2014 - 10:56:13
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
GEN_18 пишет:
делал так, чтоб изображения весили примерно 50Кб, но тогда у них качество серьезно падает, что не приемлемо для фотогаллереи

Используйте прогрессивный JPEG как в google-картинках.
PHP:
скопировать код в буфер обмена
  1. $image = imagecreatefromjpeg('image.jpg');
  2. imageinterlace($image, true); // <--
  3. header('Content-Type: image/jpeg');
  4. imagejpeg($image, NULL, 100);
 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB