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


Как Сделать Увеличение Изображения Товара Как В Сиянии


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

#41 Сake

Сake

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

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

Отправлено 15 Ноябрь 2013 - 00:11

Ранее вы задавали аналогичный вопрос и ответ был дан в теме форума http://forum.storela...ра/#entry101869
Пожалуйста, не дублируйте ваши вопросы. В противном случае они будут удалены без предупреждения.

Просмотр сообщенияotdyh-i-son.ru (13 Ноябрь 2013 - 22:29) писал:

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

Вам вероятно так же подойдет тема форума http://forum.storela...ра/#entry101869

#42 ooosik

ooosik

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

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

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

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

#43 Джейн

Джейн

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

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

Отправлено 15 Ноябрь 2013 - 20:16

Просмотр сообщенияСake (15 Ноябрь 2013 - 00:11) писал:

Ранее вы задавали аналогичный вопрос и ответ был дан в теме форума http://forum.storela...ра/#entry101869
Пожалуйста, не дублируйте ваши вопросы. В противном случае они будут удалены без предупреждения.

Извините, тот ответ почему то упустила из виду. :rolleyes: Все равно изображение не увеличивается...

#44 Сake

Сake

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

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

Отправлено 16 Ноябрь 2013 - 00:30

Просмотр сообщенияooosik (15 Ноябрь 2013 - 09:11) писал:

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

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

По поводу ошибки - в файле main.js найдите

$('#thumbs_list').trigger('goto', 1);
$('#thumbs_list').trigger('goto', 0);
});/

и замените на

$('#thumbs_list').trigger('goto', 1);
$('#thumbs_list').trigger('goto', 0);
});*/

Просмотр сообщенияДжейн (15 Ноябрь 2013 - 20:16) писал:

Извините, тот ответ почему то упустила из виду. :rolleyes: Все равно изображение не увеличивается...

Ответил вам в той теме.

#45 Flor@@

Flor@@

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

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

Отправлено 16 Ноябрь 2013 - 06:37

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

Почему не подходит ранее предложенный способ http://forum.storela...ак/#entry101602
да потому что я пробовала, карусель убралась, а изображение стало открываться = делаться большим в том же окне и все, а длее помощи не получила и ваши сотрудники убедили меня в ненужности для меня этих изменений,

то есть  ВАШИ СОТРУДНИКИ МЕНЯ ЗАПУТАЛИ:
сообщение №2 была выложена частичная инструкция
сообщщение №5 сообщаю, что выложенную часть инструкции выполнила и что жду помощи и дальнейших инструкций
сообщение №19, №35 предложили отменить выполненные инструкции
сообщение №34 сообщаю, что отменила изменения внесенные согласно сообщения №2
сообщение №39 Вы спрашиваете, почему не подходит предложенный ранее способ, да потому что ваши ранее ваши же можераторы сказали мне о том, что он не подходит и попросили его отменить в сообщениях: №19 и №34.

А в целом-то мне нужно тоже самое что и Oooosik, помогите, наконец-то, что нужно выполнять в этой ветке, для получения нужного результата?????????
необходимо:
1. сохранить карусель превьюшек, (работает сейчас, так как отменила первую инструкцию)
2. при наведении курсором на фото чтобы был zoom фрагмента рисунка именно как это было в сиянии (работает сейчас, но не совсем так как надо).
3. сделать так чтобы по двойному щелчку большие фото открывались в наплывающем верхнем, "соседнем" окне, НЕ РАБОТАЕТ В СТАНДАРТЕ ОСЕНИ!!!!

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

  • вид сайта 15.jpg
  • вид сайта 15.jpg

Сообщение отредактировал otdyh-i-son.ru: 16 Ноябрь 2013 - 07:05


#46 Flor@@

Flor@@

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

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

Отправлено 16 Ноябрь 2013 - 06:44

Просмотр сообщенияooosik (13 Ноябрь 2013 - 17:02) писал:

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

вот только модераторы сначала в сообщении №19 говорят отменить выполненную инструкцию из сообщения №2, а затем говорят, что вовсе не надо было ее отменять..

#47 ooosik

ooosik

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

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

Отправлено 16 Ноябрь 2013 - 07:26

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

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

#48 ooosik

ooosik

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

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

Отправлено 16 Ноябрь 2013 - 13:19

Просмотр сообщенияotdyh-i-son.ru (16 Ноябрь 2013 - 06:44) писал:

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

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

#49 ooosik

ooosik

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

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

Отправлено 18 Ноябрь 2013 - 16:37

Ответьте пожалуйста

Просмотр сообщенияooosik (16 Ноябрь 2013 - 07:26) писал:

Да я именно это имею в виду, но хотелось бы в дополнение к этой функции иметь возможность увеличивать изображения из превью
И еще при увеличении изображения сайт прыгает вправо, после того как закрываешь возвращается на место, это очень видно глазу как убрать? Девушка выше писала что у нее так же


#50 Сake

Сake

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

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

Отправлено 19 Ноябрь 2013 - 03:43

Просмотр сообщенияotdyh-i-son.ru (16 Ноябрь 2013 - 06:37) писал:

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

то есть  ВАШИ СОТРУДНИКИ МЕНЯ ЗАПУТАЛИ:
сообщение №2 была выложена частичная инструкция
сообщщение №5 сообщаю, что выложенную часть инструкции выполнила и что жду помощи и дальнейших инструкций
сообщение №19, №35 предложили отменить выполненные инструкции
сообщение №34 сообщаю, что отменила изменения внесенные согласно сообщения №2
сообщение №39 Вы спрашиваете, почему не подходит предложенный ранее способ, да потому что ваши ранее ваши же можераторы сказали мне о том, что он не подходит и попросили его отменить в сообщениях: №19 и №34.

А в целом-то мне нужно тоже самое что и Oooosik, помогите, наконец-то, что нужно выполнять в этой ветке, для получения нужного результата?????????
необходимо:
1. сохранить карусель превьюшек, (работает сейчас, так как отменила первую инструкцию)
2. при наведении курсором на фото чтобы был zoom фрагмента рисунка именно как это было в сиянии (работает сейчас, но не совсем так как надо).
3. сделать так чтобы по двойному щелчку большие фото открывались в наплывающем верхнем, "соседнем" окне, НЕ РАБОТАЕТ В СТАНДАРТЕ ОСЕНИ!!!!

Вам не нужно выполнять все подряд что описано на форуме. Иногда (чаще всего) каждый случай индивидуален в виду каких-то других присутствующих изменений в шаблоне. При применении каких либо изменений почитайте тему внимательнее, определите для чего и зачем сообщены инструкции и определите для себя необходимы они вам или нет. Если сомневаться, то лучше спросите подойдет ли вам подобная инструкция или же нет. Почитайте тему форума http://forum.storela..._60#entry100503 ранее я вам её сообщал, как я понимаю из вами написанного - вам необходимо увеличение изображения при клике на него. Оставляя при этом как карусель превью, так и зумер изображения.

Просмотр сообщенияooosik (16 Ноябрь 2013 - 07:26) писал:

Да я именно это имею в виду, но хотелось бы в дополнение к этой функции иметь возможность увеличивать изображения из превью
И еще при увеличении изображения сайт прыгает вправо, после того как закрываешь возвращается на место, это очень видно глазу как убрать? Девушка выше писала что у нее так же

Для устранения визуального смещения - добавьте в файл стилей style.css

.fancybox-lock,
.fancybox-lock .fancybox-overlay {
	overflow: visible !important;
}

Для задания галереи попробуйте в файле main.js найти код

$(function() {
  $('.image a').fancybox();
  $('#thumbs_list_frame li a').click(function() {
		  var small = $(this).attr('rel');
		  var large = $(this).attr('href');
		  $('.image a').attr('href', large).find('img').attr('src', small);
		  return(false);
  });
});


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

$(function() {
  $('#thumbs_list_frame a').each(function() {
	 $(this).attr('urel', $(this).attr('rel'));
  });
  $('#thumbs_list_frame li a:not(:first)').each(function() {
	var small = $(this).attr('urel');
	var large = $(this).attr('href');
	$('.image').append($('<a>').hide().attr('href', large).append($('<img>').attr('src', small)));
  });
  $('.image a').attr('rel', 'gallery').fancybox();
  $('#thumbs_list_frame li a:first').click(function() {
		  var small = $(this).attr('urel');
		  var large = $(this).attr('href');
		  $('.image a:first').attr('href', large).find('img').attr('src', small);
  });
  $('#thumbs_list_frame a').attr('rel', 'gallery2').fancybox();
});

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

