Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

2

Как Адаптировать Карусель

Автор deluxe72, 27 мая 2013 23:48

Вперед

Авторизуйтесь для ответа в теме

Сообщений в теме: 22

#1 deluxe72

Продвинутый пользователь

Пользователи
58 сообщений

Отправлено 27 Май 2013 - 23:48

Как эту карусель адаптировать под "с этим товаром смотрят" шаблон сияние.


{% IFNOT index_page_new_goods_empty %}
<div id="ca-container" class="ca-container">
  <div class="ca-wrapper">
        {% FOR index_page_new_goods %}
        <div class="ca-item ca-item-1">
                        <div class="ca-item-main">
                                <div class="ca-icon">
                         <a href="{index_page_new_goods.URL}" title="Перейти на страницу «{index_page_new_goods.NAME}»"><img class="goods-image-other" src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{index_page_new_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a>
                                </div>
                                <h2>{index_page_new_goods.NAME}</h2>
                                <h4>

                  <span class="ca-quote">“</span>
                  <span>Цена: <a href="{index_page_new_goods.URL_MIN_PRICE_NOW}">{index_page_new_goods.MIN_PRICE_NOW} рублей</a> </span>

                  {% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %}
                          <span><a href="{index_page_new_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT} рубля</a>
                  {% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %}
                          <a href="{index_page_new_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_new_goods.MIN_PRICE_OLD} рубля</a></span>
                  {% ENDIF %}
                  </span>
                                </h4>

                        </div>
                        <div class="ca-content-wrapper">
                                <div class="ca-content">
                                        <h6>{index_page_new_goods.NAME}</h6>
                                        <a href="#" class="ca-close">Закрыть</a>
                                        <div class="ca-content-text">
                                                <p>{index_page_new_goods.DESCRIPTION_SHORT}</p>
                                        </div>
                                        <ul>
                                                <li><a href="{index_page_new_goods.URL}" title="Перейти на страницу «{index_page_new_goods.NAME}»">Подробнее...</a></li>

                                        </ul>
                                </div>
                        </div>
                </div>
        {% ENDFOR index_page_new_goods %}

        </div>
</div>

<script type="text/javascript">// <![CDATA[
$('#ca-container').contentcarousel({
  // Скорость анимации проскальзывания
  sliderSpeed   : 500,
        // Эффект анимации проскальзывания
        sliderEasing    : 'easeOutExpo',
        // Скорость анимации открытия/закрытия пункта
        itemSpeed               : 400,
        // Скорость анимации открытия/закрытия пункта
        itemEasing              : 'easeOutExpo',
        // Количество пунктов для прокручивания за один шаг
        scroll                  : 3
});
// ]]></script>
{%ENDIF%}

Наверх

#2 Сake

Активный участник

Модератоpы
5 979 сообщений

Отправлено 28 Май 2013 - 03:02

В шаблоне "Товар" найдите

<!-- С этим товаром смотрят -->
	{% IFNOT related_views_goods_empty %}
	  <h3>С этим товаром смотрят</h3><br />
	  <table>
		<tr>
		  {% FOR related_views_goods %}
		  <td class="goodsListItem">
			<div class="goodsListItemBlock withBorder cornerAll">
			  <table class="goodsListItemImage">
				<tr>
				  <td>
					<a href="{related_views_goods.URL}" title="Перейти на страницу &laquo;{related_views_goods.NAME}&raquo;"><img class="goods-image-other" src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{related_views_goods.IMAGE_OTHER}{% ENDIF %}" alt="{related_views_goods.NAME}" /></a>
				  </td>
				</tr>
			  </table>
			  <h3 class="goodsListItemName"><a href="{related_views_goods.URL}" title="Перейти на страницу &laquo;{related_views_goods.NAME}&raquo;">{related_views_goods.NAME}</a></h3>
			  <div class="goodsListItemPriceNew">
				<a href="{related_views_goods.URL_MIN_PRICE_NOW}">{related_views_goods.MIN_PRICE_NOW | money_format}</a>
			  </div>
			  <div class="goodsListItemPriceOld">
				{% IF related_views_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>related_views_goods.MIN_PRICE_NOW %}
				<a href="{related_views_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{related_views_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
				{% ELSEIF related_views_goods.MIN_PRICE_OLD>related_views_goods.MIN_PRICE_NOW %}
				<a href="{related_views_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{related_views_goods.MIN_PRICE_OLD | money_format}</a>
				{% ENDIF %}
			  </div>
			</div>
		  </td>
		  {% IFNOT related_views_goods.last %}{related_views_goods.index | is_divided("3","</tr><tr>","")}{% ENDIF %}
		{% ENDFOR %}
	  </tr>
	  </table><br /><br />
	{% ENDIF %}
	<!-- END С этим товаром смотрят -->

и замените на

<!-- С этим товаром смотрят -->
	{% IFNOT related_views_goods_empty %}
	  <h3>С этим товаром смотрят</h3><br />
<div id="ca-container" class="ca-container">
   <div class="ca-wrapper">
		 {% FOR related_views_goods %}
		 <div class="ca-item ca-item-1">
						 <div class="ca-item-main">
								 <div class="ca-icon">
						  <a href="{related_views_goods.URL}" title="Перейти на страницу «{related_views_goods.NAME}»"><img class="goods-image-other" src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{related_views_goods.IMAGE_OTHER}{% ENDIF %}" alt="{related_views_goods.NAME}" /></a>
								 </div>
								 <h2>{related_views_goods.NAME}</h2>
								 <h4>
				   <span class="ca-quote">“</span>
				   <span>Цена: <a href="{related_views_goods.URL_MIN_PRICE_NOW}">{related_views_goods.MIN_PRICE_NOW} рублей</a> </span>
				   {% IF related_views_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>related_views_goods.MIN_PRICE_NOW %}
						   <span><a href="{related_views_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{related_views_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT} рубля</a>
				   {% ELSEIF related_views_goods.MIN_PRICE_OLD>related_views_goods.MIN_PRICE_NOW %}
						   <a href="{related_views_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{related_views_goods.MIN_PRICE_OLD} рубля</a></span>
				   {% ENDIF %}
				   </span>
								 </h4>
						 </div>
						 <div class="ca-content-wrapper">
								 <div class="ca-content">
										 <h6>{related_views_goods.NAME}</h6><!--Заголовок облости содержания -->
										 <a href="#" class="ca-close">Закрыть</a>
										 <div class="ca-content-text">
												 <p>{related_views_goods.DESCRIPTION_SHORT}</p>
										 </div>
										 <ul>
												 <li><a href="{related_views_goods.URL}" title="Перейти на страницу «{related_views_goods.NAME}»">Подробнее...</a></li>
										 </ul>
								 </div>
						 </div>
				 </div>
		 {% ENDFOR related_views_goods %}
		 </div><!-- ca-wrapper -->
</div><!-- ca-container -->

<script type="text/javascript">// <![CDATA[
$('#ca-container').contentcarousel({
   // Скорость анимации проскальзывания
   sliderSpeed   : 500,
		 // Эффект анимации проскальзывания
		 sliderEasing	: 'easeOutExpo',
		 // Скорость анимации открытия/закрытия пункта
		 itemSpeed			   : 400,
		 // Скорость анимации открытия/закрытия пункта
		 itemEasing			  : 'easeOutExpo',
		 // Количество пунктов для прокручивания за один шаг
		 scroll				  : 3
});
// ]]></script>
{%ENDIF%}
<!--END карусель-->

Наверх

#3 deluxe72

Продвинутый пользователь

Пользователи
58 сообщений

Отправлено 28 Май 2013 - 15:10

Сake (28 Май 2013 - 03:02) писал:

В шаблоне "Товар" найдите

<!-- С этим товаром смотрят -->
{% IFNOT related_views_goods_empty %}
	 <h3>С этим товаром смотрят</h3><br />
	 <table>
	 <tr>
		 {% FOR related_views_goods %}
		 <td class="goodsListItem">
		 <div class="goodsListItemBlock withBorder cornerAll">
			 <table class="goodsListItemImage">
			 <tr>
				 <td>
				 <a href="{related_views_goods.URL}" title="Перейти на страницу &laquo;{related_views_goods.NAME}&raquo;"><img class="goods-image-other" src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{related_views_goods.IMAGE_OTHER}{% ENDIF %}" alt="{related_views_goods.NAME}" /></a>
				 </td>
			 </tr>
			 </table>
			 <h3 class="goodsListItemName"><a href="{related_views_goods.URL}" title="Перейти на страницу &laquo;{related_views_goods.NAME}&raquo;">{related_views_goods.NAME}</a></h3>
			 <div class="goodsListItemPriceNew">
			 <a href="{related_views_goods.URL_MIN_PRICE_NOW}">{related_views_goods.MIN_PRICE_NOW | money_format}</a>
			 </div>
			 <div class="goodsListItemPriceOld">
			 {% IF related_views_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>related_views_goods.MIN_PRICE_NOW %}
			 <a href="{related_views_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{related_views_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
			 {% ELSEIF related_views_goods.MIN_PRICE_OLD>related_views_goods.MIN_PRICE_NOW %}
			 <a href="{related_views_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{related_views_goods.MIN_PRICE_OLD | money_format}</a>
			 {% ENDIF %}
			 </div>
		 </div>
		 </td>
		 {% IFNOT related_views_goods.last %}{related_views_goods.index | is_divided("3","</tr><tr>","")}{% ENDIF %}
	 {% ENDFOR %}
	 </tr>
	 </table><br /><br />
{% ENDIF %}
<!-- END С этим товаром смотрят -->

и замените на

<!-- С этим товаром смотрят -->
{% IFNOT related_views_goods_empty %}
	 <h3>С этим товаром смотрят</h3><br />
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
		 {% FOR related_views_goods %}
		 <div class="ca-item ca-item-1">
						 <div class="ca-item-main">
								 <div class="ca-icon">
						 <a href="{related_views_goods.URL}" title="Перейти на страницу «{related_views_goods.NAME}»"><img class="goods-image-other" src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{related_views_goods.IMAGE_OTHER}{% ENDIF %}" alt="{related_views_goods.NAME}" /></a>
								 </div>
								 <h2>{related_views_goods.NAME}</h2>
								 <h4>
				 <span class="ca-quote">“</span>
				 <span>Цена: <a href="{related_views_goods.URL_MIN_PRICE_NOW}">{related_views_goods.MIN_PRICE_NOW} рублей</a> </span>
				 {% IF related_views_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>related_views_goods.MIN_PRICE_NOW %}
						 <span><a href="{related_views_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{related_views_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT} рубля</a>
				 {% ELSEIF related_views_goods.MIN_PRICE_OLD>related_views_goods.MIN_PRICE_NOW %}
						 <a href="{related_views_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{related_views_goods.MIN_PRICE_OLD} рубля</a></span>
				 {% ENDIF %}
				 </span>
								 </h4>
						 </div>
						 <div class="ca-content-wrapper">
								 <div class="ca-content">
										 <h6>{related_views_goods.NAME}</h6><!--Заголовок облости содержания -->
										 <a href="#" class="ca-close">Закрыть</a>
										 <div class="ca-content-text">
												 <p>{related_views_goods.DESCRIPTION_SHORT}</p>
										 </div>
										 <ul>
												 <li><a href="{related_views_goods.URL}" title="Перейти на страницу «{related_views_goods.NAME}»">Подробнее...</a></li>
										 </ul>
								 </div>
						 </div>
				 </div>
		 {% ENDFOR related_views_goods %}
		 </div><!-- ca-wrapper -->
</div><!-- ca-container -->

<script type="text/javascript">// <![CDATA[
$('#ca-container').contentcarousel({
// Скорость анимации проскальзывания
sliderSpeed : 500,
		 // Эффект анимации проскальзывания
		 sliderEasing : 'easeOutExpo',
		 // Скорость анимации открытия/закрытия пункта
		 itemSpeed			 : 400,
		 // Скорость анимации открытия/закрытия пункта
		 itemEasing			 : 'easeOutExpo',
		 // Количество пунктов для прокручивания за один шаг
		 scroll				 : 3
});
// ]]></script>
{%ENDIF%}
<!--END карусель-->

спасибо

Наверх

#4 blessdress

Продвинутый пользователь

Пользователи
63 сообщений

Отправлено 07 Октябрь 2013 - 21:46

Хотела сделать "карусель" из "с этим товаром смотрят" по предложенной выше схеме.
не вышло. Вышло вот это: http://bless-dress.r...d-Wedding-Dress
что я делаю не так? посоветуйте, плиз!

Наверх

#5 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 08 Октябрь 2013 - 03:50

Найдите в шаблоне "HTML" строки

&lt;script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
&lt;script type="text/javascript" src="/web/upload/assets/js/150/149839/jquery.jcarousel.js"></script>

и замените их на

&lt;script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
&lt;script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js"></script>

после загрузите файл jquery.jcarousel.js который вы можете скачать из сообщения http://forum.storela...ров/#entry82726

так же почитайте тему форума http://forum.storela...рят/#entry65830

Наверх

#6 blessdress

Продвинутый пользователь

Пользователи
63 сообщений

Отправлено 08 Октябрь 2013 - 08:13

файл загрузила, строку заменила, ничего не изменилось

Наверх

#7 blessdress

Продвинутый пользователь

Пользователи
63 сообщений

Отправлено 08 Октябрь 2013 - 08:57

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

Наверх

#8 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 09 Октябрь 2013 - 03:32

Вам необходимо подключить так же и стили карусели. Найдите в вашем шаблоне "HTML" строи

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js"></script>

и замените их на

<link rel="stylesheet" href="{ASSETS_STYLES_PATH}carousel.css" type="text/css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

скачать файл "carousel.css" вы можете из все той же темы. После этого в шаблоне "HTML" найдите и удалите

<script type="text/javascript">// <![CDATA[
$('#ca-container').contentcarousel({
   // Скорость анимации проскальзывания
   sliderSpeed   : 500,
				 // Эффект анимации проскальзывания
				 sliderEasing   : 'easeOutExpo',
				 // Скорость анимации открытия/закрытия пункта
				 itemSpeed						 : 400,
				 // Скорость анимации открытия/закрытия пункта
				 itemEasing					   : 'easeOutExpo',
				 // Количество пунктов для прокручивания за один шаг
				 scroll						   : 3
});
// ]]></script>

далее в файл main.js добавьте

jQuery(document).ready(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
jQuery('.d-carousel .carousel').jcarousel({
				 scroll: 1
});
});

Наверх

#9 blessdress

Продвинутый пользователь

Пользователи
63 сообщений

Отправлено 09 Октябрь 2013 - 09:26

Vaccina (09 Октябрь 2013 - 03:32) писал:

Вам необходимо подключить так же и стили карусели. Найдите в вашем шаблоне "HTML" строи

 &amp;lt;script type="text/javascript" src="{ASSETS_JS_PATH}main.js"> &amp;lt;script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js">

и замените их на

&amp;lt;script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js"> &amp;lt;script type="text/javascript" src="{ASSETS_JS_PATH}main.js">

скачать файл "carousel.css" вы можете из все той же темы. После этого в шаблоне "HTML" найдите и удалите

 &amp;lt;script type="text/javascript">//

далее в файл main.js добавьте

 jQuery(document).ready(function() { // Initialise the first and second carousel by class selector. // Note that they use both the same configuration options (none in this case). jQuery('.d-carousel .carousel').jcarousel({ scroll: 1 }); });

Загрузила, заменила, но не нашла фрагмента кода, который надо удалить в HTML
так что в очередной раз ничего не вышло..

Наверх

#10 miyako

Активный участник

Модератоpы
5 372 сообщений

Отправлено 09 Октябрь 2013 - 12:05

blessdress (09 Октябрь 2013 - 09:26) писал:

Загрузила, заменила, но не нашла фрагмента кода, который надо удалить в HTML так что в очередной раз ничего не вышло..

Этот код Вы сможете найти в шаблоне Товар и удалить его

Наверх

#11 blessdress

Продвинутый пользователь

Пользователи
63 сообщений

Отправлено 09 Октябрь 2013 - 13:30

удалила, но пока ничего не поменялось.
Подскажите, в како части кода файла main.js добавлять вот это:

jQuery(document).ready(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
jQuery('.d-carousel .carousel').jcarousel({
scroll: 1
});
});

может я не в той части его поставила?

Наверх

#12 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 10 Октябрь 2013 - 02:42

Данный код вам необходимо вставлять в самый конец файла main.js

Наверх

#13 blessdress

Продвинутый пользователь

Пользователи
63 сообщений

Отправлено 10 Октябрь 2013 - 08:37

Vaccina (10 Октябрь 2013 - 02:42) писал:

Данный код вам необходимо вставлять в самый конец файла main.js

тогда я сделала все верно, но все равно не выходит карусель

)))

Наверх

#14 miyako

Активный участник

Модератоpы
5 372 сообщений

Отправлено 10 Октябрь 2013 - 10:25

blessdress (10 Октябрь 2013 - 08:37) писал:

тогда я сделала все верно, но все равно не выходит карусель

)))

Для выбранной Вам карусели подходят другие файлы скриптов и стилей.
вот оригинал инструкции - http://forum.storela...дер/#entry32258

Поэтому код в шаблоне HTML -

<link rel="stylesheet" href="{ASSETS_STYLES_PATH}carousel.css" type="text/css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js"></script>

замените на -

<!-- Подключаем карусель к сайту-->
<!--Стили-->
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}carusel-styles.css" />
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}jquery.jscrollpane.css" media="all" />
<!--Скрипты-->
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.easing.1.3.js"></script>
<!-- Скрипт jScrollPane -->
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.mousewheel.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.contentcarousel.js"></script>

А из инструкции возьмите архив carusel-styles.zip , и загрузите из него файлы в раздел Сайт - Редактор шаблонов

Наверх

#15 blessdress

Продвинутый пользователь

Пользователи
63 сообщений

Отправлено 10 Октябрь 2013 - 19:21

miyako (10 Октябрь 2013 - 10:25) писал:

Для выбранной Вам карусели подходят другие файлы скриптов и стилей.
вот оригинал инструкции - http://forum.storela...дер/#entry32258

