Webscripts.pl - darmowe skrypty na Twoją stronę. » plugin http://www.webscripts.pl Tue, 20 Apr 2010 20:51:10 +0000 en hourly 1 Colorbox – plugin `lightbox` dla jQuery http://www.webscripts.pl/colorbox/ http://www.webscripts.pl/colorbox/#comments Wed, 27 Jan 2010 15:49:27 +0000 b4x http://www.webscripts.pl/?p=33 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://www.webscripts.pl/colorbox/feed/ 0 jQuery: ytPlaylist http://www.webscripts.pl/jquery-ytplaylist/ http://www.webscripts.pl/jquery-ytplaylist/#comments Tue, 26 Jan 2010 16:20:00 +0000 b4x http://www.webscripts.pl/?p=23 ytPlaylist – jest skryptem który generuje playlisty video z Youtube, zamienia zwykłe linki prowadzące do video na Youtube.com na odtwarzacze.

Użycie skryptu jest bardzo proste, poniżej przedstawiamy wam przykładowy kod – który zademonstruje wam działanie.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.youtubeplaylist.js"></script>
<script type="text/ecmascript">
 $(function() {
 $("ul.demo1").ytplaylist();
 });
</script>
</head>
<body>
 <div>
 <div id="ytvideo"></div>
 <ul>
 <li><a href="http://www.youtube.com/watch?v=QBBWKvY-VDc">Video 1</a></li>
 <li><a href="http://www.youtube.com/watch?v=ZXMQqLnRhRI">Video 2</a></li>
 <li><a href="http://www.youtube.com/watch?v=Wvo-g_JvURI">Video 3</a></li>
 </ul>
</body>
</html>

Powyższy kod powinien zamienić nam wszystkie odnośniki na linki – które umożliwią odtworzenie video bezpośrednio na stronie.

Zaletą skryptu (pluginu), jest to iż można go modyfikować w dowolny sposób – można stworzyć z tego player czy coś innego co wyobraźnia podpowie.

Plik do pobrania zawiera przykłady.

]]> http://www.webscripts.pl/jquery-ytplaylist/feed/ 0