Перейти к содержимому



Непростое слайдшоу

#1 xalz

xalz
  • Неактивные
  • 29 сообщений
  • Репутация: 4
0

Отправлено 14 Сентябрь 2012 - 09:26

Суть проблемы такова. Делаю интернет магазин. Весь товар с картинками, описанием и превюшками будут на одной странице (пример edasamuraev.ru). И в шапке сайта необходимо организовать сладшоу ВСЕГО товара (не 3-5 картинок, а все). Естественно если загружать все картинки сразу, то это будет огромная нагрузка и на интернет канал и на браузер (последний может вообще потухнуть).
Так вот может кто подскажет как подкрутить ?

В принципе ссылки на полную версию изображения я выдергиваю с помощью jq, а дальше ступор.
$('a[rel]').each(function(i, item) {
var src = $(item).attr('href');
var img = $("<img />", {src: src, height: '250'});
$('#slideshow').html(img);
});
тут получается что все изображения меняются без задержек ( html(img) ).

Подскажите может я вообще не в ту сторону копаю?

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Помощь в настройке JA Slideshow2
  2. Как отредактировать скрипт слайдера под себя
  3. Одно видео вместо 1000 слов. Создаю продающие ролики "под ключ"
  4. Как сделать чтобы работали два слайдера на одной странице независимо
  5. Как в слайдере уменьшить размер слайдов?

#2 xalz

xalz
    Topic Starter
  • Неактивные
  • 29 сообщений
  • Репутация: 4

Отправлено 14 Сентябрь 2012 - 12:54

проблема решена...
  • 0

#3 Sosnovskij

Sosnovskij
  • Администратор
  • 4 592 сообщений
  • Репутация: 693

Отправлено 18 Сентябрь 2012 - 21:11

xalz, в чем была проблема? Возможно, у других пользователей будут похожие проблемы :rolleyes:
  • 0

:excl: Требуется ЛинкБилдер (создание ссылочной массы, 1200-1600 руб в сутки). Блог — http://sosnovskij.ru/.



#4 xalz

xalz
    Topic Starter
  • Неактивные
  • 29 сообщений
  • Репутация: 4

Отправлено 29 Сентябрь 2012 - 09:23

Sosnovskij, в общем я разрабатывал официальный сайт Свадебного салона (счастье-нк.рф).
Как видно на сайте, весь товар находится на одной странице, навигация по категориям осуществляется с помощью веб-якорей. Также фотки на товар грузятся с помощью плагина jquery.lazyload.js, чтобы экономить время и трафик.
У меня оставалась только одна проблема - это поиск плагина слайдшоу, но опять же чтобы в этом слайдшоу картинки грузились не все сразу, а по очереди с интервалом 5-6 секунд. Поискав в сети и перепробовав разные плагины, так и не чего не нашол! Пришлось придумывать костыль, сильно "выделыватся" я не стал, так как время уже поджимало и надо было быстро что-то наклепать.
Выношу на суд, да может что-то и неправильно и не по "Стандарту", но все же все работает и стабильно.

Клиентская часть:
$.slideshow = function() {
var slideshow = $("<div />", {id: "slideshow"});
var a = $("<a />");
var img = $("<img />", {height: '300', width: '600'}).css('display', 'none');
$('#top').each(function() {$(this).prepend(slideshow.clone());});
$('#slideshow').each(function() {$(this).prepend(a.clone())});
$('#slideshow a').each(function() {$(this).prepend(img.clone())});
$.ajax({
type: "POST",
url: "./",
data: {action: 'slideshow'},
dataType: "script",
});}

Тут мы создаем <div> и в нем же создаем пустой тег <a> и <img>. после делаем AJAX запрос к серверу, который выдергивает из MySQL имена картинок, а затем формирует javascript (Здесь конечно же неправильно, но а что поделаешь :D ).

Серверная часть:

<?php
$query = "SELECT * FROM `catalog`";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
{
$c_id[]=$row["id"];
$c_name[]=$row["name"];
$c_img[]=$row["img"];
}
$id=count($c_id);
for ($ip=0; $ip<$id; $ip++)
{
if (!$ip) {
$timeout = 0;
} else {
$timeout = 5000 + $timeout;
}?>
setTimeout(function(){
$('#slideshow a')
.attr('href', '<?=http();?>/product/<?=$c_id[$ip];?>')
.attr('title', '<?=$c_name[$ip];?>')
$('#slideshow img')
.css('display', 'none')
.attr('src', '<?=http();?>/plugins/uploader/files/<?=$c_img[$ip];?>')
.fadeIn('1000');

}, <?=$timeout;?>);

<?}?>

setTimeout(function(){
$.ajax({
type: "POST",
url: "./",
data: {action: 'slideshow'},
dataType: "script",
});
}, <?=$timeout+5000;?>);

<?}?>
После того как все картинки кончились, скрипт опять делает AJAX запрос и все идет по новой.
Да, кто то скажет что нужно это дело кешировать, использовать JSON итд, в общем судить вам.
  • 1


Оформление форума – IPBSkins.ru