Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » LightBox v 2.0 (фотоальбом) для uCoz
LightBox v 2.0 (фотоальбом) для uCoz
footballmasterДата: Понедельник, 25.10.2010, 16:22 | Сообщение # 1
Спикер
Группа: Пользователи
Пользователь №: 191
Сообщений: 207
Награды: 9
Репутация: 43
Статус: оффлайн
Для начало расскажу, что же такое LightBox и для чего он нужен (для тех, кто не знает).
Lightbox – простой JS скрипт, отображающий изображения на текущей странице, на страницу можно поместить уменьшенное изображение, нажав на него открывается красивое окошко, где это изображение будет показано в оригинальном размере, самое главное это окошко открывается без перезагрузки страницы и работает во всех современных браузерах.

Демо

Скачать архивы

Установка LightBox:

1. Заливаем файлы из архива себе на сайт

2. Lightbox использует JavaScript библиотеки Prototype.js , Scriptaculous.js и Lightbox.js нам нужно будет их подключить в нашу страничку (index и inner в стандартный шаблон), для этого вставьте следующий код в вашу страничку между тэгами <head> и </head>

Code
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

3. Дальше нам нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте в вашу страничку следующий код, между тэгами <head> и </head>

Code
<link rel="stylesheet" href="http://Ваш_сайт/design/css/lightbox.css" type="text/css" media="screen" />

Активация LightBox:

1. LightBox активируется следующей строкой для одиночных изображений

Code
<a href="ваша_картинка_большая" rel="lightbox"><img src="ваша_картинка_маленькая" width="100" height="40" alt="" /></a>

2. Если у вас есть группа картинок, которые необходимо сгруппировать, необходимо дополнительно включить в атрибут rel - [имя группы в квадратных скобках], в этом случае будет выведено для показа несколько картинок.

Code
<a href="ваша_картинка_большая" rel="lightbox[категория]" title="Roll over and click right side of image to move forward."><img src="ваша_картинка_маленькая" width="100" height="40" alt="описание" /></a>
      <a href="ваша_картинка_большая" rel="lightbox[категория]" title="Alternately you can press the right arrow key." ><img src="ваша_картинка_маленькая" width="100" height="40" alt="описание" /></a>
      <a href="images/image-5.jpg" rel="lightbox[категория]" title="The script preloads the next image in the set as you're viewing."><img src="ваша_картинка_маленькая" width="100" height="40" alt="описание" /></a>
      <a href="ваша_картинка_большая" rel="lightbox[категория]" title="Press Esc to close"><img src="ваша_картинка_маленькая" width="100" height="40" alt="описание" /></a>

Все, надеюсь понятно, как использовать LightBox на своих страничках. Удачи!





Кто хочет заказать у меня дизайн сайта стучите в Skype: alexandru_lampard ; ICQ: 614017088


Сообщение отредактировал footballmaster - Понедельник, 25.10.2010, 16:24
 
вверх
cechДата: Понедельник, 25.10.2010, 17:17 | Сообщение # 2
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
footballmaster, Отлично!) только

Code
<script type="text/javascript" src="js/prototype.js"></script>

не есть хорошо!)


 
вверх
Angry4178Дата: Пятница, 12.11.2010, 18:05 | Сообщение # 3
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
footballmaster, Все понятно и просто. Спасибо."+" ушел к тебе.


 
вверх
AngryДата: Воскресенье, 20.03.2011, 13:22 | Сообщение # 4
Авы нет
Дизайнер и модератор по совместительству
Группа: Пользователи
Пользователь №: 481
Сообщений: 268
Награды: 1
Репутация: 0
Статус: оффлайн
Внимание:
Code

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Поместить после </head>
 
вверх
cechДата: Воскресенье, 20.03.2011, 14:49 | Сообщение # 5
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Angry, по-моему с prototype.js вообще aJax работать не будет, конфликт двух библиотек.


 
вверх
SheldonДата: Среда, 23.03.2011, 20:07 | Сообщение # 6
Авы нет
Молчун
Группа: Пользователи
Пользователь №: 893
Сообщений: 6
Награды: 0
Репутация: 0
Статус: оффлайн
Так будет работать или нет ? wacko
 
вверх
cechДата: Среда, 23.03.2011, 20:14 | Сообщение # 7
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Sheldon, попробуй установи...


 
вверх
AlexzonДата: Вторник, 01.05.2012, 03:56 | Сообщение # 8
Молчун
Группа: Пользователи
Пользователь №: 1692
Сообщений: 1
Награды: 0
Репутация: 0
Статус: оффлайн
Проверено, этот скрипт не прокатывает на сайтах UCOZ. Ни до </head> ни после book
все пути к файлам так же были перепроверены.





Прикрепления: 4795827.png(61.9 Kb)



Сообщение отредактировал Alexzon - Вторник, 01.05.2012, 04:01
 
вверх
BSideДата: Вторник, 01.05.2012, 07:12 | Сообщение # 9
Настоящий писец!
Группа: Администраторы
Пользователь №: 700
Сообщений: 510
Награды: 19
Репутация: 32
Статус: оффлайн
Alexzon, помню ставил, все работало..
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » LightBox v 2.0 (фотоальбом) для uCoz
  • Страница 1 из 1
  • 1
Поиск: