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

[REDMAID]

Ирина345 (24 Апрель 2014 - 16:20) писал:

Здравствуйте
1. найдите в main.css код

.withBorder {
border:1px solid #d6d6d6 !important;
min-height: 255px;
}

замените на

.withBorder {
border:1px solid #d6d6d6 !important;
min-height: 40px;
}

3. почитайте информацию по ссылке
http://forum.storela...зображения-при/

Здравствуйте!
1) Ок, получилось! Спасибо!
2) Вы не ответили как сделать увеличение больше? скажем не в 2 а в 5 раз. Речь идет не об окне в котором отображается, а именно в размере зумма.
3) Я уверен что описанный код легко применить и к шаблону сияние даже слабому программисту, но к сожалению, я не являюсь программером, и мои познания далеки даже от самой низкой планки Поэтому ничегно не понятно из того что описано в этой ссылке, т.к. коды в шаблонах не совпадают. Буду рад если Вы мне поможете.
Спасибо.

[Ирина345]

REDMAID (25 Апрель 2014 - 09:06) писал:

Здравствуйте!
1) Ок, получилось! Спасибо!
2) Вы не ответили как сделать увеличение больше? скажем не в 2 а в 5 раз. Речь идет не об окне в котором отображается, а именно в размере зумма.
3) Я уверен что описанный код легко применить и к шаблону сияние даже слабому программисту, но к сожалению, я не являюсь программером, и мои познания далеки даже от самой низкой планки Поэтому ничегно не понятно из того что описано в этой ссылке, т.к. коды в шаблонах не совпадают. Буду рад если Вы мне поможете.
Спасибо.

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

[Taisia]

увеличение картинки по клику  в вашем случае возможно реализовать добавив код в файл main.js
так как у вас установлен зум
то в этом случае и требуется этот код

$(window).load(function(){
  $('.mousetrap').click(function(){
	$('.goodsDataMainImageZoom').find('a').click();
  });
})

сейчас у вас уже внесены изменения и вам ничего самостоятельно делать не нужно.

[Acum56]

Добрый день, аккаунт SL-290922,
Помогите с клауд зумом - если картинка слишком маленькая - то с разных сторон появляются дубли изображения - как их убрать???
Всплывающее окно клауда как в настройках должно быть 500Х500 пикселей

[MikDark]

Acum56 (16 Июнь 2014 - 08:11) писал:

Добрый день, аккаунт SL-290922,
Помогите с клауд зумом - если картинка слишком маленькая - то с разных сторон появляются дубли изображения - как их убрать???
Всплывающее окно клауда как в настройках должно быть 500Х500 пикселей

Укажите, пожалуйста, в каком товаре можно посмотреть данную ошибку и по какой инструкции Вы устанавливали скрипт.

[Acum56]

MikDark (16 Июнь 2014 - 08:25) писал:

Укажите, пожалуйста, в каком товаре можно посмотреть данную ошибку и по какой инструкции Вы устанавливали скрипт.

Я делал по этой инструкции:

Здравствуйте. Рассмотрим установку плагина который описан здесь http://jquerylist.ru...cloud-zoom.html
Первое что нужно это скачать архив с css и js кодом себе на компьютер и распаковать в любую папку.
Затем переходим Сайт-> Редактор тем.
Загружаем на сайт файлы.
ScreenShot 86.jpg
Нажимаем кнопку "Добавить файлы"
Нам нужно два файла "cloud-zoom.1.0.2.js" и "cloud-zoom.css"
ScreenShot 87.jpg
Жмем сохранить.
Теперь нужно подключить эти файлы к сайту. Делается это в файле HTML.
Откроем его для редактирования и вставим код перед </head>.
<!-- Подключение Js плагина -->
<script type="text/javascript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.2.js"></script>
<!-- Подключение css файла плагина -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}cloud-zoom.css" type="text/css" />
Плагин подключен и доступен для остальных файлов.
Теперь его нужно подключить для определенного изображения на сайте. В нашем случаее это страниц "Товара".
(Внимание. Ваш код может отличаться если у вас шаблон не "Сияние")
Открываем файл "Товар".
Найти код:
<a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
Заменить на:
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
<img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
</a>

Применительно к шаблону ТОВАР
Единственное что я изменил, так это вот что

href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:500, zoomHeight:500">

У меня на сайте картинки загруженные для товаров могут быть меньше 500px поэтому при наведении на такие картинки они могут сами себя повторят по бокам или сверху и снизу, вот примеры:
Маленькая картинка:
http://gobelenbazar....kshirskij-Terer
Нормальное увеличение, потому что картинка большая:
http://gobelenbazar....-sumka-Sumka-20

[MikDark]

Acum56 (16 Июнь 2014 - 09:19) писал:

Я делал по этой инструкции:

Здравствуйте. Рассмотрим установку плагина который описан здесь http://jquerylist.ru...cloud-zoom.html
Первое что нужно это скачать архив с css и js кодом себе на компьютер и распаковать в любую папку.
Затем переходим Сайт-> Редактор тем.
Загружаем на сайт файлы.
ScreenShot 86.jpg
Нажимаем кнопку "Добавить файлы"
Нам нужно два файла "cloud-zoom.1.0.2.js" и "cloud-zoom.css"
ScreenShot 87.jpg
Жмем сохранить.
Теперь нужно подключить эти файлы к сайту. Делается это в файле HTML.
Откроем его для редактирования и вставим код перед </head>.
<!-- Подключение Js плагина -->
<script type="text/javascript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.2.js"></script>
<!-- Подключение css файла плагина -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}cloud-zoom.css" type="text/css" />
Плагин подключен и доступен для остальных файлов.
Теперь его нужно подключить для определенного изображения на сайте. В нашем случаее это страниц "Товара".
(Внимание. Ваш код может отличаться если у вас шаблон не "Сияние")
Открываем файл "Товар".
Найти код:
<a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
Заменить на:
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
<img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
</a>

Применительно к шаблону ТОВАР
Единственное что я изменил, так это вот что

href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:500, zoomHeight:500">

У меня на сайте картинки загруженные для товаров могут быть меньше 500px поэтому при наведении на такие картинки они могут сами себя повторят по бокам или сверху и снизу, вот примеры:
Маленькая картинка:
http://gobelenbazar....kshirskij-Terer
Нормальное увеличение, потому что картинка большая:
http://gobelenbazar....-sumka-Sumka-20

В шаблоне main.css найдите код:

.cloud-zoom-big {
border: 4px solid #ccc;
overflow: hidden;
}

и замените на:

.cloud-zoom-big {
border: 4px solid #ccc;
overflow: hidden;
background-repeat:no-repeat;
}

[Acum56]

Все получилось спасибо,
Еще просьба подсказать как сделать всплывающее окно которое будет открываться по клику на изображение, наподобие как реализовано здесь http://klavazip.ru/c...cer/aspire-one/

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

[demon408]

Acum56 (16 Июнь 2014 - 17:18) писал:

Еще просьба подсказать как сделать всплывающее окно которое будет открываться по клику на изображение, наподобие как реализовано здесь http://klavazip.ru/c...cer/aspire-one/

Модераторы, ответьте, пожалуйста, можно ли это сделать? Чтобы по клику на изображение оно увеличивалось.

[Ирина345]

demon408 (01 Июль 2014 - 15:08) писал:

Модераторы, ответьте, пожалуйста, можно ли это сделать? Чтобы по клику на изображение оно увеличивалось.

Здравствуйте, почитайте информацию по данной ссылке.
http://forum.storela...ри/#entry112693

[demon408]

Ирина345 (01 Июль 2014 - 15:39) писал:

Здравствуйте, почитайте информацию по данной ссылке.
http://forum.storela...ри/#entry112693

Там инструкция для Осени. Помогите, пожалуйста, сделать для шаблона Техника. Магазин SL-138181

[Ирина345]

demon408 (01 Июль 2014 - 16:19) писал:

Там инструкция для Осени. Помогите, пожалуйста, сделать для шаблона Техника. Магазин SL-138181

У вас сейчас в карточке товара происходит увеличение картинки товара при наведение, Вы хотите заменить данную функцию, чтобы увеличивалось при клике на картинку?
если так то найдите в шаблоне Товар код

<!-- Большое изображение -->
				<div class="goodsDataMainImage">
					 {% IF GOODS_IMAGE_EMPTY %}
					<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
				  {% ELSE %}			   
																	   
					<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:388, zoomHeight:450">
					<img class="goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
					</a>
				  {% ENDIF %}

замените на

<!-- Большое изображение -->
				<div class="goodsDataMainImage">
					 {% IF GOODS_IMAGE_EMPTY %}
					<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
				  {% ELSE %}			   
																	   
					 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}" class="thumbnail">  
					<img class="goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
					</a>
				  {% ENDIF %}

[demon408]

Ирина345 (01 Июль 2014 - 16:53) писал:

У вас сейчас в карточке товара происходит увеличение картинки товара при наведение, Вы хотите заменить данную функцию, чтобы увеличивалось при клике на картинку?

Нет, я хочу, чтобы обе эти функции работали одновременно - при наведении курсора на фото увеличивала лупа cloud-zoom (как сейчас), а по клику на фото происходило обычное увеличение изображения (как до установки плагина cloud-zoom). Ссылку на пример уже давали выше http://klavazip.ru/c...cer/aspire-one/
Возможно это?

[Сake]

Добавьте в конец вашего файла main.js следующий код

$(function() {
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsDataMainImage').live('click', function(){
   
		// Идентификатор главной картинки
	var goodsImageId = $('.goodsDataMainImage input').val();
	   
		// Маленькое изображение, по которому на самом деле будем кликать
	var goodsImageIconElement = $('.goodsDataMainImages input[value="'+goodsImageId+'"]').parent().find('a');
	// Для иконки изображения запустим галерею 
	goodsImageIconElement.nyroModalManual();
	return false;
  });
});

[Acum56]

Сake (02 Июль 2014 - 06:09) писал:

Добавьте в конец вашего файла main.js следующий код

$(function() {
// Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsDataMainImage').live('click', function(){

	 // Идентификатор главной картинки
var goodsImageId = $('.goodsDataMainImage input').val();
	
	 // Маленькое изображение, по которому на самом деле будем кликать
var goodsImageIconElement = $('.goodsDataMainImages input[value="'+goodsImageId+'"]').parent().find('a');
// Для иконки изображения запустим галерею
goodsImageIconElement.nyroModalManual();
return false;
});
});

Подскажите пожалуйста аналогичный код для шаблона Весна аккаунт SL-290922

[batta]

Здравствуйте
Попробуйте установить данный код

support 2.0 (25 Апрель 2014 - 19:17) писал:

Для дизайна Весна - В шаблоне "Товар" найдите код

{% ENDIF %}
								 <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>										
				 {% IF goods_images.last %}

и замените его на

{% ENDIF %}
								 <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>										
				 {% IF goods_images.last %}

далее найдите код

<!-- Большое изображение -->
		 <div class="image">
			 <div id="wrap" style="top:0px;z-index:9999;position:relative;">
				 {% IF GOODS_IMAGE_EMPTY %}
					 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
				 {% ELSE %}
					 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
						 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
					 </a>
				 {% ENDIF %}		
			 </div>
		 </div>[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]

и замените его на

<!-- Большое изображение -->
		 <div class="image">
			 <div id="wrap" style="top:0px;z-index:9999;position:relative;">
				 {% IF GOODS_IMAGE_EMPTY %}
					 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
				 {% ELSE %}
					 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
						 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
					 </a>
				 {% ENDIF %}		
			 </div>
			 <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
		 </div>
		
		 {% IFNOT goods_images_empty %}
			 <div class="goodsImageList" style="display: none;">
			 {% FOR goods_images %}
				 <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
			 {% ENDFOR %}
			 </div>
		 {% ENDIF %}

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

$(function() {
$('a[rel="gallery"]').fancybox();

// Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom a, .image-additional a').click(function(){
		 if($(this).closest('.image-additional').length) {
			 $('.goodsImageZoom').attr('data', $(this).attr('data'));
			 return(true);
		 }
		 $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
		 return(false);
});
});

