Jump to content
tim21701

[How-To] Прокрутка доп. изображений на странице Товара

Recommended Posts

Добавляем автоматическую прокрутку для слайд-шоу "Производители" на главной странице.

1). Откройте файл catalog/view/theme/default/template/module/carousel.tpl и добавьте запятую в конце строки:

scroll: <?php echo $scroll; ?>

2). Перейдите на новую строку и добавите следующий код:

auto: 1,
animation: "slow",
wrap: "both"

P.S.

У Вас, должно получиться так:

<script type="text/javascript"><!--
$('#carousel<?php echo $module; ?> ul').jcarousel({
vertical: false,
visible: <?php echo $limit; ?>,
scroll: <?php echo $scroll; ?>,
auto: 1,
animation: "slow",
wrap: "both"
});
//--></script>

Всё.

Откройте главную страницу Вашего интернет-магазина и проверьте работу:

4359893.png

Edited by tim21701
  • +1 5

Share this post


Link to post
Share on other sites

С картинками в товаре все ок получилось, спасибо большое :) осталось с настройками разобраться, но не ссильен в англ, чтоб в источнике найти :))

не подскажите, как увеличить время между автоскролами? ато слишком часто картинки ерзают, напрягает.

Share this post


Link to post
Share on other sites

...как увеличить время между автоскролами?...

По умолчанию стоит одна секунда.

auto: 1, // Пауза перед переключением на следующее изображение (в секундах). Если поставить 0 - выключить автоматическую прокрутку.
Поставьте 3, например, тогда изображения будут меняться каждые ТРИ секунды.
  • +1 3

Share this post


Link to post
Share on other sites

спасибо :) я просто полез в jquery.jcarousel.min.js и начал там ковыряться :))))

Share this post


Link to post
Share on other sites

auto: 1,
animation: "slow",
wrap: "both"

 

какие еще варианты бывают анимации? и последнего?

Share this post


Link to post
Share on other sites

andrewich читайте внимательнее:

 

...
auto: 1, // Пауза перед переключением на следующее изображение (в секундах). Если поставить 0 - выключить автоматичустую прокрутку.
animation: "slow", // Анимация "slow" или "fast" (быстрое или медленное переклюцение на следующее изображение)
wrap: "both" // при достижении последнего изображения - возвращаемся на первое. Или "circular" - прокрутка до бесконечности.
...

Share this post


Link to post
Share on other sites

Tim21701  только сильно не пинай! Подскажи как сделать чтоб основная картинка была каруселью.Например так

http://www.eurohome.es/fichacasa.asp?ref=Ao1331ca

Share this post


Link to post
Share on other sites

Tom, он очень похож на обычный Слайдер - который у нас на главной странице... С отсутствием стрелок навигации и индикатора времени след. изображения... )))

Но, это довольно специфическая вещь и не для каждого интернет-магазина подождёт ИМХО... Вот для WordPress (для которого он и написан) в самый раз, но, не для просмотра ТОВАРА уж точно.

Смысла его "ковырять" (для всех) нет, если только "под заказ"...

 

Вот офф сайт.

 

исп.

jquery.flexslider-min.js

flexslider.css

 

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade",
    controlNav: "false",
  });
});
  • +1 1

Share this post


Link to post
Share on other sites

Спасибо!

Share this post


Link to post
Share on other sites

Спасибо!

Share this post


Link to post
Share on other sites

1.5.4.1 не сработало

post-667051-0-47720000-1372626859_thumb.jpg

Share this post


Link to post
Share on other sites

1.5.4.1 не сработало

Попробуйте в примере 1) - прописать строки к скрипту и стилю:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/carousel.css" media="screen">
Не в файле header.tpl а напрямую в product.tpl перед строкой:

<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-timepicker-addon.js"></script>
Должно получиться... Отпишитесь потом.

 

P.S.

Проделал сейчас всё тоже самое, на "голом" 1.5.4.1

На нём лишь демонстрация модуля iLightBox установлена (замена стандартного preview товара), можете посмотреть результат - всё работает. )))

  • +1 1

Share this post


Link to post
Share on other sites

Демонстрацию можно увидеть здесь.

Share this post


Link to post
Share on other sites

Страно, поставил все работает. Но вот отображение картинок стало стандартным... Ну на большом изображение iLightBox   работает, а вот в карусельке по дефолту все. Вроде все изменил на шаблон который установлен. Что делать кто знает?

