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


Увеличение Фото По Клику


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

#1 FORTA

FORTA

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

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

Отправлено 31 Июль 2014 - 12:01

Здравствуйте.

Добавил фото на страницу:
http://magic-krd.ru/...uzhnaya-reklama

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

Спасибо.

#2 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 31 Июль 2014 - 13:24

Просмотр сообщенияFORTA (31 Июль 2014 - 12:01) писал:

Здравствуйте.

Добавил фото на страницу:
http://magic-krd.ru/...uzhnaya-reklama

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

Спасибо.

Здравствуйте, редактируем описание данной категории.
Находим
<img alt="Реализация проекта по оформлению развлекательного центра " src="http://st.magic-krd.ru/8/1260/486/ferma.jpg" style="margin: 5px; width: 200px; height: 160px;" /> &nbsp; &nbsp;&nbsp;<img alt="Реализация проекта для отеля " src="http://st.magic-krd.ru/9/1260/489/SHAMBALA_HOTEL.jpg" style="margin: 5px; width: 200px; height: 160px;" /> &nbsp; &nbsp;&nbsp;<img alt="Реализация проекта по оформлению Зоомагазина" src="http://st.magic-krd.ru/9/1260/490/zoo.jpg" style="margin: 5px; width: 200px; height: 160px;" />​</p>
Заменяем на
<a class="fancybox" href="http://st.magic-krd.ru/8/1260/486/ferma.jpg" rel="group"><img alt="Реализация проекта по оформлению развлекательного центра " src="http://st.magic-krd.ru/8/1260/486/ferma.jpg" style="margin: 5px; width: 200px; height: 160px;" /></a>
<a class="fancybox" href="http://st.magic-krd.ru/9/1260/489/SHAMBALA_HOTEL.jpg" rel="group"><img alt="Реализация проекта для отеля " src="http://st.magic-krd.ru/9/1260/489/SHAMBALA_HOTEL.jpg" style="margin: 5px; width: 200px; height: 160px;" /></a>
<a class="fancybox" href="http://st.magic-krd.ru/9/1260/490/zoo.jpg" rel="group"><img alt="Реализация проекта по оформлению Зоомагазина" src="http://st.magic-krd.ru/9/1260/490/zoo.jpg" style="margin: 5px; width: 200px; height: 160px;" />​</a></p>

В самое начало описания добавляем
<script type="text/javascript">
$(document).ready(function() {
  $(".fancybox").fancybox();
});
</script>

В итоге должно быть так
Скрытый текст


#3 FORTA

FORTA

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

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

Отправлено 05 Август 2014 - 11:16

Все получилось,. спасибо.

Еще вопрос:
можно ли к фотографиям добавить описание?

#4 Alekseys

Alekseys

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

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

Отправлено 05 Август 2014 - 11:32

Здравствуйте. Чтоб добавить всплывающее описание замените код
<a class="fancybox" href="http://st.magic-krd.ru/8/1260/486/ferma.jpg" rel="group"><img alt="Реализация проекта по оформлению развлекательного центра " src="http://st.magic-krd.ru/8/1260/486/ferma.jpg" style="margin: 5px; width: 200px; height: 160px;" /></a>
<a class="fancybox" href="http://st.magic-krd.ru/9/1260/489/SHAMBALA_HOTEL.jpg" rel="group"><img alt="Реализация проекта для отеля " src="http://st.magic-krd.ru/9/1260/489/SHAMBALA_HOTEL.jpg" style="margin: 5px; width: 200px; height: 160px;" /></a>
<a class="fancybox" href="http://st.magic-krd.ru/9/1260/490/zoo.jpg" rel="group"><img alt="Реализация проекта по оформлению Зоомагазина" src="http://st.magic-krd.ru/9/1260/490/zoo.jpg" style="margin: 5px; width: 200px; height: 160px;" />​</a></p>
на
<a class="fancybox" href="http://st.magic-krd.ru/8/1260/486/ferma.jpg" rel="group"><img alt="Реализация проекта по оформлению развлекательного центра "  src="http://st.magic-krd.ru/8/1260/486/ferma.jpg" title="XXX" style="margin: 5px; width: 200px; height: 160px;" /></a>
<a class="fancybox" href="http://st.magic-krd.ru/9/1260/489/SHAMBALA_HOTEL.jpg" rel="group"><img alt="Реализация проекта для отеля " src="http://st.magic-krd.ru/9/1260/489/SHAMBALA_HOTEL.jpg" title="XXX" style="margin: 5px; width: 200px; height: 160px;" /></a>
<a class="fancybox" href="http://st.magic-krd.ru/9/1260/490/zoo.jpg" rel="group"><img alt="Реализация проекта по оформлению Зоомагазина" src="http://st.magic-krd.ru/9/1260/490/zoo.jpg" title="XXX" style="margin: 5px; width: 200px; height: 160px;" />​</a></p>
где ХХХ в
title="XXX"
нужно поменять на необходимое описание.




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

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