Ефектно уголемяване на изображения
Здравейте!
Това е много интересна система за уголемяване на картинки в галерия.Използва Prototype Framework и Scriptaculous Effects Library.Тя не намалява снимките,така че по-добре използвайте тази система за галерия.
Taкааа да започваме.

Част първа - Инсталиране

1.Теглите това и го слагате в root папката ви.
2. Поставяте
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screeтоваn" />
в header-а на всички файлове от галерията;
3. Слагате и това
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
в header-а
или преписвате кода от css/lightbox.css в вашия css документ.

Инсталирахме всчико, сега как да я използваме.

Част втора - Използване

1. Слагате
rel="lightbox"
в тага на картинката.

Примерно:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">изображение #1</a>


2. Ако имате няколко подобни картинки искате да ги сложите в една група, слагате
rel="lightbox[roadtrip]"


Пример:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">картинка #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">картинка #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">картинка #3</a>


Това е урока :) Смятам,че е достатъчно лесно дори за първолак Laughing


Демо:
Демо (кликнете на кЪртинките )



Източник:
http://www.huddletogether.com

Превод:
FirstBlood




/ Трябва да сте регистриран за да напишете коментар /