.image a {
	display: inline-block !important;
}

и замените на

.image a {
	display: inline-block;
}


#51 ooosik

ooosik

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

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

Отправлено 19 Ноябрь 2013 - 06:39

Просмотр сообщенияСake (19 Ноябрь 2013 - 03:43) писал:


Для устранения визуального смещения - добавьте в файл стилей style.css

.fancybox-lock,
.fancybox-lock .fancybox-overlay {
overflow: visible !important;
}
Добавила - сайт визуально смещается

Для задания галереи попробуйте в файле main.js найти код

$(function() {
$('.image a').fancybox();
$('#thumbs_list_frame li a').click(function() {
		 var small = $(this).attr('rel');
		 var large = $(this).attr('href');
		 $('.image a').attr('href', large).find('img').attr('src', small);
		 return(false);
});
});

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

$(function() {
$('#thumbs_list_frame a').each(function() {
	 $(this).attr('urel', $(this).attr('rel'));
});
$('#thumbs_list_frame li a:not(:first)').each(function() {
var small = $(this).attr('urel');
var large = $(this).attr('href');
$('.image').append($('<a>').hide().attr('href', large).append($('<img>').attr('src', small)));
});
$('.image a').attr('rel', 'gallery').fancybox();
$('#thumbs_list_frame li a:first').click(function() {
		 var small = $(this).attr('urel');
		 var large = $(this).attr('href');
		 $('.image a:first').attr('href', large).find('img').attr('src', small);
});
$('#thumbs_list_frame a').attr('rel', 'gallery2').fancybox();
});

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

.image a {
display: inline-block !important;
}

и замените на

.image a {
display: inline-block;
}
Все выполнила, результата пока нет, что делать дальше?

Сайт все равно визуально ссмещается

#52 Сake

Сake

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

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

Отправлено 20 Ноябрь 2013 - 01:17

На данный момент у вас изменена тема оформления с темы "Осень" на тему "Сияние". Как я понимаю ваш вопрос не актуален?

#53 ooosik

ooosik

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

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

Отправлено 20 Ноябрь 2013 - 06:23

Просмотр сообщенияСake (20 Ноябрь 2013 - 01:17) писал:

На данный момент у вас изменена тема оформления с темы "Осень" на тему "Сияние". Как я понимаю ваш вопрос не актуален?
почему актуален, просто вы не отвечаете, клиенты жалуются что просмотр неудобный, я жду дальнейших инструкций, сейчас верну обратно

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

#54 ooosik

ooosik

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

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

Отправлено 20 Ноябрь 2013 - 06:43

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

#55 ooosik

ooosik

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

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

Отправлено 20 Ноябрь 2013 - 10:39

Просмотр сообщенияСake (20 Ноябрь 2013 - 01:17) писал:

На данный момент у вас изменена тема оформления с темы "Осень" на тему "Сияние". Как я понимаю ваш вопрос не актуален?
Прошу прощения все работает, увеличиваются из превью, осталось только галерея изображений как их в рамки определить?

#56 Сake

Сake

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

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

Отправлено 21 Ноябрь 2013 - 00:08

Найдите в файле стилей style.css

#left-column #views_block {
  background: none repeat scroll 0 0 #FFFFFF;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  padding: 8px 4px;
}

и замените на

#left-column #views_block {
  margin-top: 15px;
  padding: 8px 4px;
}

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

#left-column #thumbs_list {
  float: left;
  margin: 0;
  overflow: hidden;
  width: 410px;
}

и замените на

#left-column #thumbs_list {
  float: left;
  margin: 0;
  width: 410px;
}

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

#left-column #thumbs_list li {
  cursor: pointer;
  float: left;
  height: 54px;
  margin: 0 4px;
}

и замените на

#left-column #thumbs_list li {
  background: #FFFFFF;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  float: left;
  height: 54px;
  margin: 0 4px;
  padding: 5px;
}


#57 Джейн

Джейн

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

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

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

Просмотр сообщенияСake (19 Ноябрь 2013 - 03:43) писал:



Для задания галереи попробуйте в файле main.js найти код

$(function() {
$('.image a').fancybox();
$('#thumbs_list_frame li a').click(function() {
		 var small = $(this).attr('rel');
		 var large = $(this).attr('href');
		 $('.image a').attr('href', large).find('img').attr('src', small);
		 return(false);
});
});

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

$(function() {
$('#thumbs_list_frame a').each(function() {
	 $(this).attr('urel', $(this).attr('rel'));
});
$('#thumbs_list_frame li a:not(:first)').each(function() {
var small = $(this).attr('urel');
var large = $(this).attr('href');
$('.image').append($('<a>').hide().attr('href', large).append($('<img>').attr('src', small)));
});
$('.image a').attr('rel', 'gallery').fancybox();
$('#thumbs_list_frame li a:first').click(function() {
		 var small = $(this).attr('urel');
		 var large = $(this).attr('href');
		 $('.image a:first').attr('href', large).find('img').attr('src', small);
});
$('#thumbs_list_frame a').attr('rel', 'gallery2').fancybox();
});


А помогите, пожалста, адаптировать этот код для моего сайт. У меня самой не получилось. Тоже хочется, чтоб большие фото можно было просматривать галереей.  У меня нормально (только без галереи) работает такой код:
//Увеличение изображения по клику//
$(function() {
 setTimeout(function() {
			   $(document).on('click', '#left-column .mousetrap', function() {
								var link = $(this).parent().children('a').clone();
								$('<body>').append(link.hide().fancybox({
											   'onClosed': $.proxy(function() {
															  $(this).remove();
											   }, link)
							   }).click());
			   });
}, 800);  
});


#58 ooosik

ooosik

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

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

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

Просмотр сообщенияСake (21 Ноябрь 2013 - 00:08) писал:

Найдите в файле стилей style.css

#left-column #views_block {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
margin-top: 15px;
padding: 8px 4px;
}
Такого нет, есть такой:
#left-column #views_block{margin-top:15px;padding:8px 4px;background:#ffffff;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;
box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) }


#59 Сake

Сake

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

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

Отправлено 22 Ноябрь 2013 - 02:48

Попробуйте использовать код

//Увеличение изображения по клику//
$(function() {
setTimeout(function() {
	$(document).on('click', '#left-column .mousetrap', function() {
		 var link = $(this).parent().children('a');
		 $('<body>').append($('<div class="fancybox-zgallery">').hide().append(link.clone()));
		 $('#thumbs_list_frame li a').each(function() {
	  if($(this).attr('href') !== link.attr('href')) {
				  var small = $(this).children('img').attr('src');
				  var large = $(this).attr('href');
				  $('.fancybox-zgallery').append($('<a>').attr('href', large).append($('<img>').attr('src', small)));
	  }
			});
   $('.fancybox-zgallery a').attr('rel', 'gallery').fancybox({
				'onClosed': $.proxy(function() {
					$('.fancybox-zgallery').remove();
				}, link)
			}).click();
	});
}, 800); 
});

Данный код

#left-column #views_block{margin-top:15px;padding:8px 4px;background:#ffffff;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;
box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) }

аналогичен предыдущему.

#60 Джейн

Джейн

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

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

Отправлено 22 Ноябрь 2013 - 09:10

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

Попробуйте использовать код

//Увеличение изображения по клику//
$(function() {
setTimeout(function() {
$(document).on('click', '#left-column .mousetrap', function() {
		 var link = $(this).parent().children('a');
		 $('<body>').append($('<div class="fancybox-zgallery">').hide().append(link.clone()));
		 $('#thumbs_list_frame li a').each(function() {
	 if($(this).attr('href') !== link.attr('href')) {
				 var small = $(this).children('img').attr('src');
				 var large = $(this).attr('href');
				 $('.fancybox-zgallery').append($('<a>').attr('href', large).append($('<img>').attr('src', small)));
	 }
		 });
$('.fancybox-zgallery a').attr('rel', 'gallery').fancybox({
			 'onClosed': $.proxy(function() {
				 $('.fancybox-zgallery').remove();
			 }, link)
		 }).click();
});
}, 800);
});

Увы. Не работает. Увеличиваться по клику вааще перестало




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

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