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


Превьюшки Изображений В Обычном Тексте

Автор altos633, 03 июня 2013 09:02

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

#1 altos633

altos633

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

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

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

Добрый день! Подскажите, пожалуйста. Есть обычная страница с текстом, например статья. Как вставить в текст небольшую картинку, но чтобы она увеличивалась по клику? Так же у меня установлен плагин cloud zoom. Каким образом нужно "отметить" изображение, чтобы он работал. Т.е. мне подойдет любой из вариантов:
1. увеличение картинки по щелчку мышкой;
2. увеличение картинки при наведении указателя.

Спасибо!

#2 Koderhan

Koderhan

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

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

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

Для увеличения с лупой.
картинка будет примерно такой.
<a itemprop="image" class="cloud-zoom" id="zoom1" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:400, zoomHeight:300, smoothMove:3" href="тут ссылка на большое изображение" target="_blank" title="Увеличить RB3025 014/51" style="position: relative; display: block;"><img class="cornerAll withBorder goods-image-medium" src="ссылка на изображение" alt="RB3025 014/51" style="display: block;"></a>
В теге а указывается ссылка на большое изображение и его нужно отметить так.
class="cloud-zoom" id="zoom1" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:400, zoomHeight:300, smoothMove:3" href="тут ссылка на большое изображение"

#3 altos633

altos633

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

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

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

Сначала не совсем понял то, что вы подсказали, теперь ясно, к обычно вставленному коду изображения нужно просто добавить:
<a itemprop="image" class="cloud-zoom" id="zoom1" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:400, zoomHeight:300, smoothMove:3" href="тут ссылка на большое изображение" target="_blank" title="Увеличить RB3025 014/51" style="position: relative; display: block;">