если что то будет не понятно пройдите по ссылке там инструкция http://forum.storela...на/#entry135606

[fredshka]

Помогите, плиз!

Хочу сделать на сайте tort-tut.ru вот такой бар сверху, где будет размещена корзина и мой кабинет (показано на картинке)

Также хотелось бы добавить поиск по сайту под логотипом.

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

=Заранее спасибо

Картинка

Прикрепленные изображения

• 

[daria_dnk]

fredshka (06 Июль 2014 - 13:06) писал:

Помогите, плиз!

Хочу сделать на сайте tort-tut.ru вот такой бар сверху, где будет размещена корзина и мой кабинет (показано на картинке)

Также хотелось бы добавить поиск по сайту под логотипом.

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

=Заранее спасибо

Картинка

Здравствуйте! Отвечено в другой ветке форума. Просьба не дублировать вопросы.

[tolikkansk]

1.Я установил zoom, но вот теперь проблема: когда несколько картинок на товар, то работает только для первого, как исправить? Вот пример для одного из товаров: http://z33043.storel...u/goods/Пальто  
2. И ещё баг: картинка поверх выпадающего меню, как исправить?
Заранее Спасибо!

Прикрепленные изображения

• 

[Сake]

Добавьте в ваш файл стилей main.css

.goodsDataMainImage > div {
  z-index: 2 !important;
}

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

<!-- Большое изображение -->
			  <div class="goodsDataMainImage">
				{% IF GOODS_IMAGE_EMPTY %}
				  <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
				{% ELSE %}
				  <!--<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>-->
				  <a itemprop="image" href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
				  <img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
				  </a>
				{% ENDIF %}
				<!-- Идентификатор изображения товара, используется для галереи изображений -->
				<input type="hidden" rel="{GOODS_IMAGE_ID}" />
			  </div>
			  <!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
			  {% IFNOT GOODS_IMAGE_EMPTY %}
				<div class="goodsDataMainImageZoom">
				  <a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
				</div>
			  {% ENDIF %}
			  <!-- Другие изображения товара. Отображаются если есть изображения товара -->
			  {% IFNOT goods_images_empty %}
				{% FOR goods_images %}
				  <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
				  {% IF goods_images.first %}
					<div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
					  <h5>Другие фото {GOODS_NAME}</h5>
				  {% ENDIF %}
				  <!-- Уменьшенное изображение товара -->
				  <div class="goodsDataMainImagesIcon left">
					<a href="{goods_images.LARGE}" rel="gallery"  target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
					<!-- Идентификатор изображения товара, используется для галереи изображений -->
					<input type="hidden" rel="{goods_images.ID}" />
				  </div>
				  <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->

и замените его на

<!-- Большое изображение -->
			  <div class="goodsDataMainImage">
				{% IF GOODS_IMAGE_EMPTY %}
				  <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
				{% ELSE %}
				  <!--<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>-->
				  <a itemprop="image" href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
				  <img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" id="image" />
				  </a>
				{% ENDIF %}
				<!-- Идентификатор изображения товара, используется для галереи изображений -->
				<input type="hidden" rel="{GOODS_IMAGE_ID}" />
			  </div>
			  <!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
			  {% IFNOT GOODS_IMAGE_EMPTY %}
				<div class="goodsDataMainImageZoom">
				  <a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
				</div>
			  {% ENDIF %}
			  <!-- Другие изображения товара. Отображаются если есть изображения товара -->
			  {% IFNOT goods_images_empty %}
				{% FOR goods_images %}
				  <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
				  {% IF goods_images.first %}
					<div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
					  <h5>Другие фото {GOODS_NAME}</h5>
				  {% ENDIF %}
				  <!-- Уменьшенное изображение товара -->
				  <div class="goodsDataMainImagesIcon left">
					<a href="{goods_images.LARGE}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "  target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
					<!-- Идентификатор изображения товара, используется для галереи изображений -->
					<input type="hidden" rel="{goods_images.ID}" />
				  </div>
				  <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->