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


Как Сделать Увеличение Фото По Клику


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

#1 Гость

Гость

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

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

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

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

#2 Сake

Сake

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

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

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

Вам необходимо из 2х больших изображений так же сделать и 2 маленьких изображения (их копии). Далее в файл main.js добавьте

$(function() {
$('a img').each(function(index) {
  var link = $(this).parent('a');
  if(!$(link).attr('rel')) {
		 $(link).attr('rel', 'gallery' + index);
  }
  $(link).click(function() {
		 $(this).nyroModalManual();
		 return(false);
  });
});
});

после вставляйте в вашу страницу "О Нас" изображения используй разметку

<a href="адрес большого изображения"><img alt="Описание изображения" src="адрес маленького изображения" /></a>

для вставки кода в визуальном редакторе - нажмите кнопку "Источник".

#3 Гость

Гость

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

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

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

Просмотр сообщенияСake (26 Июль 2013 - 23:29) писал:

Вам необходимо из 2х больших изображений так же сделать и 2 маленьких изображения (их копии). Далее в файл main.js добавьте

$(function() {
$('a img').each(function(index) {
var link = $(this).parent('a');
if(!$(link).attr('rel')) {
		 $(link).attr('rel', 'gallery' + index);
}
$(link).click(function() {
		 $(this).nyroModalManual();
		 return(false);
});
});
});

после вставляйте в вашу страницу "О Нас" изображения используй разметку

<a href="адрес большого изображения"><img alt="Описание изображения" src="адрес маленького изображения" /></a>

для вставки кода в визуальном редакторе - нажмите кнопку "Источник".

Открывается в маленькой рамочке.


Что то вообще интересное получилось. Захожу в каталог -> Мальчики а он разворачивается в окошечко, и при удалении товара из корзины так же делает

#4 miyako

miyako

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

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

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

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

Открывается в маленькой рамочке

Вы добавили код:
$(function() {
$('a img').each(function(index) {
  var link = $(this).parent('a');
  if(!$(link).attr('rel')) {
				 $(link).attr('rel', 'gallery' + index);
  }
  $(link).click(function() {
				 $(this).nyroModalManual();
				 return(false);
  });
});
});
в конец main.js файла?

#5 Гость

Гость

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

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

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

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

Вы добавили код...
в конец main.js файла?
Совершенно верно. А куда надо? Подскажите.

#6 miyako

miyako

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

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

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

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

Совершенно верно. А куда надо? Подскажите.

туда и нужно было.

#7 Гость

Гость

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

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

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

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

туда и нужно было.
я код отключил. Вопрос открытый.

#8 support 2.0

support 2.0

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

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

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

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

я код отключил. Вопрос открытый.

Можно сделать следующее: уберите выше написанные инструкции, зайдите в редактирование страницы "о нас" и вставьте следующий код (в источник)
<p><a href="ссылка на большое изображение" onclick="$(this).nyroModalManual();return(false);" rel="gallery" target="_blank"><img src="ссылка на маленькое изображение" /> </a></p>
этот код для одной картинки, соответственно, если Вам нужна еще одна картинка, копируете этот код и вставляете ниже.
Также Вам нужно сделать 2 изображения: в миниатюре и в первоначальном размере. Далее загружайте их в раздел файлы -> копируйте ссылки и вставляйте на нужные месте, указанные в моем коде

#9 Гость

Гость

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

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

Отправлено 28 Июль 2013 - 09:04

Просмотр сообщенияsupport 2.0 (27 Июль 2013 - 17:21) писал:

Можно сделать следующее: уберите выше написанные инструкции, зайдите в редактирование страницы "о нас" и вставьте следующий код (в источник)
<p><a href="ссылка на большое изображение" onclick="$(this).nyroModalManual();return(false);" rel="gallery" target="_blank"><img src="ссылка на маленькое изображение" /> </a></p>
этот код для одной картинки, соответственно, если Вам нужна еще одна картинка, копируете этот код и вставляете ниже.
Также Вам нужно сделать 2 изображения: в миниатюре и в первоначальном размере. Далее загружайте их в раздел файлы -> копируйте ссылки и вставляйте на нужные месте, указанные в моем коде
Изображение открывается не полностью.

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

  • 1.jpg


