Добавить Виджет
#1
Отправлено 13 Декабрь 2012 - 00:18
Вот здесь увидел интересный виджет
Будьте добры , подскажите путь пожалуйста установки данного виджета на наш замечательный сайт
#2
Отправлено 13 Декабрь 2012 - 11:26
Вот как можно это сделать.
Скачать и распаковать на компьютер файл click-carousel.zip 111К 83 Количество загрузок:.
Панель администратора, Сайт->Редактор тем.
Загрузить все файлы на сайт.
Открыть файл HTML.
До кода </head>.
Вставить код:
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}click-carousel.css" /> <script type="text/javascript" src="{ASSETS_JS_PATH}click-carousel.js"></script> <script type="text/javascript"> $(function(){ $("#container").clickCarousel({margin: 10}); }); </script>
Открыть файл Товары.
Найти код:
<ul style="float:left;"> <li><a href="http://{NET_DOMAIN}/" title="Перейти на главную">Главная</a><span> </span></li> {% IF IS_FULL_CATALOG %} <li><strong>Каталог</strong></li> {% ELSE %} <li><a href="{CATALOG_URL}" title="Перейти в каталог продукции нашего магазина">Каталог</a><span> </span></li> {% FOR upper_navigation %} {% IF upper_navigation.CURRENT %}<li><strong>{upper_navigation.NAME}</strong></li>{% ELSEIF upper_navigation.CURRENT_PARENT %}<li><a href="{upper_navigation.URL}" title="Перейти в категорию «{upper_navigation.NAME}»">{upper_navigation.NAME}</a><span> </span></li>{% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul>
Заменить на:
<div class="with-keyup-navigation"> <style> .click-carousel #carouselLeft { position: relative; top: -85px; left: 8px; cursor: pointer; } .click-carousel #carouselRight { position: relative; top: -85px; left: 479px; cursor: pointer; } .click-carousel { margin-left: 3em; } .click-carousel #container div { position: absolute; top: 0px; height: 150px; width: 150px; } </style> <div class="click-carousel"> <div id="wrapper"> <div id="container"> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img1.jpg" alt="Cuba" /></a></div> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img2.jpg" alt="Cuba" /></a></div> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img3.jpg" alt="Cuba" /></a></div> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img4.jpg" alt="Cuba" /></a></div> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img5.jpg" alt="Cuba" /></a></div> </div><!-- container --> <img id="carouselLeft" src="{ASSETS_IMAGES_PATH}leftArr.jpg" alt="Left Arrow" /> <img id="carouselRight" src="{ASSETS_IMAGES_PATH}rightArr.jpg" alt="Right Arrow" /> </div><!-- wrapper --> </div>
В этом коде вы можете изменить названия картинок (img2.jpg,img5.jpg) на названия своих картинок. Так же можно вставить ссылки на клик по картинки,
Например так.
Изменив код
<a href="#">на
<a href="http://storeland.ru/">
#3
Отправлено 13 Декабрь 2012 - 17:06
#5
Отправлено 13 Декабрь 2012 - 17:14
хорошо, минутку пожалуйста
готово
#6
Отправлено 13 Декабрь 2012 - 17:37
emin808 (13 Декабрь 2012 - 17:14) писал:
хорошо, минутку пожалуйста
готово
зайдите в файл click-carousel.css
и найдите блок
#container { position: absolute; top: 10px; left: 60px; height: 150px; width: 470px; overflow: hidden; }
замените его на
#container { position: relative; top: 10px; left: 60px; height: 150px; width: 470px; overflow: hidden; }
#7
Отправлено 13 Декабрь 2012 - 17:46
очень помогаете,
нам надо проанализировать , изначально задумывалось чуть по другому
т.е все так , только думается подкорректировать чуть
#8
Отправлено 13 Декабрь 2012 - 21:59
возможно ли сделать так?!
и помогите пожалуйста с путем как подтянуть максимально вверх ?!
#9
Отправлено 13 Декабрь 2012 - 22:10
#10
Отправлено 14 Декабрь 2012 - 09:52
emin808 (13 Декабрь 2012 - 21:59) писал:
возможно ли сделать так?!
и помогите пожалуйста с путем как подтянуть максимально вверх ?!
Можно отключить слайдер на малых разрешениях экрана. Для того чтобы слайдер не выезжал за границы контента.
Чтобы можно было изменить размеры слайдера , нужно чтобы слайдер был установлен на сайте.
#11
Отправлено 14 Декабрь 2012 - 10:08
#12
Отправлено 14 Декабрь 2012 - 15:14
emin808 (13 Декабрь 2012 - 21:59) писал:
возможно ли сделать так?!
и помогите пожалуйста с путем как подтянуть максимально вверх ?!
1. Сделать галерею на сером фоне конечно можно, но стрелочки сами изначально сделаны на белом фоне и поэтому это будет выделяться. Нужно сначала найти подходящие стрелочки на прозрачном фоне.
2. В шаблоне Товары найдите блок
.click-carousel { margin-left: 3em; }
и замените его на
.click-carousel { margin: -2em 0px -30px 3em; }
#13
Отправлено 14 Декабрь 2012 - 15:34
emin808 (14 Декабрь 2012 - 10:08) писал:
Зайдите в шаблон Товары -> Чтобы отключить показ слайдера после определенного разрешения экрана, добавьте в стили слайдера следующий блок
@media screen and (max-width: 980px) { .click-carousel { display:none; }
У Вас получится следующее
<style> .click-carousel #carouselLeft { position: relative; top: -85px; left: 8px; cursor: pointer; } .click-carousel #carouselRight { position: relative; top: -85px; left: 479px; cursor: pointer; } .click-carousel { margin-left: 3em; } .click-carousel #container div { position: absolute; top: 0px; height: 150px; width: 150px; } @media screen and (max-width: 980px) { .click-carousel { display:none; } </style>
#14
Отправлено 14 Декабрь 2012 - 19:44
вот еще коррекция необходима :
Можно сделать этот слайдер раздельным чтоб был независим от товарной категории как на главной ?!
#15
Отправлено 14 Декабрь 2012 - 22:19
#16
Отправлено 14 Декабрь 2012 - 22:41
#17
Отправлено 14 Декабрь 2012 - 23:29
{%IF CATEGORY_NAME=Имя категории%} измененный слайдер, или другие изображения для Имя категории {%ELSEIF CATEGORY_NAME=Имя категории 2%} измененный слайдер, или другие изображения для Имя категории 2 {%ELSEIF CATEGORY_NAME=Имя категории 3%} измененный слайдер, или другие изображения для Имя категории 3 {%ENDIF%}
#18
Отправлено 15 Декабрь 2012 - 00:03
#19
Отправлено 15 Декабрь 2012 - 10:05
emin808 (15 Декабрь 2012 - 00:03) писал:
Можно сделать следующие:
в шаблоне HTML найдите блок
<div class="click-carousel"> <div id="wrapper"> <div id="container"> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img1.jpg" alt="Cuba" /></a></div> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img2.jpg" alt="Cuba" /></a></div> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img3.jpg" alt="Cuba" /></a></div> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img4.jpg" alt="Cuba" /></a></div> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img5.jpg" alt="Cuba" /></a></div> </div><!-- container --> <img id="carouselLeft" src="{ASSETS_IMAGES_PATH}leftArr.jpg" alt="Left Arrow" /> <img id="carouselRight" src="{ASSETS_IMAGES_PATH}rightArr.jpg" alt="Right Arrow" /> </div><!-- wrapper --> </div>
и после
</div><!-- wrapper -->
вставьте блок
<div style="width: 112%; padding: 0px; margin-left: -52px;moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;background: url(/web/upload/assets/images/154/153295/site_bg.gif) repeat-y 43% 0;"> </div>
У Вас получится примерно так
<div class="click-carousel"> <div id="wrapper"> <div id="container"> <div style="left: 0px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img1.jpg" alt="Cuba"></a></div> <div style="left: 160px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img2.jpg" alt="Cuba"></a></div> <div style="left: 320px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img3.jpg" alt="Cuba"></a></div> <div style="left: 480px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img4.jpg" alt="Cuba"></a></div> <div style="left: 640px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img5.jpg" alt="Cuba"></a></div> </div> <img id="carouselLeft" src="/web/upload/assets/images/154/153295/leftArr.jpg" alt="Left Arrow"> <img id="carouselRight" src="/web/upload/assets/images/154/153295/rightArr.jpg" alt="Right Arrow"> </div><!-- wrapper --> <div style="width: 112%; padding: 0px; margin-left: -52px;moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;background: url(/web/upload/assets/images/154/153295/site_bg.gif) repeat-y 43% 0;"> </div> </div>
#20
Отправлено 15 Декабрь 2012 - 11:28
Благодарю Вас!
подскажите ещё пожалуйста, а можно такую деталь реализовать?! (прозрачный фон)
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных