Webscripts.pl - darmowe skrypty na Twoją stronę. » jquery 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: napis na obrazku http://www.webscripts.pl/jquery-napis-na-obrazku/ http://www.webscripts.pl/jquery-napis-na-obrazku/#comments Tue, 26 Jan 2010 18:46:24 +0000 b4x http://www.webscripts.pl/?p=27 Plugin do jQuery – który umożliwia nam napisanie dowolnego tekstu na obrazku – z doskonałym efektem.

Przykładowe użycie:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Type Over Image &mdash; Napis na obrazku</title>
 <link rel="stylesheet" type="text/css" href="css/css.css" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2" type="text/javascript"></script>
 <script src="js/titleblock.jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function() {
 $("img").titleBlock({
 removeTitle: false,
 thefontSize: "24px"
 });
 });
 </script>
</head>
<body>
 <div id="page-wrap">
 <img src="zdjecia/1.jpg" alt="" title="Webscripts.pl<br />Darmowe skrypty na Twoją stronę" />
 <img src="zdjecia/2.jpg" alt="" title="Webscripts.pl<br />Demo" />
 </div>
</body>
</html>

Uzyskamy następujący efekt:

Rozmiar czcionki możemy zmieniać podmieniając thefontSize: “24px” (domyślnie ustawiony na 24px).

W paczce do pobrania przygotowaliśmy dla Was skrypt – wraz z przykładowym użyciem.

]]> http://www.webscripts.pl/jquery-napis-na-obrazku/feed/ 0