Share this post


Link to post
Share on other sites

Кто знает как поменять эти стрелочки на другие куда нужно лезть и что прописать?

Share this post


Link to post
Share on other sites

Кто знает как поменять эти стрелочки на другие куда нужно лезть и что прописать?

/catalog/view/theme/default/image/button-next.png

/catalog/view/theme/default/image/button-previous.png

  • +1 1

Share this post


Link to post
Share on other sites

Pascha вот бы не подумал что с default а берет, везде смотрел кромя него  :-) , а как ее сделать радио? "при наведении меняет цвет"  картинку под нее переделал.

 

     post-673842-0-88398200-1382937835.png

Share this post


Link to post
Share on other sites

как ее сделать радио? "при наведении меняет цвет"  картинку под нее переделал. 

про радио не понял

а чтоб при наведении менялось пропишите стиль с  hover и укажите путь к картинке стрелки с другим цветом

 

примерно так

добавить в /catalog/view/theme/default/stylesheet/carousel.css:  

.jcarousel-skin-opencart .jcarousel-next-horizontal:hover {
background: url('../image/button-next1.png') center no-repeat; 
}
.jcarousel-skin-opencart .jcarousel-prev-horizontal:hover {
		background: url('../image/button-previous1.png') center no-repeat;
}

button-next1.png и button-previous1.png стрелки другого цвета (лучше перекрасить исходные, дабы не произошло смещение)

  • +1 1

Share this post


Link to post
Share on other sites

...

при наведении кнопка исчезает а не меняет цвет, и в доп изображениях к товару слайдер растянуло и золазиет на описание

Share this post


Link to post
Share on other sites

покажи сайт, можно в личку

ты точно скопировал код?
размеры новых кнопок соблюдены?
вставляю свой код в демку...никаких косяков пр растягиванию/наползанию

Share this post


Link to post
Share on other sites

покажи сайт, можно в личку

ты точно скопировал код?

размеры новых кнопок соблюдены?

вставляю свой код в демку...никаких косяков пр растягиванию/наползанию

 

 

сайт http://delcapitano.ru/index.php?route=product/product&path=20&product_id=40

 

 

   Снимок.PNG

Снимок.PNG

Снимок.PNG

post-673842-0-08751000-1382939301_thumb.png

Share this post


Link to post
Share on other sites

1. код не заменить, а добавить

2. у вас скобочка лишняя, не видите? 

2013-10-28_115426.png

3. разрежте картинки кнопок слайдера, так как я стиль прописывал для отдельных кнопок

2013-10-28_115426.png

2013-10-28_115426.png

post-20793-0-34964300-1382939724_thumb.png

Share this post


Link to post
Share on other sites

1. код не заменить, а добавить

2. у вас скобочка лишняя, не видите? 

3. разрежте картинки кнопок слайдера, так как я стиль прописывал для отдельных кнопок

 

код не заменял а добавил, скобочку заметил уже убрал не помогло, скобки щас разрежу

 

     post-673842-0-40861100-1382939772_thumb.png

Share this post


Link to post
Share on other sites

от чего именно не помогло, я не в курсе, у меня карусель стала отображаться корректно (кроме двойных кнопок)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By tim21701
      Часто задают этот вопрос, что бы не скидывать всем ссылки - вывожу её в отдельную тему.

      =========================================================================
      -----------------НЕ ЗАБЫВАЕМ ПРО РЕЗЕРВНОЕ КОПИРОВАНИЕ ФАЙЛОВ!-----------------
      =========================================================================

      Итак, открываем файл: catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и находим строки:
      #menu { background: #585858; border-bottom: 1px solid #000000; height: 37px; margin-bottom: 15px; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; -webkit-box-shadow: 0px 2px 2px #DDDDDD; -moz-box-shadow: 0px 2px 2px #DDDDDD; box-shadow: 0px 2px 2px #DDDDDD; padding: 0px 5px; } Добавляем туда строку (в любое место):
      text-align:center; Чуть ниже, (в этом же файле) находим:
      #menu ul { list-style: none; margin: 0; padding: 0; } Меняем на эти строки:
      #menu ul { list-style: none; margin:auto; padding: 0; display:inline-block; margin-bottom:-4px; text-align:left; } До:

      После:

      Расширяем возможности горизонтального меню...
       
    • By tim21701
      Если кому пригодится, то вот способ - как разместить на главной странице любой модуль.
      (для примера я взял три модуля; "Рекомендуем", "Хиты продаж" и "Слайд-шоу".)

      Вот результат:




      Итак, открываем файл catalog/controller/common/home.php и находим строку:
       
      $this->children[] = 'common/header'; Добаваляем после неё то - что хотим видеть на главной:
       
      $this->children[] = 'module/featured';$this->children[] = 'module/bestseller';$this->children[] = 'module/sidebarslideshow'; Далее, открываем catalog/view/theme/default/template/common/home.tpl и находим:
       
      <?php foreach ($modules as $module) { ?><?php echo ${$module['code']}; ?><?php } ?> И ниже добавляем своё:
       
      <?php echo $featured; ?><?php echo $bestseller'; ?><?php echo $sidebarslideshow'; ?> Затем, открываем catalog/view/theme/default/stylesheet/stylesheet.css и вместо блока (он в самом низу):
       
      #content .middle .box {float: left;margin: 0 6px 10px 6px;min-height: 0px;}#content .middle .box .middle {width: 158px;min-height: 0px;} Ставим свой:
       
      #content .box {float: left;margin: 0 6px 10px 6px;min-height: 0px;}#content .box .middle {width: 158px;min-height: 0px;} Таким способом, можно продублировать любой модуль на главной странице.
       
    • By tim21701
      Итак, если Вы не установили изображение для Категории товаров, берём случайное (из товара) и выводим его...

      Пример:



      Для этого, открываем /catalog/controller/product/category.php и находим строки:
       
      if ($category_info['image']) {$image = $category_info['image'];} else {$image = '';} После них, вставляем:

      if ($category_info['image']) {$image = $category_info['image'];} else {$image = '';// Use random image from products in the category$rndImgQry = "SELECT p.image AS image FROM product AS p JOIN product_to_category AS c ON p.product_id = c.product_id ". "WHERE c.category_id = " . $category_info['category_id'] . " AND p.image NOT LIKE 'no_image.jpg'";$rndImgRslt = mysql_query($rndImgQry) or die (mysql_error());if (mysql_num_rows($rndImgRslt) > 0){$imgRows = array();while($imgRow = mysql_fetch_array($rndImgRslt)){$imgRows[] = $imgRow['image'];}$image = $imgRows[array_rand($imgRows)];}} Ниже, находим блок:

      if ($result['image']) {$image = $result['image'];} else {$image = 'no_image.jpg';} После него вставляем:

      if ($result['image']) {$image = $result['image'];} else {$image = 'no_image.jpg';// Use random image from products in the category$rndImgQry = "SELECT p.image AS image FROM product AS p JOIN product_to_category AS c ON p.product_id = c.product_id ". "WHERE c.category_id = " . $result['category_id'] . " AND p.image NOT LIKE 'no_image.jpg'";$rndImgRslt = mysql_query($rndImgQry) or die (mysql_error());if (mysql_num_rows($rndImgRslt) > 0){$imgRows = array();while($imgRow = mysql_fetch_array($rndImgRslt)){$imgRows[] = $imgRow['image'];}$image = $imgRows[array_rand($imgRows)];}} Всё.
       
    • By tim21701
      Если Вы хотите, что бы на странице товара, при нажатии на вкладки "Описание", "Фото", "Отзывы", "Рекомендуем" они открывались "плавно" (эффект fade),
      откройте файл catalog/view/javascript/jquery/tab.js и найдите строку:
       
      $($(this).attr('tab')).css('display', 'block'); Добавьте ПЕРЕД ней эту:
       
      $($(this).attr('tab')).fadeIn(); Сохраните и посмотрите что получилось.
       
    • By tim21701
      Для любителей отображения меню списком "дерево" в стиле Windows XP, предлагаю такой вариант:



      Используемые значки:

      В модуле нет заменяемых файлов, только новые.
      Установка: Копируем папки из архива и включаем меню в админке.

      Внимание.
      Данный мод не заменяет основное меню Категорий, у Вас появится ещё одно меню с Категориями!
      (Которое можно использовать как дополнительное... Если захотите отставить только его - отключите "Основное").

      Tree Category.zip
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.