Перейти к содержанию
tim21701

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

Рекомендуемые сообщения

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

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

Изменено пользователем tim21701
  • +1 5

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

     post-673842-0-88398200-1382937835.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

а чтоб при наведении менялось пропишите стиль с  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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

...

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

 

 

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

 

 

   Снимок.PNG

Снимок.PNG

Снимок.PNG

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От 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; } До:

      После:

      Расширяем возможности горизонтального меню...
       
    • От 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;} Таким способом, можно продублировать любой модуль на главной странице.
       
    • От 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)];}} Всё.
       
    • От tim21701
      Если Вы хотите, что бы на странице товара, при нажатии на вкладки "Описание", "Фото", "Отзывы", "Рекомендуем" они открывались "плавно" (эффект fade),
      откройте файл catalog/view/javascript/jquery/tab.js и найдите строку:
       
      $($(this).attr('tab')).css('display', 'block'); Добавьте ПЕРЕД ней эту:
       
      $($(this).attr('tab')).fadeIn(); Сохраните и посмотрите что получилось.
       
    • От tim21701
      Для любителей отображения меню списком "дерево" в стиле Windows XP, предлагаю такой вариант:



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

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

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

      Tree Category.zip
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.