1 Star2 Stars3 Stars4 Stars5 Stars
(No Ratings Yet)
Loading ... Loading ...

Colorbox – plugin `lightbox` dla jQuery

Colorbox – jest to plugin przydatny do prezentacji obrazków / zdjęć w galeriach – umożliwia on po kliknięciu w miniaturkę wyświetlenie eleganckiego okienka z pełnym rozmiarem zdjęcia.

Dodatkowymi zaletami Colorboxa, jest możliwość wstawienia filmów z Youtube oraz Vimeo, umożliwia nam także wyświetlenie zewnętrznej strony (iframe) oraz własnego kodu HTML.

Przykładowe działania Colorboxa ‘na żywo’ można obejrzeć na stronie autora (kliknij by obejrzeć demo).

Przykładowy efekt – video z Youtube’a

na naszej stronie – także został zastosowany Colorobx – po kliknięciu na obrazek, także obejrzymy efekt.

Instalacja Colorobxa, jest także prosta,  w <head> należy dodać bibliotekę jQuery oraz plugin colorboxa:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("a[rel='colorbox']").colorbox();
 });
</script>

Później należy przy obrazkach, linkach itp. dodać do odnośnika parametr rel=”colorbox” np:

<a href="http://www.webscripts.pl" rel="colorbox">Webscripts.pl - Colorbox</a>

Taki przykład wyświetli nam stronę Webscripts.pl za pomocą colorboxa.

Zaawansowane możliwości, oraz ich zastosowanie wraz przykładami można obejrzeć na stronie autora.

http://colorpowered.com/colorbox/

Skomentuj

Twój adres email nie zostanie opublikowany i nie będzie rozpowszechniany. Wymagane pola są oznaczone *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>