YoxView: jQuery image viewer plugin
Onlangs ontdekte ik een handige jQuery plugin voor oa het bekijken van beeldmateriaal en video's op een website: YoxView!
YoxView biedt de gebruiker
content aan via een Lightbox, maar beperkt zich niet enkel tot
afbeeldingen, zoals vele andere LightBox scripten. YoxView kletst
er nog een hoop aan mogelijkheden bij: denk maar aan
tekstmateriaal, video (Youtube, Vimeo, Flash, ...), audio, iframes,
pdf documenten, Quicktime of Java applets, enzovoort!
Enkele voordelen van YoxView op een rijtje:
- Gratis
- Zeer gemakkelijk te integereren
- Volledig configureerbaar via verschillende opties
- Meertalig: denk hierbij aan tooltips of teksten van knoppen (vb. sluit knop) die je in de popup wilt tonen
- Mogelijkheid om afbeeldingen en filmmateriaal (vb. Youtube filmpjes) weer te geven via een slideshow of gallerij.
- Gebruik van het toetsenbord wordt ondersteund vb. bladeren doorheen de afbeeldingen via de pijltjes op het toetsenbord.
- Zoekmachine vriendelijk: grote afbeeldingen worden geindexeerd.
- Cross-browser compatibel
- De inhoud van de popup (vb. afbeeldingen, video's) schaalt zich automatisch zodat het perfect past in het browser venster en op optimale grootte wordt weergegeven.
- Toevoegen van eigen knoppen aan de YoxView popup vb. Handig als je een download knopje wilt.
- Mogelijkheid om een YoxView popup te openen vanaf een tekstuele link.
- Voor developers: eventhandlers toevoegen voor specifieke events die zich voordoen in YoxView. vb.) Stel dat je de gallerij wilt sluiten wanneer de gebruiker de laatste afbeelding heeft bereikt in de gallerij, kan je het onClose event gebruiken.
- Caching van afbeeldingen: afbeeldingen kunnen reeds geladen worden in de achtergrond, waardoor de gebruiker een betere performantie waarneemt.
- Verschillende "skins" mogelijk: wil je de Lightbox in een ander kleedje steken? Geen probleem! Achtergrondkleur, buttons, etc zijn allemaal te stylen.
Hoe te gebruiken?
Als voorbeeldje zal ik tonen hoe je een gallerij opent via YoxView, waarbij de popup zich automatisch sluit, wanneer de gebruiker bij de laatste afbeelding gekomen is:
1) Download de YoxView plugin.
2) Zorg ervoor dat het gedownloade "yoxview" foldertje onder de root van je website terecht komt. Hierin zitten alle images, scripts, css files en dergelijke in die YoxView gebruikt.
3) Voeg volgende script regel toe aan het bestand waarin je YoxView gaat oproepen:
<script type="text/javascript" src="../yoxview/yoxview-init.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".yoxview").yoxview({
loopPlay: false,
onEnd: function(){ $.yoxview.close(); }
});
});
</script>
Het "yoxview-init.js" bestand zal ervoor zorgen dat alles geinitialiseerd zodat YoxView weet waar hij zijn script files en css files en dergelijke moet halen. Het tweede stukje script voert de "yoxview" methode uit op een element met css klasse = yoxview (zie: .yoxview). Wanneer de gebruiker het einde van de gallerij bereikt heeft wordt het YoxView venster gesloten via de instructie:
onEnd: function(){ $.yoxview.close();
4) Last but not least: de gallerij met afbeeldingen natuurlijk
Voeg een div toe met css klasse "thumbnails yoxview" aan het
bestand (vb. .html, .aspx, ...) waar je YoxView in gaat oproepen en
steek hierin de afbeeldingen:
<div class="thumbnails yoxview"> <a href="images/large/01.jpg"><img src="images/thumbnails/01.jpg" alt="First" title="The first image" /></a> <a href="images/large/02.jpg"><img src="images/thumbnails/02.jpg" alt="First" title="The SECOND image" /></a> <a href="images/large/03.jpg"><img src="images/thumbnails/03.jpg" alt="First" title="The THIRD image" /></a> </div>
5) Zo, dat is alles! Bekijk bovenstaand voorbeeldje of bekijk andere demo's om YoxView onder de knie te krijgen!
Heb je iets moois in YoxView gemaakt of weet je nog leuke Lightbox scripts? Laat het ons weten via de comments!