Перейти к содержимому


Увеличение Картинки Сразу По Клику На Маленькой Картинке


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 16

#1 pmarkovich

pmarkovich

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 12 Апрель 2013 - 11:08

Подскажите пожста, как сделать?
По умолчанию, при клике по маленькой картинке, переключается средняя, и еще по ней приходится кликать. Неудобно 2 раза кликать. В Вебвизоре видно как народ тупит не понимая почему картинка не открывается (особенно когда экран немного промотан вниз).

#2 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 12 Апрель 2013 - 11:46

Просмотр сообщенияpmarkovich (12 Апрель 2013 - 11:08) писал:

Подскажите пожста, как сделать?
По умолчанию, при клике по маленькой картинке, переключается средняя, и еще по ней приходится кликать. Неудобно 2 раза кликать. В Вебвизоре видно как народ тупит не понимая почему картинка не открывается (особенно когда экран немного промотан вниз).
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.js".
Найти код:

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

		// Идентификатор главной картинки
	var goodsImageId = $('.goodsDataMainImage input').attr("rel"),

		// Маленькое изображение, по которому на самом деле будем кликать
		goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a');

	// Для иконки изображения запустим галерею  
	goodsImageIconElement.nyroModalManual();
	return false;
  });

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

		// Идентификатор главной картинки
	var goodsImageId = $('.goodsDataMainImage input').attr("rel"),

		// Маленькое изображение, по которому на самом деле будем кликать
		goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a');

	// Для иконки изображения запустим галерею  
	goodsImageIconElement.nyroModalManual();
	return false;
  });

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

		// Идентификатор главной картинки
	var goodsImageId = $('input', this).attr("rel");
		console.log(goodsImageId);
		// Маленькое изображение, по которому на самом деле будем кликать
		goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a');

	// Для иконки изображения запустим галерею  
	goodsImageIconElement.nyroModalManual();
	return false;
  });


#3 pmarkovich

pmarkovich

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 12 Апрель 2013 - 12:23

Хм... ничего не поменялось.

#4 velena168

velena168

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

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 12 Апрель 2013 - 12:35

Тоже. Не работает. А, ведь дельное предложение!

#5 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 12 Апрель 2013 - 16:33

Просмотр сообщенияpmarkovich (12 Апрель 2013 - 12:23) писал:

Хм... ничего не поменялось.
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.js".
Удалить код:

 // Изменение главного изображения товара при нажатии на миниатюру
  $('.goodsDataMainImagesIcon a').click(function(){
		// Путь к среднему изображению
	var MediumImageUrl = $(this).find('img').attr('rel'),

		// Главное изображение, в которое будем вставлять новое изображение
		MainImage = $('.goodsDataMainImage img'),

		// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
		MainImageIdObject = $('.goodsDataMainImage input'),

		// Получаем идентификатор этого изображения из соседнего input поля
		GoodsImageIconId = $(this).parent().find('input').attr("rel");

	// Изменяем главное изображение
	MainImage.attr('src',MediumImageUrl);

	// Изменяем идентификатор главного изображения
	MainImageIdObject.attr("rel",GoodsImageIconId);

	return false;
  });

Добавить в конец файла код:

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

				// Идентификатор главной картинки
		var goodsImageId = $('input', this).attr("rel");
				console.log(goodsImageId);
				// Маленькое изображение, по которому на самом деле будем кликать
				goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a');

		// Для иконки изображения запустим галерею  
		goodsImageIconElement.nyroModalManual();
		return false;
  });


#6 velena168

velena168

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

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 12 Апрель 2013 - 17:00

Просмотр сообщенияKoderhan (12 Апрель 2013 - 16:33) писал:

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.js".
Удалить код:
Спасибо, помогло.

#7 pmarkovich

pmarkovich

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 15 Апрель 2013 - 13:09

