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


Увеличение Изображения Товара

Автор ogonek7777, 11 дек. 2012 14:41

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

#1 ogonek7777

ogonek7777

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

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

Отправлено 11 Декабрь 2012 - 14:41

Здравствуйте,
Можно ли внести следующие изменения в алгоритме увеличенного изображения:
  • показывать картинку в увеличении без ограничения размером дисплея пользователя. То есть, если картинка больше монитора ПК, то она "вылазит" за края,
  • картинку можно двигать "ладошкой"
  • Фон за картинкой не изменяется на серый и остается активным.
Сайт

#2 Vaccina

Vaccina

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

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

Отправлено 11 Декабрь 2012 - 20:42

Цитата

Фон за картинкой не изменяется на серый и остается активным.

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

#nyroModalFull {
  position: static !important;
}
#nyroModalBg {
  display: none !important;
}
div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
	color: #000 !important;
}
div#nyroModalFull div#nyroModalWrapper a#closeBut {
   background-color: #000 !important;
}

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

#3 ogonek7777

ogonek7777

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

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

Отправлено 11 Декабрь 2012 - 21:16

Просмотр сообщенияVaccina (11 Декабрь 2012 - 20:42) писал:

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

#nyroModalFull {
position: static !important;
}
#nyroModalBg {
display: none !important;
}
div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
color: #000 !important;
}
div#nyroModalFull div#nyroModalWrapper a#closeBut {
background-color: #000 !important;
}

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

Тема была создана в связи с тем, что я хотела дать возможность покупателям увидеть очень дорогой товар в натуральную величину и это для сайта является конкурентным преимуществом. И иконка лупа у меня поэтому названа "посмотреть в полный размер". С другой стороны, покупатели с мелких мониторов могут быть введены в заблуждение, так как увидят изображение меньше, чем оно должно быть.
А можно ли прописать условие: если картинка меньше определенного размера, то открывается как обычно, а если больше - то открывается в новом окне? Спасибо!

#4 Vaccina

Vaccina

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

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

Отправлено 12 Декабрь 2012 - 09:00

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

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
});

и заменить на

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
resizable: false,
autoSizable: false
});

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

#5 ogonek7777

ogonek7777

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

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

Отправлено 12 Декабрь 2012 - 19:35

Просмотр сообщенияVaccina (12 Декабрь 2012 - 09:00) писал:

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

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
});

и заменить на

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
resizable: false,
autoSizable: false
});

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

Это то, что нужно! Вы мне очень помогли. А если можно будет картинку двигать, станет вообще идеально.

#6 Vaccina

Vaccina

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

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

Отправлено 12 Декабрь 2012 - 23:27

Думаю что это к сожалению не получиться сделать.

#7 ogonek7777

ogonek7777

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

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

Отправлено 13 Декабрь 2012 - 12:47

Просмотр сообщенияVaccina (12 Декабрь 2012 - 23:27) писал:

Думаю что это к сожалению не получиться сделать.
Жаль, но все равно огромное спасибо! Очень помогли

#8 agentteam

agentteam

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

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

Отправлено 13 Январь 2013 - 18:36

подскажите как сделать так,

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

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

Иначе у меня посетители не догадываются что можно прокрутить
Спасибо, сайт www.abba7.ru

#9 support 2.0

support 2.0

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

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

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

Просмотр сообщенияagentteam (13 Январь 2013 - 18:36) писал:

подскажите как сделать так,

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

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

Иначе у меня посетители не догадываются что можно прокрутить
Спасибо, сайт www.abba7.ru


Чтобы заменить стрелки, откройте шаблон Товар (Сайт -> Редактор тем) и вначале вставьте
<style>
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalPrev:hover {
background-image: url(адрес левой стрелки);
}
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalNext:hover {
background-image: url(адрес правой стрелки);
}
</style>

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

По поводу маленьких иконок не очень Вас поняла. Про какие именно иконки Вы имеете ввиду? Можете показать на скриншоте?

#10 agentteam

agentteam

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

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

Отправлено 14 Январь 2013 - 11:47

Изображение

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

#11 Koderhan

Koderhan

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

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

Отправлено 14 Январь 2013 - 13:02

