Вверх

Блог
 RSS лента

Помогите выиграть конкурс.
Займет не больше минуты!
ТЫЦ на ссылку

lightBox эффект всплывающих фотографий для Ucoz

Ранее я писал как делать всплывающие фотки на сайтах. Но вот почему то по тому принципу на Укозовском сайте у меня работать не захотело. Но ничего я сделал по другому.
В моем случае мне нужно было что бы все фотографии которые находятся в теле статьи и которые были уменьшены но есть ссылка на большую фотографию, увеличивались с эффектом.
А реализовать это элементарно. Нужно для начала скачать вот этот архивчик ТЫЦ
С него берем файл jquery.lightbox.js и lightbox.css.
Дальше прописываем стиль:

  1. <head>
  2. <link rel="stylesheet" href="/lightbox.css" type="text/css">
  3. </head>

Подключать нужно между тегами хеад
А вот скрипт нужно подключать после БОДИ, иначе не пашет. Почему не знаю.

  1. <body>
  2.  <script src="/jquery.lightbox.js" type="text/javascript"></script>

Дальше указываем скрипту какие ссылки преображать:

  1. <script type="text/javascript">
  2.  $(document).ready(function(){
  3.   $(".eText a").lightbox({
  4.    fitToScreen: true
  5.    });
  6.  });
  7. </script>

eText класс который присутствует при детальном просмотре статьи на Укоз. В Вашем случае класс может быть другой.
Так же этот скрипт можно использовать и на других сайтах, не укозовских. Просто все скрипты и стили нужно прописать между тегами head.

Ваша оценка: Пусто Средняя: 4.2 (43 голосов)
Пт, 02/25/2011 - 15:57 — X3M-Slider

Комментарии

Ср, 03/14/2012 - 02:46 — Гость

Рекомендую заменить <script

Рекомендую заменить

  1. <script type="text/javascript"> $(document).ready(function(){
  2.   $(".eMessage a").lightbox({
  3. fitToScreen: true   }); });</script>

на
  1. <script type="text/javascript"> $(document).ready(function(){
  2.   $(".eMessage a:has(img)").lightbox({
  3. fitToScreen: true   }); });</script>

Сделано для того, чтобы обрабатывались только ссылки, в которых лежат фотки, а остальные ссылки шли лесом =)

Ср, 03/14/2012 - 08:01 — X3M-Slider

Полезная штука. Спасибо

Полезная штука. Спасибо

Пнд, 02/13/2012 - 21:33 — Гость

Индексация

Здравствуйте, подскажите. Фотки будут большие индексироваться поисковиками??

Ср, 02/15/2012 - 09:12 — X3M-Slider

День добрый. Если честно

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

Пт, 01/06/2012 - 03:27 — Гость

Супер

Дуже дякую, все гарно працює!

Втр, 10/18/2011 - 16:51 — Гость

:)

Спасибо, все работает. Автор статьи сам даже помог установить ее по ICQ.

Пт, 10/14/2011 - 02:19 — Гость

answer

2

One remembers that life is not very cheap, however different people need money for different issues and not every man gets big sums money. Hence to get good personal loans or just consolidation loans will be a right solution.

Чт, 07/07/2011 - 09:27 — Гость

Спасибо! Пришлось заменить

Спасибо!

Пришлось заменить строку с (".eText a") на
$(".eMessage a").lightbox({
иначе не пашет.

Жаль что скрипт не может листать фотки в пределах одной новости (как slimbox) или это у меня только так...

Чт, 07/07/2011 - 17:43 — X3M-Slider

Класс может отличатся, мне

Класс может отличатся, мне нужно было в еТекст, у вас может быть в другом месте.
Все фотки которые обернуты ссылкой должны ластиться, то бишь если тыркать по стрелочкам они должны перелистывать на следующую. По крайней мере у меня так было.
Главная | Портфолио | Услуги | Контакты | Блог