Помогни ни да направим Uroci.net по - богат! Добави урок

Най лесния lightbox с jquery

pishmo   трудност:    видян: 7762

1. Да заредим jquery , плъгина lightbox-0.5 и неговия css фаил jquery.lightbox-0.5.css .Добавете в хедъра :

 

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

 

2. jquery.lightbox ползва картинки за декорация , така че запишете тези картинки в папка images : 

images/lightbox-ico-loading.gif

images/lightbox-btn-prev.gif

images/lightbox-btn-next.gif 

images/lightbox-btn-close.gif

 

3.Добавете 

<script type="text/javascript">

$(function() {$('#demo a').lightBox();});

</script>

 

 Това ще добави метода lightBox() към всички тагове <xmp><а></xmp> намиращи се в <div id="demo"></div>

 

4. Накрая добавете 

<div id="demo"></div> и вътре сложете всички линкове които искате да се отварят с lightbox 

например :

<div id="demo"><a href="images/afrika.jpg"><img src="images/afrika.jpg" width="100" alt="картинка 1" border="0" /></a></div>

 

 Демо и Download тук - http://kupikola.com/urok



Коментари (3)

mitko98 на 01.04 2011 в 16:53ч.
Не работи!
mnootap на 29.05 2011 в 10:51ч.
Работи перфектно! Благодаря за урока!
Aleksey1 на 04.12 2012 в 18:12ч.
Работи и е перфектно, но ако може малко помощ. При кликване на снимката ми излиза в цял размер който е доста по голям от екрана, от къде точно мога да регулирам размера, че не можах да намеря?

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com