| admin | Дата: Четверг, 2010-12-23, 02:52:35 | Сообщение # 1 |
Хакер
Сообщений: 151
Репутация: 0
Не на форуме
| В этой статье мы расскажем, как на своём Юкоз-сайте сделать красивый показ полного изображения из его мини-эскиза. Для этого мы будем использовать javascript - LightBox - в uCoz.
LightBox - это плагин к jQuery (встроена в uCoz, кто не в курсе), простой, элегантный, не требующий дополнительной разметки, он позволяет применять эффект lightbox к картинкам, используя всю мощь и гибкость jQuery.
Скачиваем Lightbox отсюда. Если ссылка не работает, зайдите на сайт leandrovieira.com и самостоятельно найдите ссылку для скачивания, либо Google вам в помощь.
Заходим в админку своего сайта, переходим к редактированию шаблонов, и выбираем тот модуль, в котором у нас изображения и мы бы хотели применить к ним lightbox. Часто это фотоальбом, но он уже содержит эту функцию благодаря стараниям разработчиков uCoz-системы, поэтому его не трогаем. Нас интересуют другие модули. В частности, возьмём в качестве примера модуль "Статьи" (publ).
Скачав архив lightbox по указанной выше ссылке, найдите там файлы "js/jquery.lightbox-N.N.js", "css/jquery.lightbox-N.N.css" и папку "images". Это надо загрузить в корень вашего сайта, с сохранением путей (т.е., к примеру, jquery.lightbox-N.N.pack.js должен быть в папке js и никак не иначе).
После вставляем в шаблон после тега код:
Code <script type="text/javascript" src="http://ВАШ_САЙТ_НА_ЮКОЗЕ/js/jquery.lightbox-N.N.js"></script>
<link rel="stylesheet" type="text/css" href="http://ВАШ_САЙТ_НА_ЮКОЗЕ/css/jquery.lightbox-N.N.css" />
<script type="text/javascript">
$(function() {
$('a[href*=cybernova.net/_pu]').lightBox();
});
</script>
В указанном выше коде обратите внимание на cybernova.net/_pu. "cybernova.net" замените на свой домен (без http и www). "_pu" - это папка модуля, в котором расположены изображения. Узнать папку легко: зайдите на главную любого модуля, через админ-бар смотрим: "Дизайн -> Список переменных страницы -> $URI_ID$". Там будет значение переменной, первые два символа его - это имя папки. Не забудьте перед ними поставить символ "_", т.е. чтобы было "_pu", как в нашем примере, а не просто "pu".
Что касатеся ВАШ_САЙТ_НА_ЮКОЗЕ в коде - то тут всё ясно, заменить на своё и всё.
Так же обратите внимание на N.N - это некоторые цифры, а именно версия lightbox, которую вы скачали. Когда я скачивал, т.е. на момент написания статьи, она была 0.5.
Великий Админ Киберновы
|
| |
| |
