Megamarket (16 Ноябрь 2012 - 17:26) писал:
Помогите пожалуйста в таком вопросе. Я хотел бы установить данный слайдер в шаблоне пластик, в боковой панели после меню сайта, вроде все делаю по инструкции к нему:
Установка:
На страницах, где будет использован данный скрипт в head вставляйте:
<script type="text/javascript" src="{THEME}/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="{THEME}/css/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
scroll: 2
});
});
</script>
Здесь у нас scroll: 2 - количество пролистываемых изображений при нажатии на стрелку
Следующий код вставляйте в то место, где у вас будет сам слайдер:
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><img src="
http://адрес картинки/1.jpg" width="200" height="200" alt="" /></li>
<li><img src="
http://адрес картинки/2.jpg" width="200" height="200" alt="" /></li>
<li><img src="
http://адрес картинки/3.jpg" width="200" height="200" alt="" /></li>
<li><img src="
http://адрес картинки/4.jpg" width="200" height="200" alt="" /></li>
<li><img src="
http://адрес картинки/5.jpg" width="200" height="200" alt="" /></li>
<li><img src="
http://адрес картинки/6.jpg" width="200" height="200" alt="" /></li>
</ul>
Но при установке выходит просто блок с фото. Подскажите пожалуйста, может кто то сталкивался с такой задачей. Как правильно установить скрипт, что бы он коректно работал. Сккрипт прилагаеться. Заранее спасибо за помощь. Адрес ресурса где он должн быть установлен http://mega-market.biz.ua/
1.закачайте файлы jquery.jcarousel.min.js, skin.css, next-vertical.png, prev-vertical.png через "админку" на Ваш сайт. Для этого зайдите в "Панель управления" -> Сайт -> Редактор тем. Скролим вниз до блока файлов, нажимаем кнопку «добавить файлы». Проверяем закачались ли эти файлы.
2. В редакторе тем открываем файл «HTML». Находим следующий код
<!-- Скрипты магазина -->
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
и после него вставляем
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
scroll: 2
});
});
</script>
2. Панель управления -> Сайт -> Редактор тем -> файл skin.css
найдите строчки
background: transparent url(../images/next-vertical.png) no-repeat 0 0;
background: transparent url(../images/prev-vertical.png) no-repeat 0 0;
и вместо них вставьте соответственно
background: transparent url({ASSETS_IMAGES_PATH}next-vertical.png) no-repeat 0 0;
background: transparent url({ASSETS_IMAGES_PATH}prev-vertical.png) no-repeat 0 0;
3. Следующий код вставляйте в то место, где у вас будет сам слайдер:
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><img src="http://адрес картинки/1.jpg" width="200" height="200" alt="" /></li>
<li><img src="http://адрес картинки/2.jpg" width="200" height="200" alt="" /></li>
<li><img src="http://адрес картинки/3.jpg" width="200" height="200" alt="" /></li>
<li><img src="http://адрес картинки/4.jpg" width="200" height="200" alt="" /></li>
<li><img src="http://адрес картинки/5.jpg" width="200" height="200" alt="" /></li>
<li><img src="http://адрес картинки/6.jpg" width="200" height="200" alt="" /></li>
</ul>
Обратите внимание на путь ваших изображений. После src=" указывайте расположение изображения либо из папки, расположенной на Вашем сайте пример, src="{ASSETS_IMAGES_PATH}1.jpg", либо со стороннего ресурса, пример, src="
http://storeland.ru/...tage_01_wo.jpg"
0
news-1313422151_vertical_slider.rar-1.zip 14,8К
225 Количество загрузок:
