[Помогите] Карусель для доп.изображений товара

Тема в разделе "OpenCart", создана пользователем VeroN, 6 дек 2012.

  1. VeroN

    VeroN

    Регистрация:
    26 ноя 2012
    Сообщения:
    82
    Симпатии:
    313
    Будьте добры, кто реализовал карусель для доп.изображений товара - поделитесь, пожалуйста..
    Сборка Maxystore Opencart 1.5.4.1
    [​IMG]
     
  2. veterok

    veterok

    Регистрация:
    13 ноя 2012
    Сообщения:
    54
    Симпатии:
    8
    На главной странице карусель с производителями
     
  3. VeroN

    VeroN

    Регистрация:
    26 ноя 2012
    Сообщения:
    82
    Симпатии:
    313
    Или помогите допилить вот этот метод для сборки 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>
    Получается вот такая печаль :(

    [​IMG]

    Прикрепленные файлы
     
  4. Taker

    Taker

    Регистрация:
    2 дек 2012
    Сообщения:
    206
    Симпатии:
    143
    Ставил себе по этому описанию на 1.5.3.1 шаблон Womens store. перепробывал разные варианты и способы,на дефолте пашет на шаблоне ни в какую не хочет.ПЛЮНЮЛ))))
     
  5. veterok

    veterok

    Регистрация:
    13 ноя 2012
    Сообщения:
    54
    Симпатии:
    8
    я по картинке ничего не вижу
    А по-поводу производителей , вам трудно взять оттуда код , подправить его под страничку товара, для чего еще скрипты с цсс тащить?
    --- добавлено: 6 дек 2012 в 15:43 ---
    А вот это чё за фигня?
     
  6. CTAH

    CTAH

    Регистрация:
    12 ноя 2012
    Сообщения:
    285
    Симпатии:
    1.300
    1. Скачать http://www.magictoolbox.com/magicscroll/modules/opencart/
    2. Останови демо версии
    3. заменять admin/controller/module/magictoolbox/magicscroll.js с ето
     
  7. veterok

    veterok

    Регистрация:
    13 ноя 2012
    Сообщения:
    54
    Симпатии:
    8

    Идем в модуль, достаем див с ID и обрамляем им наши превьюшки товара, задаем стилями ширину и пр.

    Всё на уроке информатики можете сидеть в наушниках как признанный авторитет
     
  8. Baco

    Baco Антихронофаг Команда форума

    Регистрация:
    9 окт 2012
    Сообщения:
    648
    Симпатии:
    327
    Проблема лиш в том, что он заменил <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]
    
     
    veron.nv нравится это.
  9. VeroN

    VeroN

    Регистрация:
    26 ноя 2012
    Сообщения:
    82
    Симпатии:
    313
    Проблема действительно была в <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
     
  10. Baco

    Baco Антихронофаг Команда форума

    Регистрация:
    9 окт 2012
    Сообщения:
    648
    Симпатии:
    327
    Бесконечная прокрутка - <script type="text/javascript">

    jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
    wrap: 'circular' - это она
    });
    });
    </script>
     
    VeroN нравится это.
  11. VeroN

    VeroN

    Регистрация:
    26 ноя 2012
    Сообщения:
    82
    Симпатии:
    313
    В точку! Спасибо.

    Не поможете с последним вопросом?
    Смена 'обводки'(рамки/border) при наведении мышки.
    Помогите пожалуйста сделать, чтобы при наведении на изображение 'рамка' автоматически меняла цвет, и не нажимая на доп. изображение автоматически активировать его и перевести в основное окно, где отображается первичный товар.
    Пример: http://ecmall.chinascript.ru/index.php?app=goods&id=21#module
     
  12. Baco

    Baco Антихронофаг Команда форума

    Регистрация:
    9 окт 2012
    Сообщения:
    648
    Симпатии:
    327
    По поводу бордера, то вам подучить css нужно или к дизайнеру за советом, а я по коду, (если по секрету, то ищите hoover)...
    По поводу подгрузки при наведении доп. изобраэений в главный фрейм фотки, то там у него какая то библиотека подключена, так просто пару строками такое не сделать...
     
  13. R4an_93

    R4an_93

    Регистрация:
    14 янв 2013
    Сообщения:
    265
    Симпатии:
    30
    Хорошая тема, но подскажите, куда этот код вживлять? )
     
  14. Baco

    Baco Антихронофаг Команда форума

    Регистрация:
    9 окт 2012
    Сообщения:
    648
    Симпатии:
    327
    в \catalog\view\theme\default\template\product\product.tpl
     
  15. pavel

    pavel

    Регистрация:
    23 окт 2012
    Сообщения:
    3
    Симпатии:
    1
    на скорую руку собрал vqmod файл карусели доп. фоток, проверьте пойдет ли у когото

     
  16. Baco

    Baco Антихронофаг Команда форума

    Регистрация:
    9 окт 2012
    Сообщения:
    648
    Симпатии:
    327
    Горамотно сделано, а вот в скрипте, я бы сделал что то типа:
    Код:
    <script type="text/javascript"><!--
    			$('.image-additional ul').jcarousel({
    				vertical: false,
    				scroll: 3,
    				wrap: last
    			});
    	//--></script>
     
  17. profi555

    profi555

    Регистрация:
    17 дек 2012
    Сообщения:
    3
    Симпатии:
    0
    Хочу сделать карусель по этому же принципу для "аксессуары к товару", но отображается все в столбец и без прокрутки
    --- Добавлено, 7 дек 2013 ---
    Всё получилось, спасибо всем огромное!)
     
    Последнее редактирование: 7 дек 2013