Заработало. Но... при клике по главной картинке, она теперь открывается в новой вкладке ((((

#8 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 15 Апрель 2013 - 14:49

Просмотр сообщенияpmarkovich (15 Апрель 2013 - 13:09) писал:

Заработало. Но... при клике по главной картинке, она теперь открывается в новой вкладке ((((
Возможно где то возникла ошибка в js файле и поэтому он не смог выполниться.

#9 pmarkovich

pmarkovich

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 15 Апрель 2013 - 15:10

Просмотр сообщенияKoderhan (15 Апрель 2013 - 14:49) писал:

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

Но я скопировал 1 в 1 ваш код.

#10 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 15 Апрель 2013 - 15:46

Просмотр сообщенияpmarkovich (15 Апрель 2013 - 15:10) писал:

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

#11 pmarkovich

pmarkovich

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 15 Апрель 2013 - 17:11

Просмотр сообщенияKoderhan (15 Апрель 2013 - 15:46) писал:

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

Ну а какие там сейчас? Именно они и есть. Я вставлял только ваши куски кода.

#12 Сake

Сake

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

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

Отправлено 16 Апрель 2013 - 01:10

Найдите в вашем файле main.js

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

и замените на

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


#13 pmarkovich

pmarkovich

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 16 Апрель 2013 - 12:35

СПАСИБО!!! ))) Все заработало.

#14 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 20 Август 2013 - 09:29

Здравствуйте!
Интересно, можно ли запустить такую же схему при  том,  что средняя картинка меняется при НАВЕДЕНИИ на другую "картинку"?
Спасибо!

#15 Vaccina

Vaccina

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

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

Отправлено 21 Август 2013 - 01:58

Найдите в вашем файле main.js

$('.goodsDataMainImagesIcon a').hover(function() {
		$(this).trigger('click');
  });

и замените на

$('.goodsDataMainImagesIcon a').hover(function() {
		$(this).trigger('click');
  });
$('.goodsDataMainImagesIcon a img').click(function() {
   $('.goodsDataMainImage a').trigger('click');
});


#16 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 21 Август 2013 - 10:54

Просмотр сообщенияVaccina (21 Август 2013 - 01:58) писал:

Найдите в вашем файле main.js

$('.goodsDataMainImagesIcon a').hover(function() {
	 $(this).trigger('click');
});

и замените на

$('.goodsDataMainImagesIcon a').hover(function() {
	 $(this).trigger('click');
});
$('.goodsDataMainImagesIcon a img').click(function() {
$('.goodsDataMainImage a').trigger('click');
});
Спасибо!

#17 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 11 Апрель 2014 - 11:43

Для внедрения на шаблоне Осень  подобной функции (при клике на изображение миниатюры в карточке товара меняется главное изображение карточки товара )

необходимо внести следующие изменения

в код файла Main.js  добавить код

// На странице товара при наведении на маленькое изображение - изменяем большое изображение
  $("ul#preview_images li img").click(function() {
	var $src = $(this).attr('src');
	$("#wrap img").attr('src', $src.replace('mini', 'main'));
	return false;
  });
 
  $("ul#preview_images li a").click(function() {
	var $src = $(this).attr('src');	var $href = $(this).attr('href');
	$("#wrap a").attr('href', $href.replace('mini', 'main'));
	return false;
  });


в файле товар заменить этот код

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	{% IFNOT goods_images_empty %}
	  {% FOR goods_images %}
		{% IF goods_images.first %}
		  <div class="clearfix"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %} id="views_block">
			<span class="view_scroll_spacer"><a class="hidden" href="javascript:{}" id="view_scroll_left" title="Предыдущая" style="cursor: default; display: none; opacity: 0;">Предыдущая</a></span>
			<div id="thumbs_list">
			  <ul id="thumbs_list_frame" style="width: 100000px;">
			  {% ENDIF %}
				  <li>
					<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>  
				  </li>
			  {% IF goods_images.last %}
			  </ul>
			</div> 
			<a href="javascript:{}" id="view_scroll_right" title="Следующая" style="cursor: pointer; opacity: 1; display: block;">Следующая</a>
		  </div>
		{% ENDIF %}
	  {% ENDFOR %}
	{% ENDIF %}  
  </div>


на этот

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	{% IFNOT goods_images_empty %}
	  {% FOR goods_images %}
		{% IF goods_images.first %}
		  <div class="clearfix"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %} id="views_block">
			<span class="view_scroll_spacer"><a class="hidden" href="javascript:{}" id="view_scroll_left" title="Предыдущая" style="cursor: default; display: none; opacity: 0;">Предыдущая</a></span>
		   <div id="thumbs_list">
						 <ul id="preview_images" style="width: 100000px;">
						 {% ENDIF %}
								 <li>
								 <a  href="{goods_images.LARGE}" title="{goods_images.NAME}" class="mini">
										 <img src="{goods_images.LARGE}" class="mini" alt="{goods_images.NAME}" rel="{goods_images.LARGE}" />
								 </a>
								 <!-- Идентификатор изображения товара, используется для галереи изображений -->
								 <input type="hidden" rel="{goods_images.ID}" />
								 </li>
						 {% IF goods_images.last %}
						 </ul>
				 </div>
			<a href="javascript:{}" id="view_scroll_right" title="Следующая" style="cursor: pointer; opacity: 1; display: block;">Следующая</a>
		  </div>
		{% ENDIF %}
	  {% ENDFOR %}
	{% ENDIF %} 
  </div>


и этот код

<!-- Большое изображение -->
	<div class="image">
	  <div id="wrap" style="top:0px;z-index:9999;position:relative;background: #fff;margin: 0 auto;text-align: center;">
		{% IF GOODS_IMAGE_EMPTY %}
		  <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}"  class="thumbnail"/>
		{% ELSE %}
		  <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', zoomPosition: '3', showTitle: false, adjustX:-4, adjustY:-4">
			<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image">
		  </a>
		{% ENDIF %}		
	  </div>			 
	</div>

на этот

   <!-- Большое изображение -->
<div class="image">
		 <div id="wrap" >
		 {% IF GOODS_IMAGE_EMPTY %}
				 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
		 {% ELSE %}
				 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="main" rel="group"  >
				 <img src="{GOODS_IMAGE_LARGE}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="main">
				 </a>
				 <!-- Идентификатор изображения товара, используется для галереи изображений -->
				 <input type="hidden" rel="{GOODS_IMAGE_ID}" />
		 {% ENDIF %}		   
		 </div>				
</div>





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

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