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


Выбрать шаблон и создать сайт

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

#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

#2 xalz

xalz
    Topic Starter
  • Пользователь
  • 29 сообщений
  • Репутация: 4

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

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

#3 Sosnovskij

Sosnovskij
  • Администратор
  • 3 883 сообщений
  • Репутация: 565

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

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

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог 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