Помогите Поставить Слайдер Интересных Предложений
#1
Отправлено 25 Ноябрь 2012 - 18:56
Слайдер называется Easy Slider 1.7
#2
Отправлено 26 Ноябрь 2012 - 12:28
В любом случае, чтобы ее установить, скачайте исходники и загрузите все файлы из архива формата js, css и, возможно там еще будут какие-либо изображения. Напишите какой все же Вы выбрали слайдер, и мы напишем инструкцию установки именно для него
#3
Отправлено 26 Ноябрь 2012 - 20:50
#4
Отправлено 26 Ноябрь 2012 - 22:03
1) Скачать архив http://baijs.nl/tiny...sel/example.zip
2) Извлечь все файлы в архиве и закачать файлы website.css, jquery.tinycarousel.min.js, buttons.png в разделе редактора тем.
3) В шаблоне "HTML" перед строкой
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
вставить
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}website.css" type="text/css" /> <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.tinycarousel.min.js"></script>
Далее в шаблоне "HTML" найти
<!-- Список товаров на главной --> {% IFNOT index_page_goods_empty %} <h3>Интересные предложения</h3> <table> <tr> {% FOR index_page_goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll"> <div class="goodsListItemImage"><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></div> <h3 class="goodsListItemName"><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3> <a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a> {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> </td> {% IFNOT index_page_goods.last %}{index_page_goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %} {% ENDFOR index_page_goods %} </tr> </table> {% ENDIF %} <!-- end Список товаров на главной -->
и заменить на
<!-- Список товаров на главной --> {% IFNOT index_page_goods_empty %} <h3>Интересные предложения</h3> <div id="slider-code"> <a class="buttons prev" href="#">left</a> <div class="viewport"> <ul class="overview"> {% FOR index_page_goods %} <li><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></li> {% ENDFOR index_page_goods %} </ul> </div> <a class="buttons next" href="#">right</a> </div> {% ENDIF %} <!-- end Список товаров на главной -->
Далее в файле main.js после строки
$(document).ready(function(){
вставьте
$('#slider-code').tinycarousel({ display: 2 });
После данных изменений на вашем сайте должен появиться слайдер из 3х товаров из раздела "Товары на главной".
#5
Отправлено 26 Ноябрь 2012 - 23:31
Vaccina (26 Ноябрь 2012 - 22:03) писал:
1) Скачать архив http://baijs.nl/tiny...sel/example.zip
2) Извлечь все файлы в архиве и закачать файлы website.css, jquery.tinycarousel.min.js, buttons.png в разделе редактора тем.
3) В шаблоне "HTML" перед строкой
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
вставить
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}website.css" type="text/css" /> <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.tinycarousel.min.js"></script>
Далее в шаблоне "HTML" найти
<!-- Список товаров на главной --> {% IFNOT index_page_goods_empty %} <h3>Интересные предложения</h3> <table> <tr> {% FOR index_page_goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll"> <div class="goodsListItemImage"><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></div> <h3 class="goodsListItemName"><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3> <a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a> {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> </td> {% IFNOT index_page_goods.last %}{index_page_goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %} {% ENDFOR index_page_goods %} </tr> </table> {% ENDIF %} <!-- end Список товаров на главной -->
и заменить на
<!-- Список товаров на главной --> {% IFNOT index_page_goods_empty %} <h3>Интересные предложения</h3> <div id="slider-code"> <a class="buttons prev" href="#">left</a> <div class="viewport"> <ul class="overview"> {% FOR index_page_goods %} <li><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></li> {% ENDFOR index_page_goods %} </ul> </div> <a class="buttons next" href="#">right</a> </div> {% ENDIF %} <!-- end Список товаров на главной -->
Далее в файле main.js после строки
$(document).ready(function(){
вставьте
$('#slider-code').tinycarousel({ display: 2 });
После данных изменений на вашем сайте должен появиться слайдер из 3х товаров из раздела "Товары на главной".
#6
Отправлено 27 Ноябрь 2012 - 00:31
ALEXp (26 Ноябрь 2012 - 23:31) писал:
Пока пробовал настроить, в нете нашёл вот такую карусель. Помогите поставить вот эту (см. скрин) называется новостная вот ссылка http://followdesign....y-chast-1.html. Только вместо новости должны стоять товары, как и на витрине: фото, название, цена, кнопка "КУПИТЬ".
НУ, ПОЖАЛУЙСТА.
СПАСИБО.
#7
Отправлено 27 Ноябрь 2012 - 16:34
Если хотите это исправить то можете добавить код в файл main.csstemplate (Сайт-> Редактор тем).
#content {width: 960px;margin: 0 auto;}Теперь приступим к установке карусели.
Почти все действия нужно производить в панели администратора. Сайт -> Редактор тем.
Загрузить и распаковать архив себе на компьютер.
Содержимое архива нужно загрузить на сайт.
Теперь подключим загруженные css и js файлы к сайту.
Открыть файл HTML.
После кода:
<!-- Скрипты магазина --> <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>Добавить:
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js"></script> <link rel="stylesheet" href="{ASSETS_STYLES_PATH}carousel.css" type="text/css" />
В этом же файле. До кода:
{BODY}Добавить:
{% IF index_page %} <script type="text/javascript"> jQuery(document).ready(function() { // Initialise the first and second carousel by class selector. // Note that they use both the same configuration options (none in this case). jQuery('.d-carousel .carousel').jcarousel({ scroll: 1 }); }); </script> <!-- Begin Wrapper --> <div id="wrapper"> <div class="d-carousel"> <ul class="carousel"> {% FOR index_page_new_goods %} <li> <a href="#"><img src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_new_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a> <h4><a href="{index_page_new_goods.URL}">{index_page_new_goods.NAME}</a></h4> <p>{index_page_new_goods.DESCRIPTION_SHORT}</p> </li> {% ENDFOR index_page_new_goods %} </ul> </div> <div class="clear"></div> </div> <!-- End Wrapper --> {% ENDIF %}
В этой карусели будут выводиться товары из категории "Новинки" только на главной странице.
Для того, чтобы у выводилась цена, найдите в блоке карусели строчку
<p>{index_page_new_goods.DESCRIPTION_SHORT}</p>
замените ее на
<p> <a href="{index_page_new_goods.URL_MIN_PRICE_NOW}">{index_page_new_goods.MIN_PRICE_NOW | money_format}</a> {% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_new_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_new_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_new_goods.MIN_PRICE_OLD | money_format}</a></p>
Прикрепленные файлы
#8
Отправлено 27 Ноябрь 2012 - 17:07
Реально сделать по 4 штуки в списке, и что бы размер был меньше как на фото сделал, и можно ли такое сделать к другим группам ?
Чуть не забыл, можно ли как то по середине этого слайда сделать свою надпись, к примеру Новое, Интересное и т.д.
#9
Отправлено 27 Ноябрь 2012 - 17:42
Jerek (27 Ноябрь 2012 - 17:07) писал:
Реально сделать по 4 штуки в списке, и что бы размер был меньше как на фото сделал, и можно ли такое сделать к другим группам ?
Чуть не забыл, можно ли как то по середине этого слайда сделать свою надпись, к примеру Новое, Интересное и т.д.
Вам уже не нужно другую галерею делать?
#10
Отправлено 27 Ноябрь 2012 - 17:46
support 2.0 (27 Ноябрь 2012 - 17:42) писал:
#11
Отправлено 27 Ноябрь 2012 - 23:46
Koderhan (27 Ноябрь 2012 - 16:34) писал:
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>Добавить:
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js">В этом же файле. После кода:
Добавить:
{% IF index_page %} <script type="text/javascript">jQuery(document).ready(function() {// Initialise the first and second carousel by class selector.// Note that they use both the same configuration options (none in this case).jQuery('.d-carousel .carousel').jcarousel({ scroll: 1});}); [list] {% FOR index_page_new_goods %}[*][url="#"][img]{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_new_goods.IMAGE_SMALL}{% ENDIF %}[/img][/url] [b] [url="{index_page_new_goods.URL}"]{index_page_new_goods.NAME}[/url][/b] {index_page_new_goods.DESCRIPTION_SHORT} {% ENDFOR index_page_new_goods %} [/list] {% ENDIF %}ScreenShot 153.jpgВ этой карусели будут выводиться товары из категории "Новинки" только на главной странице.
{% IF index_page %} <script type="text/javascript"> jQuery(document).ready(function() { // Initialise the first and second carousel by class selector. // Note that they use both the same configuration options (none in this case). jQuery('.d-carousel .carousel').jcarousel({ scroll: 1 }); }); {% IFNOT index_page_goods_empty %} [b] Интересные предложения[/b] [list] {% FOR index_page_goods %}[*] [url="{index_page_goods.URL}"][img]{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}[/img][/url] [b] [url="{index_page_goods.URL}"]{index_page_goods.NAME}[/url][/b] [url="{index_page_goods.URL_MIN_PRICE_NOW}"]{index_page_goods.MIN_PRICE_NOW | money_format}[/url] {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} [url="{index_page_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}"]{index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}[/url] {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} [url="{index_page_goods.URL_MIN_PRICE_OLD}"]{index_page_goods.MIN_PRICE_OLD | money_format}[/url] {% ENDIF %}{% IFNOT index_page_goods.last %}{index_page_goods.index | is_divided("100"," [/list] ","")}{% ENDIF %} {% ENDFOR index_page_goods %} {% ENDIF %} {% ENDIF %}
#12
Отправлено 27 Ноябрь 2012 - 23:54
Koderhan (27 Ноябрь 2012 - 16:34) писал:
Если хотите это исправить то можете добавить код в файл main.csstemplate (Сайт-> Редактор тем).
#content {width: 960px;margin: 0 auto;}Теперь приступим к установке карусели.
Почти все действия нужно производить в панели администратора. Сайт -> Редактор тем.
Загрузить и распаковать архив себе на компьютер.
horizantal-carousel-news.zip
Содержимое архива нужно загрузить на сайт.
ScreenShot 152.jpg
Теперь подключим загруженные css и js файлы к сайту.
Открыть файл HTML.
После кода:
<!-- Скрипты магазина --> <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>Добавить:
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js"></script> <link rel="stylesheet" href="{ASSETS_STYLES_PATH}carousel.css" type="text/css" />
В этом же файле. После кода:
</div> </td> <td id="primaryContent">Добавить:
{% IF index_page %} <script type="text/javascript"> jQuery(document).ready(function() { // Initialise the first and second carousel by class selector. // Note that they use both the same configuration options (none in this case). jQuery('.d-carousel .carousel').jcarousel({ scroll: 1 }); }); </script> <!-- Begin Wrapper --> <div id="wrapper"> <div class="d-carousel"> <ul class="carousel"> {% FOR index_page_new_goods %} <li> <a href="#"><img src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_new_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a> <h4><a href="{index_page_new_goods.URL}">{index_page_new_goods.NAME}</a></h4> <p>{index_page_new_goods.DESCRIPTION_SHORT}</p> </li> {% ENDFOR index_page_new_goods %} </ul> </div> <div class="clear"></div> </div> <!-- End Wrapper --> {% ENDIF %}ScreenShot 153.jpg
В этой карусели будут выводиться товары из категории "Новинки" только на главной странице.
1. В HTML находим
<!-- Список товаров на главной -->2. Вставляем после этого текста
{% IF index_page %} <script type="text/javascript"> jQuery(document).ready(function() { // Initialise the first and second carousel by class selector. // Note that they use both the same configuration options (none in this case). jQuery('.d-carousel .carousel').jcarousel({ scroll: 1 }); }); </script> {% IFNOT index_page_goods_empty %} <h2>Интересные предложения</h2> <table> <tr> <!-- Begin Wrapper --> <div id="wrapper"> <div class="d-carousel"> <ul class="carousel"> {% FOR index_page_goods %} <li < class="goodsListItemBlock withBorder cornerAll"> <div class="goodsListItemImage"><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a> <h3 class="goodsListItemName"><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3> <a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a> {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> {% IFNOT index_page_goods.last %}{index_page_goods.index | is_divided("100","</tr><tr>","")}{% ENDIF %} {% ENDFOR index_page_goods %} </ul> </div> <div class="clear"></div> </div> <!-- End Wrapper --> {% ENDIF %} </tr> </table> {% ENDIF %} <!-- end Список товаров на главной -->Единственное надо "поразвлекаться " со стилями в файле carousel.css
#13
Отправлено 28 Ноябрь 2012 - 08:40
#15
Отправлено 28 Ноябрь 2012 - 09:26
Koderhan (28 Ноябрь 2012 - 09:07) писал:
Если только изменить название товара.
А описание выводится из поля "Короткое описание"
#16
Отправлено 28 Ноябрь 2012 - 10:30
ALEXp (28 Ноябрь 2012 - 09:26) писал:
Добавить код:
.goodsListItemImage .height-img { border:1px solid black; height: 122px; }В вашем коде карусели изменить на:
<div class="goodsListItemImage"><div class="height-img"><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></div> <h3 class="goodsListItemName"><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3> <a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a> {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div>
#17
Отправлено 28 Ноябрь 2012 - 21:22
Koderhan (28 Ноябрь 2012 - 10:30) писал:
Добавить код:
.goodsListItemImage .height-img { border:1px solid black; height: 122px; }В вашем коде карусели изменить на:
<div class="goodsListItemImage"><div class="height-img"><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></div> <h3 class="goodsListItemName"><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3> <a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a> {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} <br /><a href="{index_page_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div>
border:1px solid black;
#18
Отправлено 09 Декабрь 2012 - 18:13
Благодаря данной теме я смог поставить карусель на свой сайт магазина. Большое спасибо.
Изменил значения некоторых переменных и моя карусель стала крутится автоматически.
Но я хочу что бы при наведении мышкой на фото товаров в карусели она останавливалась.
А когда мышку убираешь, продолжала крутиться.
Помогите пожалуйста решить эту проблему.
http://artishka.ru/
#19
Отправлено 10 Декабрь 2012 - 23:50
#20
Отправлено 19 Январь 2013 - 18:49
помогите разобраться..
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных