Создать Карусель Прокрутку Для Доп Фото.
#21
Отправлено 11 Апрель 2015 - 10:49
При нажатии на превью на большом изображении появляется картинка 4-я по счету от нажатой (т.е. нажимаем на первую, а выходит пятая). А последние четыре изображения в галерее при нажатии выдают белый квадрат. Как это исправить? (Такая же проблема у меня возникла в самой первой карусели)
Как убрать кнопки нумерующие галереи (они еще немного налезают на превью) и оставить только Prev и Next. И стилизовать их?
Я уже сто раз пожалела, что выбрала эту карусель
#22
Отправлено 13 Апрель 2015 - 10:28
Turanga Leela (11 Апрель 2015 - 10:49) писал:
При нажатии на превью на большом изображении появляется картинка 4-я по счету от нажатой (т.е. нажимаем на первую, а выходит пятая). А последние четыре изображения в галерее при нажатии выдают белый квадрат. Как это исправить? (Такая же проблема у меня возникла в самой первой карусели)
Как убрать кнопки нумерующие галереи (они еще немного налезают на превью) и оставить только Prev и Next. И стилизовать их?
Я уже сто раз пожалела, что выбрала эту карусель
#23
Отправлено 15 Апрель 2015 - 07:45
Помогите пожалуйста сделать вставить карусель для доп фото в карточке товара, карусель на сайте уже стоит возможно ли использовать её?
Более подробнее на картинке
#24
Отправлено 16 Апрель 2015 - 07:33
{% IFNOT goods_images_empty %} <div class="goodsImageList" data="{GOODS_IMAGE_ID}"> {% FOR goods_images %} <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{GOODS_NAME}" /></a> {% ENDFOR %} </div> {% ENDIF %}
замените на:
<div id="slider1" class="goodsImageList" data="{GOODS_IMAGE_ID}"> <a class="buttons prev" href="#"><</a> {% FOR goods_images %} <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{GOODS_NAME}" /></a> {% ENDFOR %} <a class="buttons next" href="#">></a> </div>
пришлите пожалуйста ссылку на товар с несколькими фото
#25
Отправлено 16 Апрель 2015 - 10:58
http://sorgalla.com/...les/responsive/
(все очень большое и не удобное, старая карусель)
Или как на фото
#26
Отправлено 17 Апрель 2015 - 02:28
Размеры не особая беда, так как мы изменили только структуру и не стилизовали во все.
#27
Отправлено 17 Апрель 2015 - 09:18
Vaccina (17 Апрель 2015 - 02:28) писал:
Размеры не особая беда, так как мы изменили только структуру и не стилизовали во все.
Карусель работает, а возможно ли поставить вот эту карусель http://tympanus.net/...ontentCarousel/ и желательно сделать её ещё сюда (картинка) на главной
сайт http://santechbomba.ru/
#28
Отправлено 18 Апрель 2015 - 01:38
http://tympanus.net/...ntent-carousel/
По файлам для загрузки вам понадобятся:
- jquery.easing.1.3.js
- jquery.mousewheel.js
- jquery.contentcarousel.js
#29
Отправлено 20 Апрель 2015 - 07:23
Vaccina (18 Апрель 2015 - 01:38) писал:
http://tympanus.net/...ntent-carousel/
По файлам для загрузки вам понадобятся:
- jquery.easing.1.3.js
- jquery.mousewheel.js
- jquery.contentcarousel.js
Все файлы загрузил, помогите поставить карусель в новинки (рсс),
#30
Отправлено 21 Апрель 2015 - 02:52
#31
Отправлено 21 Апрель 2015 - 07:14
Vaccina (21 Апрель 2015 - 02:52) писал:
В данном случае, желательно что бы ни чего не отображалось, т.е. лучше бы не было этой кнопки, функционал нужен тот же что и при старой карусели. (рис)
#32
Отправлено 22 Апрель 2015 - 02:50
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
вставьте:
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.easing.1.3.js"></script> <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.mousewheel.js"></script> <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.contentcarousel.js"></script>
Далее найдите:
<div id="slider1"> <a class="buttons prev" href="#"><</a> <div class="viewport"> <ul class="overview"> {% FOR index_page_new_goods %} <li class="prod_hold"> <div> <div class="image goods-cat-image-medium-square"><a title="{index_page_new_goods.NAME}" href="{index_page_new_goods.URL_MIN_PRICE_NOW | url_amp}"><img class="goods-cat-image-medium" src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_new_goods.IMAGE_SMALL}{% ENDIF %}" alt='' /></a></div> <div class="name"><a title="{index_page_new_goods.NAME}" href="{index_page_new_goods.URL_MIN_PRICE_NOW | url_amp}" style="*height:;">{index_page_new_goods.NAME}</a></div> <span class="new_prod">Новинка</span> <div class="price"> {% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %} <span class="price-old">{index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> {% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %} <span class="price-old">{index_page_new_goods.MIN_PRICE_OLD | money_format}</span> {% ENDIF %} <span class="price-new">{index_page_new_goods.MIN_PRICE_NOW | money_format}</span> </div> <div class="prod-info-fly"> <div class="name"><a title="{index_page_new_goods.NAME}" href="{index_page_new_goods.URL | url_amp}" style="*height:;">{index_page_new_goods.NAME}</a></div> <!-- Артикул, если указан --> <div><span style="color:#000000">Артикул: <span>{index_page_new_goods.ART_NUMBER}</span></div> <!-- Доступность товара --> {% IF index_page_new_goods.MAX_REST_VALUE=0 %} <p> <div class="goodsDataMainModificationAvailable"> <div rel="false" class="available-false" style="font-size: 12pt; color: #ff0000" style="text-align: center">ПОД ЗАКАЗ</div> </div> </p> {% ENDIF %} {% IF index_page_new_goods.MAX_REST_VALUE>0 %} <p> <div class="goodsDataMainModificationAvailable"> <div rel="true" class="available-true" style="font-size: 11pt; color: #0000ff" style="text-align: center">ЕСТЬ В НАЛИЧИИ</div> </div> </p> {% ENDIF %} <!-- Доступность товара --> <div class="price"> {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} <span class="price-old" style="display:none;">{index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} <span class="price-old" style="display:none;">{index_page_goods.MIN_PRICE_OLD | money_format}</span> {% ENDIF %} <span class="price-new">{index_page_goods.MIN_PRICE_NOW | money_format}</span> <div class="clear"></div> </div> <div class="cart"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_goods.MIN_PRICE_NOW_ID}"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" /> <div class="plus_minus_quantity"> </div> <a class="add_to_cart_new" onclick="yaCounter24900764.reachGoal('BUY1');quickorder('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ" id="cup"></a> <a class="add_to_cart_new" href="{index_page_new_goods.URL}" title="Подробнее" id="pod"></a> <!--a class="add_to_cart_small" onclick="$('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Быстро оформить заказ">Добавить в корзину</a--> </form> <!-- Если есть возможность добавить товар в избранное --> {% IF index_page_goods.IS_HAS_IN_FAVORITES_LIST %} <a style="display:none;" class="add_to_wishlist_small added" data-action-is-add="0" data-action-add-url="{FAVORITES_ADD_URL}" data-action-delete-url="{FAVORITES_DELETE_URL}" data-action-add-title="Добавить «{index_page_goods.NAME}» в избранное" data-action-delete-title="Убрать «{index_page_goods.NAME}» из избранного" title="Убрать «{index_page_goods.NAME}» из избранного" href="{FAVORITES_DELETE_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}" >Удалить из избранного</a> {% ELSE %} <a style="display:none;" class="add_to_wishlist_small" data-action-is-add="1" data-action-add-url="{FAVORITES_ADD_URL}" data-action-delete-url="{FAVORITES_DELETE_URL}" data-action-add-title="Добавить «{index_page_goods.NAME}» в избранное" data-action-delete-title="Убрать «{index_page_goods.NAME}» из избранного" title="Добавить «{index_page_goods.NAME}» в избранное" href="{FAVORITES_ADD_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}" >Добавить в избранное</a> {% ENDIF %} <!-- END Если есть возможность добавить товар в избранное --> <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %} {% IF index_page_goods.IS_HAS_IN_COMPARE_LIST %} <a class="add_to_compare_small added" data-action-is-add="0" data-action-add-url="{COMPARE_ADD_URL}" data-action-delete-url="{COMPARE_DELETE_URL}" data-action-add-title="Добавить «{index_page_goods.NAME}» в список сравнения с другими товарами" data-action-delete-title="Убрать «{index_page_goods.NAME}» из списка сравнения с другими товарами" title="Убрать «{index_page_goods.NAME}» из списка сравнения с другими товарами" href="{COMPARE_DELETE_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&from={index_page_goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}" >убрать из сравнения</a> {% ELSE %} <a class="add_to_compare_small" data-action-is-add="1" data-action-add-url="{COMPARE_ADD_URL}" data-action-delete-url="{COMPARE_DELETE_URL}" data-action-add-title="Добавить «{index_page_goods.NAME}» в список сравнения с другими товарами" data-action-delete-title="Убрать «{index_page_goods.NAME}» из списка сравнения с другими товарами" title="Добавить «{index_page_goods.NAME}» в список сравнения с другими товарами" href="{COMPARE_ADD_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&from={index_page_goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}" >Сравнить</a> {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> </div> </div> </div> </li> {% ENDFOR index_page_new_goods %} </ul> </div> <a class="buttons next" href="#">></a> </div>
замените на:
<div id="ca-container" class="ca-container"> <div class="ca-nav"><span class="ca-nav-prev"><</span><span class="ca-nav-next">></span></div> <div class="ca-wrapper"> {% FOR index_page_new_goods %} <div class="ca-item ca-item-{index_page_new_goods.index} prod_hold"> <div class="ca-item-main"> <div> <div class="image goods-cat-image-medium-square"><a title="{index_page_new_goods.NAME}" href="{index_page_new_goods.URL_MIN_PRICE_NOW | url_amp}"><img class="goods-cat-image-medium" src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_new_goods.IMAGE_SMALL}{% ENDIF %}" alt='' /></a></div> <div class="name"><a title="{index_page_new_goods.NAME}" href="{index_page_new_goods.URL_MIN_PRICE_NOW | url_amp}" style="*height:;">{index_page_new_goods.NAME}</a></div> <span class="new_prod">Новинка</span> <div class="price"> {% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %} <span class="price-old">{index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> {% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %} <span class="price-old">{index_page_new_goods.MIN_PRICE_OLD | money_format}</span> {% ENDIF %} <span class="price-new">{index_page_new_goods.MIN_PRICE_NOW | money_format}</span> </div> <div class="prod-info-fly"> <div class="name"><a title="{index_page_new_goods.NAME}" href="{index_page_new_goods.URL | url_amp}" style="*height:;">{index_page_new_goods.NAME}</a></div> <!-- Артикул, если указан --> <div><span style="color:#000000">Артикул: <span>{index_page_new_goods.ART_NUMBER}</span></div> <!-- Доступность товара --> {% IF index_page_new_goods.MAX_REST_VALUE=0 %} <p> <div class="goodsDataMainModificationAvailable"> <div rel="false" class="available-false" style="font-size: 12pt; color: #ff0000" style="text-align: center">ПОД ЗАКАЗ</div> </div> </p> {% ENDIF %} {% IF index_page_new_goods.MAX_REST_VALUE>0 %} <p> <div class="goodsDataMainModificationAvailable"> <div rel="true" class="available-true" style="font-size: 11pt; color: #0000ff" style="text-align: center">ЕСТЬ В НАЛИЧИИ</div> </div> </p> {% ENDIF %} <!-- Доступность товара --> <div class="price"> {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} <span class="price-old" style="display:none;">{index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} <span class="price-old" style="display:none;">{index_page_goods.MIN_PRICE_OLD | money_format}</span> {% ENDIF %} <span class="price-new">{index_page_goods.MIN_PRICE_NOW | money_format}</span> <div class="clear"></div> </div> <div class="cart"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_goods.MIN_PRICE_NOW_ID}"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" /> <div class="plus_minus_quantity"> </div> <a class="add_to_cart_new" onclick="yaCounter24900764.reachGoal('BUY1');quickorder('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ" id="cup"></a> <a class="add_to_cart_new" href="{index_page_new_goods.URL}" title="Подробнее" id="pod"></a> <!--a class="add_to_cart_small" onclick="$('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Быстро оформить заказ">Добавить в корзину</a--> </form> <!-- Если есть возможность добавить товар в избранное --> {% IF index_page_goods.IS_HAS_IN_FAVORITES_LIST %} <a style="display:none;" class="add_to_wishlist_small added" data-action-is-add="0" data-action-add-url="{FAVORITES_ADD_URL}" data-action-delete-url="{FAVORITES_DELETE_URL}" data-action-add-title="Добавить «{index_page_goods.NAME}» в избранное" data-action-delete-title="Убрать «{index_page_goods.NAME}» из избранного" title="Убрать «{index_page_goods.NAME}» из избранного" href="{FAVORITES_DELETE_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}" >Удалить из избранного</a> {% ELSE %} <a style="display:none;" class="add_to_wishlist_small" data-action-is-add="1" data-action-add-url="{FAVORITES_ADD_URL}" data-action-delete-url="{FAVORITES_DELETE_URL}" data-action-add-title="Добавить «{index_page_goods.NAME}» в избранное" data-action-delete-title="Убрать «{index_page_goods.NAME}» из избранного" title="Добавить «{index_page_goods.NAME}» в избранное" href="{FAVORITES_ADD_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}" >Добавить в избранное</a> {% ENDIF %} <!-- END Если есть возможность добавить товар в избранное --> <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %} {% IF index_page_goods.IS_HAS_IN_COMPARE_LIST %} <a class="add_to_compare_small added" data-action-is-add="0" data-action-add-url="{COMPARE_ADD_URL}" data-action-delete-url="{COMPARE_DELETE_URL}" data-action-add-title="Добавить «{index_page_goods.NAME}» в список сравнения с другими товарами" data-action-delete-title="Убрать «{index_page_goods.NAME}» из списка сравнения с другими товарами" title="Убрать «{index_page_goods.NAME}» из списка сравнения с другими товарами" href="{COMPARE_DELETE_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&from={index_page_goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}" >убрать из сравнения</a> {% ELSE %} <a class="add_to_compare_small" data-action-is-add="1" data-action-add-url="{COMPARE_ADD_URL}" data-action-delete-url="{COMPARE_DELETE_URL}" data-action-add-title="Добавить «{index_page_goods.NAME}» в список сравнения с другими товарами" data-action-delete-title="Убрать «{index_page_goods.NAME}» из списка сравнения с другими товарами" title="Добавить «{index_page_goods.NAME}» в список сравнения с другими товарами" href="{COMPARE_ADD_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&from={index_page_goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}" >Сравнить</a> {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> </div> </div> </div> </div> </div> {% ENDFOR index_page_new_goods %} </div><!-- ca-wrapper --> </div><!-- ca-container -->
далее после:
</div> {% ENDIF %} <!-- /Список новинок на главной -->
пропишите:
<script> $('#ca-container').contentcarousel({ // speed for the sliding animation sliderSpeed : 500, // easing for the sliding animation sliderEasing : 'easeOutExpo', // speed for the item animation (open / close) itemSpeed : 500, // easing for the item animation (open / close) itemEasing : 'easeOutExpo', // number of items to scroll at a time scroll : 1 }); </script>
В main.css пропишите:
.ca-wrapper{ height: 280px; } #content .box .box-content{ overflow: hidden; }
#33
Отправлено 22 Апрель 2015 - 07:30
Клавиши перелистывания были как на демо всегда видимыми
Слайдер самопролистывался каждые 3 секунды по 1 товару
Более подробнее на картинке
PS: Пока что поменял функциональные клавиши но желательно что было как тут http://tympanus.net/...ontentCarousel/
Сообщение отредактировал Cybernetic: 22 Апрель 2015 - 13:40
#34
Отправлено 22 Апрель 2015 - 13:57
Cybernetic (22 Апрель 2015 - 07:30) писал:
Клавиши перелистывания были как на демо всегда видимыми
Слайдер самопролистывался каждые 3 секунды по 1 товару
Более подробнее на картинке
PS: Пока что поменял функциональные клавиши но желательно что было как тут http://tympanus.net/...ontentCarousel/
1. найдите в файле
#slider1 { height: 1%; margin: 30px 0 0; overflow: hidden; position: relative; padding: 0 50px 10px; }замените на
#slider1 { height: 1%; /* margin: 30px 0 0;*/ overflow: hidden; position: relative; padding: 0 50px 10px; }
#35
Отправлено 22 Апрель 2015 - 14:14
Ирина345 (22 Апрель 2015 - 13:57) писал:
1. найдите в файле
#slider1 { height: 1%; margin: 30px 0 0; overflow: hidden; position: relative; padding: 0 50px 10px; }замените на
#slider1 { height: 1%; /* margin: 30px 0 0;*/ overflow: hidden; position: relative; padding: 0 50px 10px; }
Здравствуйте, вы бы не могли уточнить в каком файле найти код?
#39
Отправлено 23 Апрель 2015 - 01:18
.ca-container { position: relative; } .ca-nav > span { background: none repeat scroll 0 0 #0000cd; display: block; padding: 10px 10px 0; position: absolute; text-align: center; top: 40%; width: 20px; z-index: 99; } .ca-nav-prev { left: 0; } .ca-nav-next { right: 0; }
далее в шаблоне HTML найдите:
<script> $('#ca-container').contentcarousel({ // speed for the sliding animation sliderSpeed : 500, // easing for the sliding animation sliderEasing : 'easeOutExpo', // speed for the item animation (open / close) itemSpeed : 500, // easing for the item animation (open / close) itemEasing : 'easeOutExpo', // number of items to scroll at a time scroll : 1 }); </script>
замените на:
<script> $('#ca-container').contentcarousel({ // speed for the sliding animation sliderSpeed : 500, // easing for the sliding animation sliderEasing : 'easeOutExpo', // speed for the item animation (open / close) itemSpeed : 500, // easing for the item animation (open / close) itemEasing : 'easeOutExpo', // number of items to scroll at a time scroll : 1 }); var int = setInterval("$('.ca-nav-next').trigger('click');",3000); </script>
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных