A lightbox plugin használata:

Az oldal head részébe az alábbi kódot kell beilleszteni:

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

Szükség van még egy css fájlra is:

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

Ennek tartalmát természetesen az oldal eredeti stíluslapjába is bemásolhatod.

A html:

A plugin használatához nem kell átírnod a kódod, a jQuery rugalmas selectorával bármilyen képhalmazt - akár többet is - kijelölhetsz. Lényeg hogy a kódod „váza” ilyesféle legyen:

<a href="image1.jpg" title="képfelirat"><img src="thumb_image1.jpg" alt="" /></a>

A script a képfeliratokat az 'a' tag title attributumának tartalmából veszi át, fotóalbum esetén pedig azt is kiírja, hány kép található az adott válogatásban.

A jQuery lightBox plugin aktiválása:

Ezek után hívd meg jQuery lightBox függvényt, válaszd ki a hivatkozásokat, amelyre alkalmazni szeretnéd. Mutatok néhány példát:

<script type="text/javascript">
$(function() {
	// Első példa...
	$('a[@rel*=lightbox]').lightBox(); // Minden link, amely rel="lightbox" attribútummal rendelkezik
	// Vagy ez...
	$('#gallery a').lightBox(); // Minden link, amely gallery ID-jű elemben van.
	// Itt egy másik...
	$('a.lightbox').lightBox(); // Minden link, amely lightbox class-al rendelkezik
	// Esetleg ez...
	$('a').lightBox(); // Minden link az oldalon
	// ... A lehetőség száma rengeteg. Használd kreatívitásod vagy a fenti példák bármelyikét.
});
</script>

Az elérhető konfigurációs beállítások:

A plugin néhány beállítási lehetősége a meghíváskor testreszabható, a konfigurációs értékeket a függvény paramétereként egy hash-ben adhatod át, az alábbiak szerint:

* overlayBgColor - A színátfedés (overlay) színe, alapértelmezetten #000 fekete.
* overlayOpacity - A színátfedés átlátszóságának mértéke, alapból 0.8.
* imageLoading - Animáció a betöltődés alatt. images/lightbox-ico-loading.gif az alapértelmezett.
* imageBtnClose - Bezárás gomb. images/lightbox-btn-close.gif az alapértelmezett.
* imageBtnPrev - "Előző" gomb. images/lightbox-btn-prev.gif az alapértelmezett.
* imageBtnNext - "Következő" gomb. images/lightbox-btn-next.gif az alapértelmezett.
* containerBorderSize - A képet tartalmazó box padding értéke, 10 az alapértelmezett.
* containerResizeSpeed - A képet tartalmazó box átméretezésének időtartama, 400 az alapértelmezett.
* txtImage - Az "Image" felirat.
* txtOf - Az "of" felirat.
* imageBlank - A blank image, amely az Internet Explorer hover hack-hez kell, images/lightbox-blank.gif az alapértelmezett.
* keyToClose - Bezárás gyorsbillentyű, a c (close) az alapértelmezett.
* keyToPrev - Előző kép gyorsbillentyű, p (previous) az alapértelmezett.
* keyToNext - Következő kép gyorsbillentyű, az n (next) az alapértelmezett.

Példa a jQuery lightbox plugin konfigurálására:

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'http://example.com/images/loading.gif',
	imageBtnClose: 'http://example.com/images/close.gif',
	imageBtnPrev: 'http://example.com/images/prev.gif',
	imageBtnNext: 'http://example.com/images/next.gif',
	containerResizeSpeed: 350,
	txtImage: 'Imagem',
	txtOf: 'de'
   });
});
</script>

Mire vársz? Töltsd le vagy nézd meg a demót !

Több jQuery plugin kombinálása:

Csoxa kérésére megmutatom, hogy lehet az előbb bemutatott lightbox, és az animált hoover plugint együtt használni:

A header-be a szokásos módon helyezd el a scripteket:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />

Aktiváld egymás után a két funkciót:

<script type="text/javascript">
		$(function() {
			$('ul.hover_block li').hover(function(){
				$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
			});
		});
		</script>
 
		 <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox({fixedNavigation:true});
    });
    </script>

A html kódban a korábbi hivatkozásokat kell annyiban átalakítani, hogy a nagy méretű képre linkelsz, illetve ha szeretnél feliratot, akkor feltétlenül szükség lesz a title elemre.

<ul class="hover_block" id="gallery">
 <li><a href="01_big.jpg" title="Ez a kép felirata">
  <img src="01.jpg" alt="bluedesign blog" /> Ez a szöveg a kép mögötti tartalom,  kattintható hivatkozással.</a>
 </li>
</ul>

Ennyi, a jQuery megoldásokat könnyen lehet kombinálni. A megjelenést a stíluslappal rugalmasan tudod variálni, sok sikert hozzá.

Mire vársz? Töltsd le vagy nézd meg a demót !

1. Az elsődleges ablak a tartalomnak van fenntartva; a másodlagos interakcióknak nem kell helyet biztosítani az oldalon — a számukra szükséges hely igény szerint létrehozható és eltávolítható.
2. Mivel a felhasználó látja a kiinduló ablakot, jobban képes koncentrálni, és könnyebben visszatérhet az előző feladathoz.

A jQuery pageSlide plugin alkalmazása:

Az oldalad header részébe illeszd be a jQuery-t, és a pageSlide plugint:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.pageslide-0.2.js"></script>

Javascript

A plugin aktiválása során definiálható, hogy melyik elem aktiválja a működést, illetve itt állítható be a másodlagos tartalom szélessége is.

1
2
3
4
5
6
7

    <script type="text/javascript">
  $(document).ready(function() {
      $('a').pageSlide({
          width: "350px"
      });
  });
  </script>

HTML

A másodlagos tartalmat egy külön html fájlban tárold (a demóban secondary_page.html), de csak magát a tartalmat, mivel a plugin működése lépésekor az itt elhelyezett kód a fő oldal szerves részeként jelenik meg.

A html kódban egy hivatkozásra lesz szükség, amelyre kattintva működésbe lép a plugin:

<a href="secondary_page.html" rel="pageslide">Kattintásra megjelenik a másodlagos ablak</a>

A másodlagos ablak eltűnik, ha a felhasználó az eredeti oldalon bárhol kattint.

Az eredeti cikk a Halobrite.com oldalon érhető el, szerzője Scott Robbin.

Mire vársz? Töltsd le vagy nézd meg a demót !

Alkalmazása rendkívül egyszerű, az oldalad header részébe illeszd be a jQuery-t, és az s3Slider plugint:

 <script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

Magyarázat

A html kód felépítése: egy "slider" div-en belül az elemeket listában helyezd el, a lista elem tartalmazza a képet, illetve egy "span" tag-ben a kísérőszöveget.

Ha beállítasz egy fő div id-t (pl. s3slider) mint itt, akkor a galéria (slide show) többi osztályánál és id-jénél annak a névnek kell szerepelnie. Például, ha a fő div-ednek adsz egy id-t #te_neved néven, akkor a belső id-nek #te_nevedContent -nek kell lennie és az osztálynévnek .te_nevedImage-nek, mint ahogy azt a példa is mutatja.

A másik fontos dolog, hogy minden .te_nevedImage elemben kell lennie span-nek, valamint a lista elem végén szükség van egy .te_nevedImage osztályú div-re, különben az utolsó kép nem jelenik meg.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

 <div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

 #s3slider {
   width: 400px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}
 
#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}
 
.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}
 
.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;
 
   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}
 
.clear {
   clear: both;
}

A script aktiválása során két paramétert kell beállítani, a div nevét, amelyen belül az effekt működjön, illetve a képváltás idejét:

Javascript

1
2
3
4
5

 $(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 4000
   });
});