Поэтому код в шаблоне HTML -

<link rel="stylesheet" href="{ASSETS_STYLES_PATH}carousel.css" type="text/css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js"></script>

замените на -

<!-- Подключаем карусель к сайту-->
<!--Стили-->
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}carusel-styles.css" />
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}jquery.jscrollpane.css" media="all" />
<!--Скрипты-->
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.easing.1.3.js"></script>
<!-- Скрипт jScrollPane -->
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.mousewheel.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.contentcarousel.js"></script>

А из инструкции возьмите архив carusel-styles.zip , и загрузите из него файлы в раздел Сайт - Редактор шаблонов

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

Наверх

#16 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 11 Октябрь 2013 - 01:27

Как я поняла у вас структура html карусели уже изначально была выполнена из какой-то темы и для другой карусели. Чтобы карусель наконец-то заработала - в main.js найдите ранее добавленный код

jQuery(document).ready(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
jQuery('.d-carousel .carousel').jcarousel({
								 scroll: 1
});
});

и замените на

$('#ca-container').contentcarousel({
  // Скорость анимации проскальзывания
  sliderSpeed   : 500,
		// Эффект анимации проскальзывания
		sliderEasing	: 'easeOutExpo',
		// Скорость анимации открытия/закрытия пункта
		itemSpeed			   : 400,
		// Скорость анимации открытия/закрытия пункта
		itemEasing			  : 'easeOutExpo',
		// Количество пунктов для прокручивания за один шаг
		scroll				  : 1
});

