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


Увеличение Картинки При Наведении Курсора


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

#181 Koderhan

Koderhan

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

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

Отправлено 02 Декабрь 2013 - 17:29

Просмотр сообщенияFlor@@ (02 Декабрь 2013 - 16:52) писал:

Помогите мне, пожалуйста, в карточке товара к стандартным функциям шаблона ОСЕНЬ, прикрутить открывание по клику на картинку большого фото товара в отдельном окне??

ак 20306
Можно сделать ссылку для того чтобы была возможность открыть главное изображение в новом окне.
В файле "Товар". После кода:
<!-- Большое изображение -->
		<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 id="imageWindow"><a href="{GOODS_IMAGE_LARGE}" target="_blank">Открыть в новом окне</a></div>

В файле "main.js" в конец файла добавить:
$(function(){
$('.cloud-zoom-gallery').click(function(){
var MaxImageHref = $(this).attr('href');
$('#imageWindow a').attr('href', MaxImageHref);
});
});

В конец файла style.css добавить стили.
#imageWindow {
	text-align: center;
}


#182 Flor@@

Flor@@

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

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 03 Декабрь 2013 - 10:28

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

#183 Сергей Наумчук

Сергей Наумчук

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

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

Отправлено 26 Декабрь 2013 - 10:03

Добрый день! Возможно пишу не в эту тему,но прошу помощи в следующем: как УБРАТЬ зум при наведении курсора на картинку с товаром,либо заменить его увеличением картинки по клику как,например,в шаблоне "Пластик". Адрес сайта: bizon76.ru

#184 @lina_va

@lina_va

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

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

Отправлено 26 Декабрь 2013 - 16:12

Просмотр сообщенияСергей Наумчук (26 Декабрь 2013 - 10:03) писал:

Добрый день! Возможно пишу не в эту тему,но прошу помощи в следующем: как УБРАТЬ зум при наведении курсора на картинку с товаром,либо заменить его увеличением картинки по клику как,например,в шаблоне "Пластик". Адрес сайта: bizon76.ru
Здравствуйте.
Чтобы убрать зум, в style.css найдите и замените код:
.mousetrap {
width: 100% !important;
}
на
.mousetrap {
display: none;
width: 100% !important;
}


#185 damon

damon

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородПермь

Отправлено 14 Январь 2014 - 09:54

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

сайт 113th.storeland.ru

#186 Stasya

Stasya

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

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

Отправлено 14 Январь 2014 - 17:59

Видимо, Вы не до конца сделали изменения. Сейчас я подправила Вам код. Можете проверить на своем сайте.

#187 damon

damon

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородПермь

Отправлено 15 Январь 2014 - 00:57

Просмотр сообщенияStasya (14 Январь 2014 - 17:59) писал:

Видимо, Вы не до конца сделали изменения. Сейчас я подправила Вам код. Можете проверить на своем сайте.

Блинн...... Я вам памятник поставлю!!!!!!!!! Спасибо огромное !!!!!!

--------------------------------------------------ЭТО ВАМ-----------------------------------




Изображение



#188 demon408

demon408

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

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

Отправлено 21 Январь 2014 - 11:56

Здравствуйте. Помогите на странице товара сделать так, чтобы при нажатии на иконку дополнительного изображения, оно (доп. изображение) не увеличивалось, а отображалось на месте главного. SL-138181

#189 demon408

demon408

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

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

Отправлено 22 Январь 2014 - 10:10

Уважаемая техподдержка, помогите, пожалуйста, решить вопрос!

#190 Сake

Сake

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

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

Отправлено 23 Январь 2014 - 06:30

Найдите в файле main.js код

// В форме оформления заказа при клике на кнопку назад просто переходим на предыдущую страницу
  $('.order form input:submit[name="toprev"]').click(function(){
	var act = this.form.action;
	this.form.action = act + ( act.indexOf( '\?' ) > -1 ? '&' : '?' ) + 'toprev=1';
	this.form.submit();
	return false;
  });

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

// В форме оформления заказа при клике на кнопку назад просто переходим на предыдущую страницу
  $('.order form input:submit[name="toprev"]').click(function(){
	var act = this.form.action;
	this.form.action = act + ( act.indexOf( '\?' ) > -1 ? '&' : '?' ) + 'toprev=1';
	this.form.submit();
	return false;
  });
 
  // Настройки галереи изображений
  $.nyroModalSettings({
	// из всех элементов с атрибут rel="gallery" будем создавать галерею
	gallery: 'gallery',
	// Включаем прокрутку с последнего изображения на первое
	galleryLoop: true
  });
  
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsDataMainImage a').click(function(){
	   
		// Идентификатор главной картинки
	var goodsImageId = $('.goodsDataMainImage input').val(),
	   
		// Маленькое изображение, по которому на самом деле будем кликать
		goodsImageIconElement = $('.goodsDataMainImages input[value="'+goodsImageId+'"]').parent().find('a');
	// Для иконки изображения запустим галерею 
	goodsImageIconElement.nyroModalManual();
	return false;
  });

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

// Главное товарное изображение
  $('.goodsDataMainImages a')
	// При наведении на маленькое изображение изменяем среднее
	.mouseover(function(){
	  var
		// Путь к среднему изображению
		MediumImageUrl = $(this).find('img').attr('rel')
		// Объект в котором расположено среднее изображение товара
		,MainImageObj = $('div.goodsDataMainImage')
		// Главное изображение, в которое будем вставлять новое изображение
		,MainImageImg = MainImageObj.find('img')
		// Вариант главного изображения отображаемого через свойство background
		,MainImageBlockWithBg = MainImageObj.find('a div')
		// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
		,MainImageIdObject = MainImageObj.find('input')
		// Получаем идентификатор этого изображения из соседнего input поля
		,GoodsImageIconId = $(this).parent().find('input').val()
	  ;
	  // Изменяем главное изображение
	  if(0 < MainImageImg.length) {
		MainImageImg.attr('src', MediumImageUrl);
	  } else {
		MainImageBlockWithBg.css({'background': 'url("' + MediumImageUrl + '") no-repeat center center', 'background-size' : 'contain'});
	  }
	  // Изменяем идентификатор главного изображения
	  MainImageIdObject.val(GoodsImageIconId);
	})
	// Изменение главного изображения товара при нажатии на миниатюру
	.click(function(){
	  // Для иконки изображения запустим галерею
	  $(this).nyroModalManual();
	  return false;
	});

и замените на

// Главное товарное изображение
  $('.goodsDataMainImages a')
	// При наведении на маленькое изображение изменяем среднее
	.click(function(){
	  var
		// Путь к среднему изображению
		MediumImageUrl = $(this).find('img').attr('rel')
		// Объект в котором расположено среднее изображение товара
		,MainImageObj = $('div.goodsDataMainImage')
		// Главное изображение, в которое будем вставлять новое изображение
		,MainImageImg = MainImageObj.find('img')
		// Вариант главного изображения отображаемого через свойство background
		,MainImageBlockWithBg = MainImageObj.find('a div')
		// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
		,MainImageIdObject = MainImageObj.find('input')
		// Получаем идентификатор этого изображения из соседнего input поля
		,GoodsImageIconId = $(this).parent().find('input').val()
	  ;
	  // Изменяем главное изображение
	  if(0 < MainImageImg.length) {
		MainImageImg.attr('src', MediumImageUrl);
	  } else {
		MainImageBlockWithBg.css({'background': 'url("' + MediumImageUrl + '") no-repeat center center', 'background-size' : 'contain'});
	  }
	  // Изменяем идентификатор главного изображения
	  MainImageIdObject.val(GoodsImageIconId);
   return(false);
	});


#191 demon408

demon408

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

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

Отправлено 23 Январь 2014 - 10:13

Первый блок заменил.
Точнее этот блок уже был, заменил только  

$('.goodsDataMainImage a, .goodsDataMainImageZoom a').click(function(){

на

$('.goodsDataMainImage a').click(function(){

А вот второго блока у меня и вовсе нет. Посмотрите, пожалуйста, повнимательнее мой шаблон.

#192 Сake

Сake

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

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

Отправлено 24 Январь 2014 - 00:26

У вас в файле main.js присутствует нестандартный код для темы "Техника". Попробуйте сделать следующее - найдите код

// Изменение главного изображения товара при нажатии на миниатюру
  $('.goodsDataMainImages a').click(function(){
	/* Не будем менять главное изображение, юзеру врядли понравится что тут все меняется при его кликах
	// Путь к среднему изображению
	var MediumImageUrl = $(this).find('img').attr('rel'),
	   
		// Главное изображение, в которое будем вставлять новое изображение
		MainImage = $('.goodsDataMainImage img'),
	   
		// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
		MainImageIdObject = $('.goodsDataMainImage input'),
	   
		// Получаем идентификатор этого изображения из соседнего input поля
		GoodsImageIconId = $(this).parent().find('input').val();
   
	// Изменяем главное изображение
	MainImage.attr('src', MediumImageUrl);
   
	// Изменяем идентификатор главного изображения
	MainImageIdObject.val(GoodsImageIconId);
	*/
	// Для иконки изображения запустим галерею 
	$(this).nyroModalManual();
	return false;
  });

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

// Главное товарное изображение
  $('.goodsDataMainImages a')
		// При наведении на маленькое изображение изменяем среднее
		.click(function(){
		  var
				// Путь к среднему изображению
				MediumImageUrl = $(this).find('img').attr('rel')
				// Объект в котором расположено среднее изображение товара
				,MainImageObj = $('div.goodsDataMainImage')
				// Главное изображение, в которое будем вставлять новое изображение
				,MainImageImg = MainImageObj.find('img')
				// Вариант главного изображения отображаемого через свойство background
				,MainImageBlockWithBg = MainImageObj.find('a div')
				// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
				,MainImageIdObject = MainImageObj.find('input')
				// Получаем идентификатор этого изображения из соседнего input поля
				,GoodsImageIconId = $(this).parent().find('input').val()
		  ;
		  // Изменяем главное изображение
		  if(0 < MainImageImg.length) {
				MainImageImg.attr('src', MediumImageUrl);
		  } else {
				MainImageBlockWithBg.css({'background': 'url("' + MediumImageUrl + '") no-repeat center center', 'background-size' : 'contain'});
		  }
		  // Изменяем идентификатор главного изображения
		  MainImageIdObject.val(GoodsImageIconId);
   return(false);
		});


#193 demon408

demon408

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

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

Отправлено 24 Январь 2014 - 11:42

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

Безымянный.png

#194 empty9228

empty9228

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

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

Отправлено 24 Январь 2014 - 12:06

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

#195 Сake

Сake

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

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

Отправлено 25 Январь 2014 - 01:54

Просмотр сообщенияdemon408 (24 Январь 2014 - 11:42) писал:

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

Прикрепленный файл Безымянный.png

Попробуйте в ваш файл стилей main.css добавить

.cloud-zoom img {
  margin: 0 auto;
}


#196 demon408

demon408

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

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

Отправлено 25 Январь 2014 - 14:54

Просмотр сообщенияСake (25 Январь 2014 - 01:54) писал:

Попробуйте в ваш файл стилей main.css добавить

.cloud-zoom img {
margin: 0 auto;
}


Изображение встало по центру, но появилась другая проблема - лупа, установленная по этой ветке, почему-то увеличивает область не по центру, а сбоку (там где было изображение до отцентровки). В общем не знаю как подробнее объяснить, на примере должно быть понятно

#197 Alexey11

Alexey11

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

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 26 Январь 2014 - 14:03

Просмотр сообщенияdemon408 (25 Январь 2014 - 14:54) писал:

Изображение встало по центру, но появилась другая проблема - лупа, установленная по этой ветке, почему-то увеличивает область не по центру, а сбоку (там где было изображение до отцентровки). В общем не знаю как подробнее объяснить, на примере должно быть понятно http://drop-shoping....oods/Платье-391

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

#198 demon408

demon408

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

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

Отправлено 26 Январь 2014 - 14:49

Просмотр сообщенияAlexey11 (26 Январь 2014 - 14:03) писал:

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

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

#199 ne_yana

ne_yana

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

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

Отправлено 27 Январь 2014 - 09:15

Просмотр сообщенияdemon408 (26 Январь 2014 - 14:49) писал:

Вы, вероятно, не поняли суть проблемы. Посмотрите, пожалуйста, повнимательнее на пример страницы товара, который я указал. Ошибка в том, что изображение товара как положено выровнено по центру, а лупа увеличивает его, как будто оно (изображение) выровнено по левому краю. На примере все видно.
Здравствуйте, ответили Вам на почте.

#200 tega4

tega4

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

  • Пользователи
  • PipPipPipPip
  • 599 сообщений
  • ГородМосква

Отправлено 03 Февраль 2014 - 19:07

Помогите разместить окно увеличения поверх остальных окон, а точнее поверх социальных кнопок и комментариев от контакта

Аккаунт SL-268427




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

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