Просмотр сообщенияagentteam (14 Январь 2013 - 11:47) писал:

Изображение

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

В файле 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 = $('.goodsDataMainImagesIcon input').attr("rel"),
	   
		// Маленькое изображение, по которому на самом деле будем кликать
		goodsImageIconElement = $(this).find('a');
		//goodsImageIconElement = $(this).parent().find('input').attr("rel");
	// Для иконки изображения запустим галерею 
	goodsImageIconElement.nyroModalManual();
	return false;
  });

#12 agentteam

agentteam

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

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

Отправлено 14 Январь 2013 - 19:01

да. то что нужно, спасибо!!

#13 ogonek7777

ogonek7777

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

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

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

Просмотр сообщенияVaccina (12 Декабрь 2012 - 09:00) писал:

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

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
});

и заменить на

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
resizable: false,
autoSizable: false
});

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

Здравствуйте, обнаружила, что увеличенное изображение перестало закрываться, если щелкнуть вне его. В связи с тем, что Большие изображения изменены так, чтобы открываться в полный размер, независимо от размера экрана, значок "закрыть" скрывается и закрыть уже не получается. Как вернуть обратно, чтобы при щелчке за картинкой она сворачивалась?
Пример

#14 Сake

Сake

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

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

Отправлено 30 Апрель 2013 - 02:32

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

#nyroModalFull {
	position: static !important;
}

и заменить на

#nyroModalFull {
	position: absolute !important;
}

далее найти в main.js

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
resizable: false,
autoSizable: false
});

и заменить на

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
resizable: false,
autoSizable: false,
modal: true
});

#15 ogonek7777

ogonek7777

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

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

Отправлено 30 Апрель 2013 - 20:28

Просмотр сообщенияСake (30 Апрель 2013 - 02:32) писал:

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

#nyroModalFull {
position: static !important;
}

и заменить на

#nyroModalFull {
position: absolute !important;
}

далее найти в main.js

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
resizable: false,
autoSizable: false
});

и заменить на

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
resizable: false,
autoSizable: false,
modal: true
});

К сожалению, не помогло, только квадратик "свернуть" исчез. Картинки так и не закрываются.

#16 Сake

Сake

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

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

Отправлено 01 Май 2013 - 01:50

Попробуйте убрать modal: true оставив 

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
resizable: false,
autoSizable: false
});

и далее в файле стилей main.css найти

#nyroModalBg {
	display: none !important;
}

и заменит на

#nyroModalBg {
	background-color: transparent !important;
}

#17 ogonek7777

ogonek7777

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

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

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

Просмотр сообщенияСake (01 Май 2013 - 01:50) писал:

Попробуйте убрать modal: true оставив

// Настройки галереи изображений
$.nyroModalSettings({
// из всех элементов с атрибут rel="gallery" будем создавать галерею
gallery: 'gallery',
// Включаем прокрутку с последнего изображения на первое
galleryLoop: true,
resizable: false,
autoSizable: false
});

и далее в файле стилей main.css найти

#nyroModalBg {
display: none !important;
}

и заменит на

#nyroModalBg {
background-color: transparent !important;
}
Вроде бы заработало. Спасибо!!

#18 miledi_odessa

miledi_odessa

    Новичок

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

Отправлено 27 Июнь 2013 - 10:00

Помогите, пожалуйста.
у меня на сайте http://miledi-beauty.com.ua увеличенное изображение товара открывается в новой вкладке. как сделать, чтобы оно, как раньше, открывалось на этой же странице на темном фоне?

#19 miyako

miyako

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

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

Отправлено 27 Июнь 2013 - 11:26

Просмотр сообщенияmiledi_odessa (27 Июнь 2013 - 10:00) писал:

Помогите, пожалуйста.
у меня на сайте http://miledi-beauty.com.ua увеличенное изображение товара открывается в новой вкладке. как сделать, чтобы оно, как раньше, открывалось на этой же странице на темном фоне?

В шаблоне HTML перед строкой - 
<script type="text/javascript" src="http://miledishop.storeland.net/share42.js"></script>
вставьте код:
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

Обратно в Страница товара


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Страница товара
  6. Privacy Policy