после этого действия карусель должна заработать.

Наверх

#17 blessdress

Продвинутый пользователь

Пользователи
63 сообщений

Отправлено 11 Октябрь 2013 - 09:18

Vaccina (11 Октябрь 2013 - 01:27) писал:

Как я поняла у вас структура html карусели уже изначально была выполнена из какой-то темы и для другой карусели. Чтобы карусель наконец-то заработала - в main.js найдите ранее добавленный код

jQuery(document).ready(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
jQuery('.d-carousel .carousel').jcarousel({
								 scroll: 1
});
});

и замените на

$('#ca-container').contentcarousel({
// Скорость анимации проскальзывания
sliderSpeed : 500,
	 // Эффект анимации проскальзывания
	 sliderEasing : 'easeOutExpo',
	 // Скорость анимации открытия/закрытия пункта
	 itemSpeed			 : 400,
	 // Скорость анимации открытия/закрытия пункта
	 itemEasing			 : 'easeOutExpo',
	 // Количество пунктов для прокручивания за один шаг
	 scroll				 : 1
});

после этого действия карусель должна заработать.

мне кажется, или я уже меняла все это в обратном порядке по вашему же совету в сообщении от 09 October 2013 - 04:32?

Удалила-вставила еще раз. результат все тот же нулевой.

Наверх

#18 Сake

Активный участник

Модератоpы
5 979 сообщений

Отправлено 12 Октябрь 2013 - 04:57

На данный момент проблема возникает из-за досрочного выполнения кода в main.js вам необходимо вставленный код, а именно

$('#ca-container').contentcarousel({
  // Скорость анимации проскальзывания
  sliderSpeed   : 500,
				// Эффект анимации проскальзывания
				sliderEasing	: 'easeOutExpo',
				// Скорость анимации открытия/закрытия пункта
				itemSpeed						  : 400,
				// Скорость анимации открытия/закрытия пункта
				itemEasing						: 'easeOutExpo',
				// Количество пунктов для прокручивания за один шаг
				scroll							: 1
});

заменить на конструкцию

$(function() {
$('#ca-container').contentcarousel({
  // Скорость анимации проскальзывания
  sliderSpeed   : 500,
				// Эффект анимации проскальзывания
				sliderEasing	: 'easeOutExpo',
				// Скорость анимации открытия/закрытия пункта
				itemSpeed						  : 400,
				// Скорость анимации открытия/закрытия пункта
				itemEasing						: 'easeOutExpo',
				// Количество пунктов для прокручивания за один шаг
				scroll							: 1
});
});