Есть ещё некоторые сложности. Во-первых, соседнее изображение всегда поверх увеличенного (см. ссылку). А во-вторых, чтобы расположить 2 картинки рядо, я закинул их в таблицу, задал внутренний отступ в 20пкс, но отступа нет :(

http://sun-like.ru/page/test

#4 Koderhan

Koderhan

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

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

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

Ну тогда можно попробвать увеличение изображения по клику.
<p><a href="http://files.storeland.ru/web/upload/sitefiles/5/440/439196/OGRN.jpeg" onclick="$(this).nyroModalManual();return(false);" rel="gallery" target="_blank"><img alt="" src="http://files.storeland.ru/web/upload/sitefiles/5/442/441511/1.jpeg" /> </a></p>
Код увеличения изображения. В теге а хранится больше изображение в теге img хранится маленькое изображение.
onclick="$(this).nyroModalManual();return(false);" rel="gallery"

#5 altos633

altos633

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

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

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

По клику конечно не очень удобно... необходимо хранить два изображения... Но спасибо, буду пробовать!

А с таблицей есть идеи, почему не выставляет отступы?

#6 Koderhan

Koderhan

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

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

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

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

По клику конечно не очень удобно... необходимо хранить два изображения... Но спасибо, буду пробовать!

А с таблицей есть идеи, почему не выставляет отступы?
Не обязательно хранить два изображения можно ставить ссылки одного и того же изображения. в тег а и в тег img.
Для добавления к таблице отступов попробуйте назначить к создаваемой таблице стиль lineout ScreenShot 629.png

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.lineout tr td {
padding: 10px;
}

#7 altos633

altos633

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

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

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

С увеличением по клику всё получилось. Спасибо большое!

А вот с таблицей нет. Ничего не изменилось..

http://sun-like.ru/page/test

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

#8 miyako

miyako

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

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

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

Просмотр сообщенияaltos633 (03 Июнь 2013 - 16:12) писал:

С увеличением по клику всё получилось. Спасибо большое!

А вот с таблицей нет. Ничего не изменилось..

http://sun-like.ru/page/test

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

Два изображения идут у вас в ряд, а другое не в таблице. Какого результата вы хотели добиться?

#9 altos633

altos633

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

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

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

Что бы между двумя изображениями было расстояние.

#10 miyako

miyako

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

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

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

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

Что бы между двумя изображениями было расстояние.

Добавьте в конец main.css код:
#wrap{margin-right:10px;}

#11 altos633

altos633

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

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

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

Не помогло. Если посмотреть html код страницы, которую я приводил - видно, что в параметрах таблицы выставлены значения отступов и размер границ. Но по факту это никак не отображается на странице. Т.е. настройки таблицы не работают вообще. Я не думаю, что только у меня такая проблема...

#12 Koderhan

Koderhan

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

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

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

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.lineout td {
	padding: 10px;
}

#13 altos633

altos633

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

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

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

Заработало, спасибо!

#14 velena168

velena168

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

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

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

Просмотр сообщенияKoderhan (03 Июнь 2013 - 12:17) писал:

Ну тогда можно попробвать увеличение изображения по клику.
<p><a href="http://files.storeland.ru/web/upload/sitefiles/5/440/439196/OGRN.jpeg" onclick="$(this).nyroModalManual();return(false);" rel="gallery" target="_blank"><img alt="" src="http://files.storeland.ru/web/upload/sitefiles/5/442/441511/1.jpeg" /> </a></p>
Код увеличения изображения. В теге а хранится больше изображение в теге img хранится маленькое изображение.
onclick="$(this).nyroModalManual();return(false);" rel="gallery"
Это я удачно заглянула сюда. Как раз думала как бы сделать фотогалерею. Оказывается просто. Все получилось.
Вставляю код в редакторе в "источник". А, может в свете последних обновлений редактора, можно еще как-то по другому, еще проще все сделать?

#15 Сake

Сake

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

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

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

Вы можете не добавлять постоянно 

onclick="$(this).nyroModalManual();return(false);"

вместо этого в файл main.js вставить один раз 

$(function() {
  $('a[rel="gallery"]').click(function() {
	$(this).nyroModalManual();
return(false);
  });
});

и уже просто ссылке добавлять только rel="gallery" например 

<p><a href="http://files.storeland.ru/web/upload/sitefiles/5/440/439196/OGRN.jpeg" rel="gallery" target="_blank">
<img alt="" src="http://files.storeland.ru/web/upload/sitefiles/5/442/441511/1.jpeg" /> </a></p>

#16 tatachka

tatachka

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

  • Пользователи
  • PipPipPip
  • 52 сообщений
  • ГородВеликий Новгород

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

Подскажите, пожалуйста, как исправить этот код, так чтобы по клику на второе изображение (нижнее) появлялось бы увеличенное изображение этой же картинки (а не верхней)?

  <p><a href="http://s878027.store...kazat-pellety">
<img src="{ASSETS_IMAGES_PATH}knopka.gif" title="Как заказать"
  width="150" height="50" style="position: relative; top:40px; right:-30px;">
  </a> </p>
  
  <a href="{ASSETS_IMAGES_PATH}kotel.jpg" target="_blank" title="Посмотреть"><img  src="{ASSETS_IMAGES_PATH}kotel.jpg" width="150" height="200" style="position: relative; top:40px; right:-30px;"
  alt="{goods.NAME}" onclick="$('#img{goods.ID}').nyroModalManual({gallery: null}); return false;" /></a>
  <a id="img{goods.ID}" href="{ASSETS_IMAGES_PATH}kotel.jpg"  target="_blank" title="{goods.NAME}">
  
  <a href="{ASSETS_IMAGES_PATH}pellet.jpg" target="_blank" title="Посмотреть"><img  src="{ASSETS_IMAGES_PATH}pellet.jpg" width="150" height="100" style="position: relative; top:40px; right:-30px;"
  alt="{goods.NAME}" onclick="$('#img{goods.ID}').nyroModalManual({gallery: null}); return false;" /></a>
  <a id="img{goods.ID}" href="{ASSETS_IMAGES_PATH}pellet.jpg"  target="_blank" title="{goods.NAME}">

мой сайт http://s878027.storeland.ru/

#17 miyako

miyako

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

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

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

Просмотр сообщенияtatachka (20 Июль 2013 - 12:41) писал:

Подскажите, пожалуйста, как исправить этот код, так чтобы по клику на второе изображение (нижнее) появлялось бы увеличенное изображение этой же картинки (а не верхней)?

  <p><a href="http://s878027.store...kazat-pellety">
<img src="{ASSETS_IMAGES_PATH}knopka.gif" title="Как заказать"
  width="150" height="50" style="position: relative; top:40px; right:-30px;">
  </a> </p>
  
  <a href="{ASSETS_IMAGES_PATH}kotel.jpg" target="_blank" title="Посмотреть"><img  src="{ASSETS_IMAGES_PATH}kotel.jpg" width="150" height="200" style="position: relative; top:40px; right:-30px;"
  alt="{goods.NAME}" onclick="$('#img{goods.ID}').nyroModalManual({gallery: null}); return false;" /></a>
  <a id="img{goods.ID}" href="{ASSETS_IMAGES_PATH}kotel.jpg"  target="_blank" title="{goods.NAME}">
  
  <a href="{ASSETS_IMAGES_PATH}pellet.jpg" target="_blank" title="Посмотреть"><img  src="{ASSETS_IMAGES_PATH}pellet.jpg" width="150" height="100" style="position: relative; top:40px; right:-30px;"
  alt="{goods.NAME}" onclick="$('#img{goods.ID}').nyroModalManual({gallery: null}); return false;" /></a>
  <a id="img{goods.ID}" href="{ASSETS_IMAGES_PATH}pellet.jpg"  target="_blank" title="{goods.NAME}">

мой сайт http://s878027.storeland.ru/

На Вашем сайте не нашла у Вас ни одного товара. Вы ведь привели код из шаблона Товар?

#18 tatachka

tatachka

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

  • Пользователи
  • PipPipPip
  • 52 сообщений
  • ГородВеликий Новгород

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

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

На Вашем сайте не нашла у Вас ни одного товара. Вы ведь привели код из шаблона Товар?

код из шаблона HTML. Нужны эти картинки на Главной

#19 support 2.0

support 2.0

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

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

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

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

код из шаблона HTML. Нужны эти картинки на Главной

измените в шаблоне HTML Ваш код
<a href="{goods.IMAGE_LARGE}" target="_blank" title="Посмотреть"><img src="{ASSETS_IMAGES_PATH}kotel.jpg" width="150" height="200" style="position: relative; top:40px; right:-30px;"
			 alt="{goods.NAME}" onclick="$('#img{goods.ID}').nyroModalManual({gallery: null}); return false;" /></a>
			 <a id="img{goods.ID}" href="{ASSETS_IMAGES_PATH}kotel.jpg" target="_blank" title="{goods.NAME}">
											
			 <a href="{ASSETS_IMAGES_PATH}pellet.jpg" target="_blank" title="Посмотреть"><img src="{ASSETS_IMAGES_PATH}pellet.jpg" width="150" height="100" style="position: relative; top:40px; right:-30px;"
			 alt="{goods.NAME}" onclick="$('#img{goods.ID}').nyroModalManual({gallery: null}); return false;" /></a>
			 <a id="img{goods.ID}" href="{ASSETS_IMAGES_PATH}pellet.jpg" target="_blank" title="{goods.NAME}">
на этот
<a href="{ASSETS_IMAGES_PATH}kotel.jpg" onclick="$(this).nyroModalManual();return(false);" rel="gallery" target="_blank" title="Посмотреть"><img alt="" src="{ASSETS_IMAGES_PATH}kotel.jpg" width="150" height="200" style="position: relative; top:40px; right:-30px;" alt="КОТЕЛ"/> </a>

<a href="{ASSETS_IMAGES_PATH}pellet.jpg" onclick="$(this).nyroModalManual();return(false);" rel="gallery" target="_blank" title="Посмотреть"><img alt="" src="{ASSETS_IMAGES_PATH}pellet.jpg" width="150" height="100" style="position: relative; top:40px; right:-30px;" alt="ПЕЛЛЕТЫ"/> </a>

#20 tatachka

tatachka

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

  • Пользователи
  • PipPipPip
  • 52 сообщений
  • ГородВеликий Новгород

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

Спасибо! :)
Обратно в Другое


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

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

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