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


Увеличение Изображения Без Перехода


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

#1 arver

arver

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

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

Отправлено 07 Октябрь 2014 - 01:24

Здравствуйте,возникла необходимость выложить группу товаров и выставить ценник не как обычно через каталог,а через картинки и текст на отдельно взятой странице.Проблема заключаются в том,что я не знаю,как сделать так,чтобы при клике на изображение всплывала увеличенная картинка без перехода куда-либо.пример странички с изображениями(http://hozbe.ru/page/novoe)
Аккаунт sl-203796.

#2 Vaccina

Vaccina

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

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

Отправлено 07 Октябрь 2014 - 01:49

Попробуйте следующее, в полном описании страницы через "Источник" оберните весь текст и коды в один блок:
<div class="other_item">
все содержимое вашей страницы
</div>
и в самом конце добавьте:
$(document).ready(function() {
$(".other_item img").fancybox({
maxWidth : 400,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'});});


#3 velena168

velena168

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

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

Отправлено 07 Октябрь 2014 - 11:34

+

#4 arver

arver

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

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

Отправлено 08 Октябрь 2014 - 00:12

не дало никакого результата...

#5 arver

arver

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

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

Отправлено 08 Октябрь 2014 - 01:41

нужна помощь

#6 Ирина345

Ирина345

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

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

Отправлено 08 Октябрь 2014 - 12:16

Просмотр сообщенияarver (08 Октябрь 2014 - 01:41) писал:

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

#7 arver

arver

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

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

Отправлено 08 Октябрь 2014 - 15:48

не на товаре,а на картинке(посмотрите мое первое сообщение),а пробовал я самое первое изображение http://st.hozbe.ru/8/1380/668/1.jpg

#8 arver

arver

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

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

Отправлено 08 Октябрь 2014 - 16:53

нужна помощь..!

#9 arver

arver

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

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

Отправлено 08 Октябрь 2014 - 22:22

нужна помощь.....

#10 Ирина345

Ирина345

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

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

Отправлено 09 Октябрь 2014 - 09:14

Просмотр сообщенияarver (08 Октябрь 2014 - 22:22) писал:

нужна помощь.....
Здравствуйте, вставьте в конец файла main.js код
$(document).ready(function() {
$(".other_item img").fancybox({
maxWidth : 400,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'});});


#11 arver

arver

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

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

Отправлено 09 Октябрь 2014 - 21:49

работает некорректно,изображение не увеличивается.....мало того,оно еще исчезает...

#12 arver

arver

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

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

Отправлено 09 Октябрь 2014 - 22:59

need help

#13 Vaccina

Vaccina

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

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

Отправлено 10 Октябрь 2014 - 00:15

В style.css найдите и удалите:
.fancybox-overlay {
	z-index: 99999;
}


На счет увеличения изображения, необходимо сменить структуру, пример, было:
<div class="other_item"><img alt="" src="cсылка" style="width: 100px;" /></div>
стало:
<div class="other_item">
<a href="ссылка на изображение"><img alt="" src="ссылка на изображение" style="width: 100px;" /></a></div>

и:
$(document).ready(function() {
$(".other_item img").fancybox({
maxWidth : 400,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'});});
меняем на:
<script>
$(document).ready(function() {
$(".other_item a").fancybox({
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'});});
</script>


#14 arver

arver

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

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

Отправлено 10 Октябрь 2014 - 01:53

ничего не получилось :( ...( теперь как раньше снова открывается все в новом окне((((

#15 Vaccina

Vaccina

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

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

Отправлено 10 Октябрь 2014 - 01:56

вы уверены? данный код я протестирвала у себя на теме осень и все работало

#16 arver

arver

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

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

Отправлено 10 Октябрь 2014 - 02:07

у меня точно не работает..((
трудности возникли с

Просмотр сообщенияVaccina (10 Октябрь 2014 - 00:15) писал:

На счет увеличения изображения, необходимо сменить структуру, пример, было:
<div class="other_item"><img alt="" src="cсылка" style="width: 100px;" /></div>
стало:
<div class="other_item">
<a href="ссылка на изображение"><img alt="" src="ссылка на изображение" style="width: 100px;" /></a></div>
поскольку ссылка уже есть и что тут менять не могу понять

#17 arver

arver

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

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

Отправлено 10 Октябрь 2014 - 02:14

вставил в источник* ​
<div class="other_item"><a href="http://st.hozbe.ru/8...668/1.jpg"><img alt="" src="http://st.hozbe.ru/8...1380/668/1.jpg" style="width: 100px;" /></a></div>
всплывающего окна нет....потому что осуществляется переход на страницу http://st.hozbe.ru/8/1380/668/1.jpg

#18 Vaccina

Vaccina

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

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

Отправлено 10 Октябрь 2014 - 02:49

<script>
$(document).ready(function() {
$(".other_item a").fancybox({
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'});});
</script>

Этот код случайно не потеряли? если его вставляли в main.js, то надо убрать теги <script></script>

#19 Cybernetic

Cybernetic

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

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

Отправлено 21 Апрель 2015 - 07:23

Добрый день, пытаюсь сделать открытие фото (как в карточке товара)
Пытался применить вышеописанные инструкции (пост №2) ни чего не получилось (2 код добавил в main.js)

Пытался сделать для страницы http://santechbomba.ru/page/TEST

Нужно чтобы:

1) Фото открывалось полностью
2) Была возможность закрыть фото (всё как в карточке товара)

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

  • problack1.jpg


#20 Stas_Y

Stas_Y

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

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

Отправлено 22 Апрель 2015 - 13:42

Просмотр сообщенияCybernetic (21 Апрель 2015 - 07:23) писал:

Добрый день, пытаюсь сделать открытие фото (как в карточке товара)
Пытался применить вышеописанные инструкции (пост №2) ни чего не получилось (2 код добавил в main.js)

Пытался сделать для страницы http://santechbomba.ru/page/TEST

Нужно чтобы:

1) Фото открывалось полностью
2) Была возможность закрыть фото (всё как в карточке товара)

Присоединяюсь к вышесказанному!




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

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