#10 support 2.0

support 2.0

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

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

Отправлено 29 Июль 2013 - 13:13

Просмотр сообщенияГость (28 Июль 2013 - 09:04) писал:

Изображение открывается не полностью.

замените код на этот
<p><a href="http://design.zaichik89.ru/1.jpg" onclick="$(this).nyroModalManual();return(false);" rel="gallery" target="_blank"><img alt="" src="http://design.zaichik89.ru/1mini.jpg" /> </a></p>

P.S.: лучше убирать в конце ссылки ?****

#11 Гость

Гость

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

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

Отправлено 29 Июль 2013 - 16:03

Просмотр сообщенияsupport 2.0 (29 Июль 2013 - 13:13) писал:

замените код на этот
<p><a href="http://design.zaichik89.ru/1.jpg" onclick="$(this).nyroModalManual();return(false);" rel="gallery" target="_blank"><img alt="" src="http://design.zaichik89.ru/1mini.jpg" /> </a></p>

P.S.: лучше убирать в конце ссылки ?****
Спасибо. Все работает.

#12 giceray

giceray

    Новичок

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

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

подскажите, почему открывается 2 увеличенных изображения?одно поверх другого
http://babystore72.ru/page/Sertifikaty

#13 Koderhan

Koderhan

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

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

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

Просмотр сообщенияgiceray (06 Ноябрь 2013 - 16:50) писал:

подскажите, почему открывается 2 увеличенных изображения?одно поверх другого
http://babystore72.ru/page/Sertifikaty
У вас в html коде страницы прописана функция для открытия nyvo галереи.
Вы можете удалить из кода строку:
onclick="$(this).nyroModalManual();return(false);"


#14 giceray

giceray

    Новичок

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

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

убрал строчку - проблема осталась

#15 Koderhan

Koderhan

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

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

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

Попробуйте удалить из файла main.js код:
$(function() {
$('a img').each(function(index) {
  var link = $(this).parent('a');
  if(!$(link).attr('rel')) {
				 $(link).attr('rel', 'gallery' + index);
  }
  $(link).click(function() {
				 $(this).nyroModalManual();
				 return(false);
  });
});
});


#16 giceray

giceray

    Новичок

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

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

все равно не получается

#17 Сake

Сake

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

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

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

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

#18 sofia77

sofia77

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

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

Отправлено 28 Февраль 2014 - 14:21

Просмотр сообщенияsupport 2.0 (27 Июль 2013 - 17:21) писал:

Можно сделать следующее: уберите выше написанные инструкции, зайдите в редактирование страницы "о нас" и вставьте следующий код (в источник)
<p><a href="ссылка на большое изображение" onclick="$(this).nyroModalManual();return(false);" rel="gallery" target="_blank"><img src="ссылка на маленькое изображение" /> </a></p>
этот код для одной картинки, соответственно, если Вам нужна еще одна картинка, копируете этот код и вставляете ниже.
Также Вам нужно сделать 2 изображения: в миниатюре и в первоначальном размере. Далее загружайте их в раздел файлы -> копируйте ссылки и вставляйте на нужные месте, указанные в моем коде
Спасибо, работает)
А не подскажете, как добиться, чтобы превьюшки вставали друг за другом в ряд.
А то они у меня столбиком отображаются на сайте. не айс..

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

  • ввв.jpg


#19 Vaccina

Vaccina

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

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

Отправлено 01 Март 2014 - 03:40

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

#20 sofia77

sofia77

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

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

Отправлено 02 Март 2014 - 10:47

Вакцина, спасибо!
Вот ссылка: http://duplomania.ru...lo-s-otvertkami

Номер акка тоже указала)




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

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