Jump to content
Sign in to follow this  
tim21701

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

Recommended Posts

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

 

 

 

   при наведении кнопки исчезают а нужно чтобы они темнели

Share this post


Link to post
Share on other sites

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

.jcarousel-skin-opencart .jcarousel-next-horizontal:hover, .jcarousel-skin-opencart .jcarousel-next-horizontal:focus {
}

??? 
я выше путь где вставлять и  код стилей прописал для чего? 

еще раз: 
button-next.png и button-previous.png - это 2 картинки с серыми стрелками

 

button-next1.png и button-previous1.png - это 2 картинки с черными стрелками

серые прописаны уже

.jcarousel-skin-opencart .jcarousel-next-horizontal {
position: absolute;
top: 23px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: url('../image/button-next.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-prev-horizontal {
position: absolute;
top: 23px;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: url('../image/button-previous.png') center no-repeat;
}

а черные прописываем вместо кода в строке 49

.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;
}
  • +1 1

Share this post


Link to post
Share on other sites

Подскажите пожалуйста. Каким образом можно прикрутить карусель к стандартным модулям вывода товаров "Хиты продаж", "Рекомендуемые", "Последние" и "Акции".

Буду очень благодарен...

Share this post


Link to post
Share on other sites

Надо именно к стандартным модулям прикрутить карусель. Другие модули-карусели не годятся. по той причине, что не выводятся стикеры  "Intelligent Product Labels & Images" в модулях каруселях. Поэтому проще переделать стандартные  "Хиты продаж", "Рекомендуемые", "Последние" и "Акции" под карусель где стикеры превосходно выводятся. И в итоге будут карусели со стикерами)

Share this post


Link to post
Share on other sites
Другие модули-карусели не годятся. по той причине, что не выводятся стикеры

 

 

это кто так решил?

Share this post


Link to post
Share on other sites

я установил "Intelligent Product Labels & Images" и "Proscroller". Стикеры в карусели не выводятся.

Пробовал и другие связки "Intelligent Product Labels & Images" + "Products carousel" . Стикеры не выводятся.

"Intelligent Product Labels & Images" + "Модули в карусели Plus (все в одном)". Стикеры не выводятся.

Share this post


Link to post
Share on other sites

я установил "Intelligent Product Labels & Images" и "Proscroller". Стикеры в карусели не выводятся.

Пробовал и другие связки "Intelligent Product Labels & Images" + "Products carousel" . Стикеры не выводятся.

"Intelligent Product Labels & Images" + "Модули в карусели Plus (все в одном)". Стикеры не выводятся.

используется vqmod

 

Вы прописали в нем интеграцию  кода стикеров в перечисленные модули? Тогда что Вы хотели?

Share this post


Link to post
Share on other sites

Вы прописали в нем интеграцию  кода стикеров в перечисленные модули? Тогда что Вы хотели?

А какой код надо прописать и где для интеграции?

Share this post


Link to post
Share on other sites

Если у других это работает а у Вас нет - какие могут быть выводы? ))

Смотрите внимательно и делайте так - как написано "по шагам", и всё заработает...

Если нет - в Скайп...

Привет у меня вопрос, как можно сделать так чтобы выставить дополнительные изображение по вертикале а не по горизонтале, уже 3й день копаюсь

Share this post


Link to post
Share on other sites

так и не нашел ответа на вопрос, как сделать так, чтоб если доп картинок менее 3х то кнопки прокрутки не отображались бы?

Share this post


Link to post
Share on other sites

Привет у меня вопрос, как можно сделать так чтобы выставить дополнительные изображение по вертикале а не по горизонтале, уже 3й день копаюсь

я так понял тут Вы то же смотрели и вам не подошел  вариант?

Share this post


Link to post
Share on other sites

Вы прописали в нем интеграцию  кода стикеров в перечисленные модули? Тогда что Вы хотели?

Подскажите пожалуйста, какой код надо пропечатать для интеграции?

Share this post


Link to post
Share on other sites

сделайте выборку кода стикеров с вашего модуля стикеров (его можно взять с vqmod и пропишите в файлах проскроллера

  • +1 1

Share this post


Link to post
Share on other sites

tim21701 подскажите как поменять расстояние между доп.изображениями и размер блока в котором они находятся?

Здесь

post-673241-0-15907500-1390024723_thumb.jpg

Share this post


Link to post
Share on other sites

tim21701 подскажите как поменять расстояние между доп.изображениями и размер блока в котором они находятся?

Размер блока меняется в шаге №3

 

Что бы изменить расстояние между изображениями, откройте файл catalog/view/theme/default/stylesheet/carousel.css и найдите строку:

.jcarousel-skin-opencart .jcarousel-container-horizontal {
	padding: 0px 40px;
}
Измените (к примеру) на 60px
  • +1 2

Share this post


Link to post
Share on other sites

СПАСИБО

Share this post


Link to post
Share on other sites

Спасибо  tim21701 за подробный и такой нужный пост !

Share this post


Link to post
Share on other sites

Подскажите, как сделать вертикальный вариант?

Сорри, разобрался :) 

$('.jcarousel').jcarousel({
vertical: true
});

Share this post


Link to post
Share on other sites

Не стал создавать новую тему, поскольку вопрос близкий. Установил шаблон pav_furniture_quickstart_openkard И почему то все картинки в полосе прокрутки отображаются не больше трёх за раз. Подскажите, где настроить непрерывное отображение?

 

 

7777.jpg

Share this post


Link to post
Share on other sites

а не подскажете что делать со стилями в осстор 1.5.5.1.1 ?  так все работает, но вся верстка информации о товаре летит к чертям(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Если открывается в новом окне, значит что то сделали не правильно. У Вас ColorBox ?

Share this post


Link to post
Share on other sites

Размер блока меняется в шаге №3

 

Что бы изменить расстояние между изображениями, откройте файл catalog/view/theme/default/stylesheet/carousel.css и найдите строку:

.jcarousel-skin-opencart .jcarousel-container-horizontal {
	padding: 0px 40px;
}
Измените (к примеру) на 60px

 

Спасибо большое за дополнение работает отлично.

А не подскажите как можно уменьшить расстояние между изображениями? То что вы указали не помогает (если совсем убрать 40px, то получается как на аттаче). 

post-670760-0-26894800-1394378024_thumb.jpg

Спасибо.

 

ЗЫ в конкретно моем случае если уменьшить растояние между фото, то в блок влезет 4 изображения. 

 

UPD И еще один вопрос(уже был в теме, но остался без ответа) - как сделать так чтоб карусель не появлялась если доп фоток только 3 или меньше (в этом случаее карусель не нужна)? 

Вот как выглядит с 2 фото

post-670760-0-80762900-1394682699_thumb.jpg.

А вот что происходит если прокрутить

post-670760-0-42832100-1394682700_thumb.jpg

Share this post


Link to post
Share on other sites

Подскажите, как сделать вертикальный вариант?

Сорри, разобрался :)

$('.jcarousel').jcarousel({

vertical: true

});

а у вас без проблем все изменилось когда изменили на вертикальную ориентацию? 

У меня ничего не получается, почему-то вот такой вид получаю если ставлю vertical: true

post-670760-0-33120200-1395776026_thumb.jpg

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.

Sign in to follow this  

  • 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.