Слайдшоу вместо логотипа

[mak]

хочу сразу попросить ногами сильно не пинать.


скорее всего вопрос о том, как сделать так, чтобы вместо статичной картинки логотипа магазина крутилось слайдшоу, у зубров престы вызовет смех. у меня этот вопрос вызывает нервный тик... и если так и дальше пойдет - недалеко до полного съезжания крыши.


смотрел модуль Akila Home Slideshow (отсюда http://dgcraft.free.fr/blog/index.php/free-prestashop-modules/akila-home-slideshow/) - очень понравился, но он становится вместо редактора главной страницы в модулях и отображается совсем не там, где хотелось бы. а заставить его стать в нужное место я так и не смог. Итог - все хорошо, но не то и не там.


еще больше понравились решения на jQuery (отсюда - http://tobia.github.com/CrossSlide/ ), причем в самом простом его исполнении "Static cross-fade". но понять, как его прикрутить, я так и не смог.


Люди добрые, не дайте погибнуть идее, помогите кто чем может...


Учитывая, что я, как и все нынешние зубры Престы когда-то давно, зеленый новичок, прошу объяснить "как для даунов".

[alkostar]

тоже с удовольствием узнаю про это)

[mak]

.

[mak]

.

[mak]

тоже с удовольствием узнаю про это)

к сожалению не только вы... только помошников меньше чем мало. ну да ладно. если какому-то очень крупному специалисту трудно ответить, будем ковырять сами. что еще остается...

но мне не жалко, делюсь тем, в чем пока разобрался. конечно, не Америку открыл, но, возможно, кого-то и это наведет на правильную мысль.

итак.

здесь http://www.ruseller.com/adds.php?rub=12&id=1680 лежит все необходимое для нужного нам дела. по ссылке можно стянуть скрипты, примеры и даже небольшой видеоролик, в котором один очень хороший человек, коорому не лень было тратить время, просто и доступно объясняет, что и как надо делать. за одним небольшим исключением: все это дается для случая простого ХТМЛа.
у нас задачка поинтереснее, как говорится, нам предстоит впихнуть невпихуемое.

скрипты jquery-1.3.2.min.js и jquery.cross-slide.js копируем в папку js/jquery/ в корневом каталоге.
затем идем в папку с темами.
находим в корневом каталоге нашей темы файлик header.tpl он-то нам и понадобится (как мне кажется)
открываем его и внимательно изучаем.
вначале будет много всякого текста, который нам не сильно пока инетересен.
где-то с 20-й строки (у меня так, у вас может быть иначе) начинаются строки подключения внешних библиотек скриптов, которые выглядят приблизительно так:

<script type="text/javascript" src="ххххххххххххххххххх[b].js[/b]"></script>
<script type="text/javascript" src="хххххххххххххххххххххххх[b].js[/b]"></script>

таких строк будет несколько и идут они обычно одним блоком. вот после них мы и добавляем следующее:

<script type="text/javascript" src="{$content_dir}js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="{$content_dir}js/jquery/jquery.cross-slide.js"></script>

так мы подключили библиотеки (в видео не только это описано, но и показано)

теперь нам нужно определить место, где же мы хотим видеть то, ради чего все это затеяли.

итак, если мы хотим, чтобы слайдшоу крутилось вместо статичного лого сайта, то здесь же, в header.tpl находим строку вида

<h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>

это и есть вывод логотипа. когда мы сделаем то, что нам нужно, ее можно будет удалить. ну а пока ориентируемся по ней, но ее не трогаем.

прямо перед этой строкой пишем

<div id="slideshow">Загружаю…</div>

id="slideshow" здесь и есть вызов (читай "запуск на выполнение") функции слайдшоу

теперь отвлечемся немного от файла header.tpl , но не закрываем его.

[mak]

мы подключили библиотеки, ткнули в место, где должно все отображаться, теперь нужно определить, как будет выглядеть то самое место, в котором будет отображать слайдшоу. проще говоря - назначить стиль.

В паке CSS темы находим файлик global.css . Открываем его и ищем строку вида

#page {

и прямо перед ней добавляем определение нового стиля

#slideshow {
   margin: 1em auto;
   border: 2px solid #555;
   width: 550px;
   height: 344px;
}

все со стилем понятно, как и со всеми его параметрами, поэтому global.css сохраняем и закрываем.
копируем из примера папку с картинками images/ в корневой каталог сайта

Возвращаемся к header.tpl

библиотеки, стили, точка вызова, картинки... все определено. кроме, собственно, самой функции.

вот с этого места у меня грабли

сам код функции выглядит так

<script type="text/javascript">
 $(function() {
$('#slideshow').crossSlide({
 sleep: 2,
 fade: 1
}, [
 { src: '{$content_dir}images/3.jpg' },
 { src: '{$content_dir}images/8.jpg' },
 { src: '{$content_dir}images/9.jpg' },
 { src: '{$content_dir}images/11.jpg'}
]);

     });
</script>

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

<script type="text/javascript" src="{$content_dir}js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="{$content_dir}js/jquery/jquery.cross-slide.js"></script>

<script type="text/javascript">
 $(function() {
$('#slideshow').crossSlide({
 sleep: 2,
 fade: 1
}, [
 { src: '{$content_dir}images/3.jpg' },
 { src: '{$content_dir}images/8.jpg' },
 { src: '{$content_dir}images/9.jpg' },
 { src: '{$content_dir}images/11.jpg'}
]);

     }); </script>

сохраняем файлик и смотрим, что вышло.

у меня после всего этого безобразия сайт не запустился.

убираем функцию, - работает.
вывод: где-то не в том месте мы функцию определили.
идея, которая возникает сходу: если функции и подфункции нормально вызываются из скриптов библиотек, то что нам мешает создать еще одну и вызвать нашу оттуда? вроде ничего.

создаем в редакторе файлик (для простоты дальнейшего определения) с именем jquery.cross-slide-run.js

в нем пишем следующее

  $(function() {
$('#slideshow').crossSlide({
 sleep: 2,
 fade: 1
}, [
 { src: '{$content_dir}images/3.jpg' },
 { src: '{$content_dir}images/8.jpg' },
 { src: '{$content_dir}images/9.jpg' },
 { src: '{$content_dir}images/11.jpg'}
]);

     });

и сохраняем.

запускаем сайт и смотрим, что вышло.

ошибки не произошло, над логотипом появился прямоугольник (описаный в стилевом файле), и в нем написано "Загружаем..."
и все.

т.е. ошибки не произошло, но и запуска функции тоже.

пока остановился на этом. буду рыть дальше.

а если все же кто-то посочуствует и укажет на ошибку - буду премного благодарен.

[kazakh-woman]

адрес отправьте, по которому эксперементируете.
Скорее всего, проблема с путями и двойным подключением jquery. Ошибки.

А вообще через модули это можно также сделать. Модуль, который Вы взяли за основу отпозиционировать в hookheader после установки. А потом с помощью css его прибить, куда надо.