A Lightbox JS indulása óta ez az effekt fogalommá nőtte ki magát, a képek, sőt egyéb beágyazott tartalmak megjelenítésének kedvelt technikája. Természetesen létezik jQuery Javascript könyvtárra épülő megoldás is. Ha az oldaladon más célokra már jQuery-t használsz, akkor célszerűtlen emiatt más script könyvtárat is betölteni, de a mérete miatt sem rossz választás, a jQery 1.2.6.min js, és a jquery.lightbox-0.5 js együtt csak 74,1Kb.
Continue Reading »

A jQuery pageSlide plugin segítségével az eredeti tartalom elcsúsztatásával másodlagos tartalom jeleníthető meg, pár sornyi Javascript segítségével.
Ha ezt a módszert egy anchor tag-gel kombináljuk, akkor a pageSlide becsomagolja az eredeti tartalmat egy wrapper-be és létrehoz egy további elemet a másodlagos ablaknak. Az effekt kattintásra lép működésbe.


Continue Reading »

Az s3Slider jQuery plugin segítségével időzített képváltót alakíthatsz ki, diszkrét, de látványos megoldás. A képeken megjegyzéseket lehet megjeleníteni, áttetsző háttérrel, és a kép bármely oldalán, akár váltakozva.

Continue Reading »

Szimpla hover effekt, némi animációval... egyszerűnek tűnik, nem? Valóban egyszerű, de nagyszerű - portfóliókban pl. kifejezetten jól mutathat.

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.

Egyszerűen megjelenítheted weboldaladon friss Twitter bejegyzéseidet ezzel a jQuery pluginnel. Rendkívül egyszerűen telepíthető és konfigurálható, mindössze kettő fájl beillesztésére van szükség, maga a plugin, illetve a megjelenést formázó css fájl.

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.