Будьте добры, кто реализовал карусель для доп.изображений товара - поделитесь, пожалуйста.. Сборка Maxystore Opencart 1.5.4.1
Или помогите допилить вот этот метод для сборки Maxystore 1.5.4.1 1. Скачать прикрепленный архив carousel.zip 2. Распаковать в директорию своего сайта. 3. Добавить в файл /catalog/view/theme/название вашей темы/template/common/header.tpl до закрывающегося тега head, следующий код: Код: <script type="text/javascript" src="../carousel/jquery.jcarousel.min.js"></script> <link rel="stylesheet" type="text/css" href="../carousel/skins/tango/skin.css" /> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap: 'circular' }); }); </script> 4. Идем в /catalog/view/theme/название вашей темы/template/product/product.tpl Ищем: Код: <div class="image-additional"> <?php foreach($images as $image){?> <a href="<?php echo $image['popup'];?>" title="<?php echo $heading_title;?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb'];?>" title="<?php echo $heading_title;?>" alt="<?php echo $heading_title;?>" /></a> <?php }?> </div> Меняем на: Код: <ul id="mycarousel" class="jcarousel-skin-tango"> <?php foreach ($images as $image) { ?> <li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> </ul> Получается вот такая печаль :( Прикрепленные файлы
Ставил себе по этому описанию на 1.5.3.1 шаблон Womens store. перепробывал разные варианты и способы,на дефолте пашет на шаблоне ни в какую не хочет.ПЛЮНЮЛ))))
я по картинке ничего не вижу А по-поводу производителей , вам трудно взять оттуда код , подправить его под страничку товара, для чего еще скрипты с цсс тащить? --- добавлено: 6 дек 2012 в 15:43 --- А вот это чё за фигня?
1. Скачать http://www.magictoolbox.com/magicscroll/modules/opencart/ 2. Останови демо версии 3. заменять admin/controller/module/magictoolbox/magicscroll.js с ето
Идем в модуль, достаем див с ID и обрамляем им наши превьюшки товара, задаем стилями ширину и пр. Всё на уроке информатики можете сидеть в наушниках как признанный авторитет
Проблема лиш в том, что он заменил <div class="image-additional">... его то трогать не надо, попробуйте таким вот образом: Код: [FONT=Consolas]<div class="image-additional">[/FONT] <ul id="mycarousel" class="jcarousel-skin-tango"> <?php foreach ($images as $image) { ?> <li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> </ul> [FONT=Consolas]</div>[/FONT]
Проблема действительно была в <div class="image-additional"> - не нужно было убирать данный тег. Спасибо. Единственно остались открыты следующие вопросы, которые не получается решить: 1. Карусель 'бесконечно' прокручивает изображения. Помогите сделать так, чтобы при прокрутке к примеру вперед, и при достижении конечного изображения кнопка 'вперед' не нажималась, а в идеале 'исчезала' вовсе, так как дальше нет изображений, а при прокрутке 'назад' вновь появлялась. И тот же самый порядок с другой кнопкой. Пример: http://sorgalla.com/projects/jcarousel/examples/static_simple.html 2. Смена 'обводки'(рамки/border) при наведении мышки. Помогите пожалуйста сделать, чтобы при наведении на изображение 'рамка' автоматически меняла цвет, и не нажимая на доп. изображение автоматически активировать его и перевести в основное окно, где отображается первичный товар. Пример: http://ecmall.chinascript.ru/index.php?app=goods&id=21#module
Бесконечная прокрутка - <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap: 'circular' - это она }); }); </script>
В точку! Спасибо. Не поможете с последним вопросом? Смена 'обводки'(рамки/border) при наведении мышки. Помогите пожалуйста сделать, чтобы при наведении на изображение 'рамка' автоматически меняла цвет, и не нажимая на доп. изображение автоматически активировать его и перевести в основное окно, где отображается первичный товар. Пример: http://ecmall.chinascript.ru/index.php?app=goods&id=21#module
По поводу бордера, то вам подучить css нужно или к дизайнеру за советом, а я по коду, (если по секрету, то ищите hoover)... По поводу подгрузки при наведении доп. изобраэений в главный фрейм фотки, то там у него какая то библиотека подключена, так просто пару строками такое не сделать...
Горамотно сделано, а вот в скрипте, я бы сделал что то типа: Код: <script type="text/javascript"><!-- $('.image-additional ul').jcarousel({ vertical: false, scroll: 3, wrap: last }); //--></script>
Хочу сделать карусель по этому же принципу для "аксессуары к товару", но отображается все в столбец и без прокрутки --- Добавлено, 7 дек 2013 --- Всё получилось, спасибо всем огромное!)