если бы этот код был изначально вставлен перед строкой

minDate		 : new Date(),
  firstDay	  : 1
});

то этого изменения можно было бы не делать.

Наверх

#19 blessdress

Продвинутый пользователь

Пользователи
63 сообщений

Отправлено 12 Октябрь 2013 - 10:49

Сake (12 Октябрь 2013 - 04:57) писал:

На данный момент проблема возникает из-за досрочного выполнения кода в main.js вам необходимо вставленный код, а именно

$('#ca-container').contentcarousel({
// Скорость анимации проскальзывания
sliderSpeed : 500,
			 // Эффект анимации проскальзывания
			 sliderEasing : 'easeOutExpo',
			 // Скорость анимации открытия/закрытия пункта
			 itemSpeed						 : 400,
			 // Скорость анимации открытия/закрытия пункта
			 itemEasing					 : 'easeOutExpo',
			 // Количество пунктов для прокручивания за один шаг
			 scroll						 : 1
});

заменить на конструкцию

$(function() {
$('#ca-container').contentcarousel({
// Скорость анимации проскальзывания
sliderSpeed : 500,
			 // Эффект анимации проскальзывания
			 sliderEasing : 'easeOutExpo',
			 // Скорость анимации открытия/закрытия пункта
			 itemSpeed						 : 400,
			 // Скорость анимации открытия/закрытия пункта
			 itemEasing					 : 'easeOutExpo',
			 // Количество пунктов для прокручивания за один шаг
			 scroll						 : 1
});
});

если бы этот код был изначально вставлен перед строкой

minDate		 : new Date(),
firstDay	 : 1
});

то этого изменения можно было бы не делать.

Спасибо тебе, добрая Печенька!

)
А если серьезно, благодарю, что наконец карусель заработала!

Еще несколько вопросов можно? Как уменьшить поле, отводимое под товар в карусели? вокруг фото у меня большое пустое поле остается. пыталась найти параметры высоты и ширины в шаблоне "товар" в блоке "с этим товаром смотрят", не нашла.
Ну и как сделать, чтоб одновременно показываемых товаров в ряду карусели было не 2, а хотя бы 3-4?

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

Наверх

#20 miyako

Активный участник

Модератоpы
5 372 сообщений

Отправлено 12 Октябрь 2013 - 11:33

blessdress (12 Октябрь 2013 - 10:49) писал:

Спасибо тебе, добрая Печенька!

)
А если серьезно, благодарю, что наконец карусель заработала!

Еще несколько вопросов можно? Как уменьшить поле, отводимое под товар в карусели? вокруг фото у меня большое пустое поле остается. пыталась найти параметры высоты и ширины в шаблоне "товар" в блоке "с этим товаром смотрят", не нашла.
Ну и как сделать, чтоб одновременно показываемых товаров в ряду карусели было не 2, а хотя бы 3-4?

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

Найдите код в carusel-styles.css -

.ca-item {
position: relative;
float: left;
width: 330px;
height: 100%;
text-align: center;
}

и замените на -

.ca-item {
position: relative;
float: left;
width: 253px;
height: 62%;
text-align: center;
}

Далее найдите код в шаблоне Товар -

<a href="{related_views_goods.URL}" title="Перейти на страницу «{related_views_goods.NAME}»"><img class="goods-image-other" src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{related_views_goods.IMAGE_OTHER}{% ENDIF %}" alt="{related_views_goods.NAME}" /></a>

и замените на -

<a href="{related_views_goods.URL}" title="Перейти на страницу «{related_views_goods.NAME}»" target="_blank"><img class="goods-image-other" src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{related_views_goods.IMAGE_OTHER}{% ENDIF %}" alt="{related_views_goods.NAME}" /></a>

Чуть ниже найдите код -

	 <li><a href="{related_views_goods.URL}" title="Перейти на страницу «{related_views_goods.NAME}»">Подробнее...</a></li>

и замените на -

	 <li><a href="{related_views_goods.URL}" title="Перейти на страницу «{related_views_goods.NAME}»" target="_blank">Подробнее...</a></li>

Наверх

Вперед

Обратно в Изменение общей стилистики

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

Как Адаптировать Карусель

Количество пользователей, читающих эту тему: 0

Войти

Google поиск