Böngésző kompatibilitás

A plugin tesztelve az alábbi, elterjedtebb böngésző verziókon:

• Firefox 2.x (Win)
• Firefox 3.0.3 (Win/Linux/Mac)
• Opera 9.6 (Win/Linux)
• Safari 3.0.3 (Win/Mac)
• Internet Explorer 6 (Win)
• Internet Explorer 7 (Win)
• Google Chrome (Win)

A plugin szerzője: Boban Karišik

Mire vársz? Töltsd le vagy nézd meg a demót !

Használata nagyon egyszerű, készítesz egy listát relatív pozícióval, a beillesztett képek abszolút pozíciót kapnak, a hover animációját pedig a jQuery plugin biztosítja.

A HTML

Tehát egyszerű listába ágyazzuk a képeket:

1
2
3
4

<ul class="hover_block">
	<li><a href="/"><img src="your_image.gif" alt="alt" /> Text</a></li>
	<li><a href="/"><img src="your_image.gif" alt="alt" /> Text.</a></li>
</ul>

A CSS formázás

A lista elemek pozicionálása relatív, míg a képeké abszolút.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

ul.hover_block li{
			list-style:none;
			float:left;
			background: #fff;
			padding: 10px;
			width:300px; position: relative;
			margin-right: 20px; }
 
		ul.hover_block li a {
			display: block;
			position: relative;
			overflow: hidden;
			height: 150px;
			width: 268px;
			padding: 16px;
			color: #000;
			font: 1.6em/1.3 Helvetica, Arial, sans-serif;
		}
 
		ul.hover_block li a { text-decoration: none; }
 
		ul.hover_block li img {
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}

A jQuery kód

1
2
3
4
5
6
7

$(function() {
	$('ul.hover_block li').hover(function(){
	$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
}, function(){
	$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
		});
	});

Az effekt időtartamát lecsökkentheted vagy növelheted a 'duration' opcióval - értelemszerűen nagyobb duration lassabb effektet eredményez.

Mire vársz? Töltsd le vagy nézd meg a demót !

A plugin szerzője Timothy van Sas.

A css fájl segítségével a megjelenés, színvilág egyszerűen formázható, természetesen akár a saját oldalad meglévő stíluslapját is használhatod.

Bevezetésként nézd meg a demó verziót: - jQuery plugin for Twitter v1.0
Ez egy valóban egyszerű és könnyen testreszabható módszer arra, hogy Twitter feed-et beágyazz egy weblapba.

Töltsd le a szükséges fájlokat(.zip) majd másold őket a weblapod könyvtárába. A head részbe az alábbi kódot kell beilleszteni:

<link rel="stylesheet" href="jquery.twitter.css" type="text/css" />
<script src="jquery.twitter.js" type="text/javascript"></script>

Ha jQuery-t nem használsz a weboldaladon, akkor még erre is szükség lesz:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Következő lépésben hozz létre egy üres div-et, twitter id-vel, ahol a bejegyzéseket szeretnéd megjeleníteni:

<div id="twitter"></div>

Végezetül illeszd hozzá a beépülő modult a twitter divhez a következő jQuery kóddal:

$(document).ready(function() {
	$("#twitter").getTwitter({
		userName: "jquery",
		numTweets: 5,
		loaderText: "Loading tweets...",
		slideIn: true,
		showHeading: true,
		headingText: "Latest Tweets",
		showProfileLink: true
	});
});

A testreszabás önmagáért beszél:
userName - twitter felhasználóneved,
numTweets - a megjelenített bejegyzések száma,
loaderText - szöveg a betöltődés alatt,
slideIn - slide effekt ki, vagy be kapcsolása (true vagy false)
showHeading - fejléc igen, vagy nem
headingText - a fejléc szövege,
showProfileLink - a profilod linkjét mutassa, vagy nem.

A beépülő modul friss verzióját a szerző, Damien du Toit oldaláról lehet letölteni.