Слайд шоу в карточке товара

Тема в разделе "OpenCart", создана пользователем KuEdA, 15 мар 2015.

  1. KuEdA

    KuEdA

    Регистрация:
    20 сен 2014
    Сообщения:
    177
    Симпатии:
    34
    Здравствуйте, помогите пожалуйста подогнать этот слайдер к карточкам товара ocstore. Хочу сделать, чтобы навигация осуществлялась по миниатюрам изображений, а при кликах на них - изображения менялись в главном окне. Подключить я его подключил, в том виде, как он есть, но вот, как реализовать вывод изображений из image/cache//data/parse/ никак не могу дотумкать. Или может быть кто может подсказать какой-нибудь готовый модуль для организации подобного слайд шоу в карточке товара? Очень прошу Вас помочь. Спасибо.
     
  2. KuEdA

    KuEdA

    Регистрация:
    20 сен 2014
    Сообщения:
    177
    Симпатии:
    34
    Разметка у слайдера следующая:

    <div id="mi-slider" class="mi-slider">
    02 <ul>
    03 <li><a href="#"><img src="images/1.jpg"alt="img01"><h4>Ботинки</h4></a></li>
    04 <li><a href="#"><img src="images/2.jpg"alt="img02"><h4>Классика</h4></a></li>
    05 <li><a href="#"><img src="images/3.jpg"alt="img03"><h4>Мокасины</h4></a></li>
    06 <li><a href="#"><img src="images/4.jpg"alt="img04"><h4>Кроссовки</h4></a></li>
    07 </ul>
    08 <ul>
    09 <li><a href="#"><img src="images/5.jpg"alt="img05"><h4>Ремни</h4></a></li>
    10 <li><a href="#"><img src="images/6.jpg"alt="img06"><h4>Шляпы и кепи</h4></a></li>
    11 <li><a href="#"><img src="images/7.jpg"alt="img07"><h4>Очки</h4></a></li>
    12 <li><a href="#"><img src="images/8.jpg"alt="img08"><h4>Шарфы</h4></a></li>
    13 </ul>
    14 <ul>
    15 <li><a href="#"><img src="images/9.jpg"alt="img09"><h4>Свобода</h4></a></li>
    16 <li><a href="#"><img src="images/10.jpg"alt="img10"><h4>Роскошь</h4></a></li>
    17 <li><a href="#"><img src="images/11.jpg"alt="img11"><h4>Спорт</h4></a></li>
    18 </ul>
    19 <ul>
    20 <li><a href="#"><img src="images/12.jpg"alt="img12"><h4>Чемоданы</h4></a></li>
    21 <li><a href="#"><img src="images/13.jpg"alt="img13"><h4>Дорожные сумки</h4></a></li>
    22 <li><a href="#"><img src="images/14.jpg"alt="img14"><h4>Для ноутбуков</h4></a></li>
    23 <li><a href="#"><img src="images/15.jpg"alt="img15"><h4>Портфели</h4></a></li>
    24 </ul>
    25 <nav>
    26 <a href="#">Обувь</a>
    27 <a href="#">Аксессуары</a>
    28 <a href="#">Часы</a>
    29 <a href="#">Сумки</a>
    30 </nav>
    31 </div>
    --- Добавлено, 16 мар 2015 ---
    В навигацию вроде удалось вставить превьюшки фотографий товаров таким образом:

    <nav>
    <?php foreach ($images as $image) { ?>
    <a href="#" title="<?php echo $heading_title; ?>"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" style="width:74px;height:74px;"/></a>
    <?php } ?>
    </div>
    </div>
    </div>
    </nav>
    Не знаю, правильно или нет, делал все методом тыка. :-( Получилось вот что:

    [​IMG]
    --- Добавлено, 16 мар 2015 ---
    Правда вся верстка съехала. :-( Подскажите, пожалуйста, как связать миниатюры с большими фотографиями и организовать их вывод. Пробовал таким образом:
    <div id="mi-slider" class="mi-slider">
    <?php if ($thumb) { ?>
    <li><a href="#" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a></li>
    <?php } ?>
    </ul>
    </div>
    </div>
    </div>
    Получается вот что:
    [​IMG]