Dit artikel gaat over:

Ik hoop dat het niet nodig is om uit te leggen dat attributen zoals titel en alt vaak uiterst noodzakelijk zijn. Ze helpen gebruikers immers beter door een grote hoeveelheid informatie te navigeren en zijn bovendien uiterst nuttig voor de zoekmachineoptimalisatie van de site. Het enige probleem met tooltips is dat ze niet kunnen worden gewijzigd met behulp van CSS-stijlen. Om dit probleem op te lossen, zullen we gebruik maken van de mogelijkheden.

1. Laten we een eenvoudig HTML-bestandsframe maken dat het titelattribuut bevat.

Lijst met koppelingen:

• thuis
• Over bedrijf
• Contacten
• Portefeuille

2. Nu moet je de qTip-plug-in downloaden uit de repository.

3. Verbind de gedownloade bestanden:

// Standaard jQuery-bibliotheek // We zullen jQuery-scripts in dit bestand schrijven

4. Om de tooltip te laten werken, schrijft u gewoon in scripts.js:

$(document).ready(function())( $("a").qtip(); ));

Deze constructie betekent dat voor alle links die een title-attribuut hebben, de qtip()-methode zal worden toegepast.

1. Tooltips kunnen op verschillende manieren worden geconfigureerd. Laten we eerst de positie wijzigen van waaruit de tooltips worden weergegeven.

$("a").qtip(( position: ( my: "midden onder", //Cursorpositie op: "midden boven", //Positie van de tooltip-viewport: $(window) //De tooltip wordt niet gelikt het randenscherm ) ));

2. Nadat u de positie heeft ingesteld, kunt u gaan werken aan het kleurenschema voor het weergeven van de tooltip. Standaard bevat het bestand jquery.qtip.min.css de volgende kleurstijlen:

Qtip-default (gele standaardstijl)

Qtip-bootstrap

Aan sommige van deze stijlen kunt u een schaduw toevoegen: qtip-shadow . Bovendien stoort niemand je om je eigen stijl te creëren, die perfect aansluit bij de algemene stijl, ook al zijn er meer dan genoeg standaardstijlen.

$("a").qtip(( position: ( my: "midden onder", at: "midden bovenaan", viewport: $(window) ), style: ( klassen: "qtip-green qtip-shadow" ) ) );

1. Laten we eerst een HTML-framework maken:

• Thuis
• Over
• Contact
• Ons werk

#navigation ( achtergrond: rgb(132.136.206); /* Oude browsers */ achtergrond: -moz-linear-gradient(top, rgba(132.136.206,1) 0%, rgba(72,79.181,1) 50%, rgba(132.136.206 ,1) 100%); /* FF3.6+ */ achtergrond: -webkit-gradient(lineair, links boven, links onder, kleur-stop(0%,rgba(132.136.206,1)), kleur-stop(50 %,rgba(72,79,181,1)), kleur-stop(100%,rgba(132,136,206,1))); /* Chrome,Safari4+ */ achtergrond: -webkit-lineair verloop(boven, rgba(132,136,206, 1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* Chrome10+,Safari5.1+ */ achtergrond: -o-lineair verloop(boven, rgba(132,136,206 ,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* Opera11.10+ */ achtergrond: -ms-lineair-gradiënt(boven, rgba(132,136,206, 1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8488ce", endColorstr= "#8488ce",GradientType=0); /* IE6-9 */ achtergrond: lineair verloop(boven, rgba(132.136.206,1) 0%,rgba(72.79.181,1) 50%,rgba(132.136.206,1 ) 100%); /* W3C */ lijststijltype: geen; marge: 100px 20px 20px 20px; opvulling: 0; overloop verborgen; -webkit-border-radius: 5px; -moz-border-radius: 5px; grensradius: 5px; ) #navigatie li ( marge: 0; opvulling: 0; weergave: blok; zwevend: links; rand-rechts: 1px effen #4449a8; ) #navigatie a ( kleur: #fff; rand-rechts: 1px effen #8488ce; weergave : blok; opvulling: 10px; ) #navigatie a:hover ( achtergrond: #859900; rand-rechts-kleur: #a3bb00; )

Het resultaat zou het volgende beeld moeten zijn:

3. Voeg toe aan het scripts.js-bestand:

$("#navigation a").qtip(( position: ( mijn: "midden boven", bij: "midden onder", viewport: $(window) ), show: ( effect: function(offset) ($(this ).slideDown(300); ) ), hide: ( effect: function(offset) ( $(this).slideUp(100); ) ), style: ( klassen: "qtip-green qtip-shadow", ) )) ;

Wanneer u nu met uw muis over het navigatiemenu beweegt, wordt er tooltip (titelattribuut) weergegeven.

Naast het weergeven van standaardtags kan de tooltip ook andere inhoud weergeven, bijvoorbeeld afkomstig uit een bestand, uit een verborgen container of een database, zonder de pagina opnieuw te laden met behulp van Ajax-technologie.

Deze link haalt inhoud uit een bestand met behulp van Ajax

De waarde van het href=”tooltip.txt” attribuut betekent dat de hyperlink verwijst naar een regulier txt-bestand.

$(".infobox").each(function())( $(this).qtip(( content: ( tekst: "Laden...", //Terwijl de inhoud wordt geladen, wordt dit ajax-item weergegeven: ( url: $ (this).attr("href") //Waar kan ik de inhoud vandaan halen), title: ( //Voegt een titelveld toe aan de tooltiptekst: $(this).attr("title"), button: true //Voegt een knop toe voor het sluiten van de tooltip ) ), position: ( my: "midden boven", bij: "midden onder", effect: false, //Verwijdert de viewport met pop-outeffect: $(window) ), show: ( event: "click", // De tooltip verschijnt wanneer u op een link klikt, u kunt deze vervangen door 'hover', vervolgens verschijnt de tooltip wanneer u solo zweeft: true // Hiermee kunt u weergeven slechts één tooltip op het scherm ), hide: "unfocus", //De tooltip sluit wanneer u op een andere pagina-elementstijl klikt: ( klassen: "qtip-green qtip-shadow" ) )); )).bind(" klik", function(e)(e.preventDefault())); //Als u op een link klikt, laadt de browser de url niet

Deze Ajax-techniek werkt alleen als de server draait. Om het op de lokale computer te laten werken, moet u bijvoorbeeld .

Voordat ik het vergeet, wat zijn de voor- en nadelen van aluminium sectionele radiatoren en welke radiatoren meestal door consumenten worden gekozen.

(downloads: 409)

Ik kwam het idee tegen op de website van de elektronische accountant “Elba”. Het heeft een mooie en gebruiksvriendelijke interface en ik vond de tooltips die overal aanwezig zijn erg leuk.

Ik wilde simpelweg de scriptcode uit de broncode van de site halen die dit zou implementeren, maar dat was niet het geval. Daar hebben ze zoveel verschillende scripts op één stapel verzameld (ik weet niet hoe het in vaktaal correct heet) dat het voor mij moeilijk was om daar iets specifieks uit te halen.

Dus ging ik mijn eigen script schrijven, dat ongeveer hetzelfde doet. Ik weet dat er al veel kant-en-klare oplossingen zijn, maar ik ben meer geïnteresseerd in het zelf schrijven van een script om opnieuw te oefenen met jQuery.

Je kunt zowel op de website Share42.com als daar een voorbeeld zien, waar de broncode alleen bevat wat nodig is om het script te laten werken.

De scriptcode ziet er als volgt uit:

(function($)( $(function() ($("span.jQtooltip").each(function() ( var el = $(this); var title = el.attr("title'); if (titel && titel != "") ( el.attr("titel", "").append("" + titel + ""); var width = el.find("div").width(); var height = el.find("div").height(); el.hover(function() ( el.find("div") .clearQueue() .delay(200) .animate((breedte: breedte + 20, hoogte: hoogte + 20), 200).show(200).animate((breedte: breedte, hoogte: hoogte), 200);), function() ( el.find("div") .animate((breedte: breedte + 20, hoogte: hoogte + 20), 150).animate((breedte: "verbergen", hoogte: "verbergen"), 150); )).mouseleave(function() ( if (el.children().is( ":verborgen")) el.find("div").clearQueue(); )); ) )) )) ))(jQuery)

Sla het op in een bestand met de .js-extensie, bijvoorbeeld scripts.js, en verbind het met de site vóór de tag, en vergeet niet om tegelijkertijd het jQuery-framework te verbinden als dit nog niet is gedaan. Die. De volgende code wordt toegevoegd aan de html-code van de site:

JQtooltip ( positie: relatief; cursor: help; rand-onder: 1px gestippeld; ) .jQtooltip div ( weergave: geen; positie: absoluut; onder: -1px; links: -1px; z-index: 1000; breedte: 190px; opvulling: 8px 12px; tekst uitlijnen: links; lettergrootte: 12px; lijnhoogte: 16px; kleur: #000; vakschaduw: 0 1px 3px #C4C4C4; rand: 1px effen #DBB779; achtergrond: #FFF6BD; grensradius: 2px; )

Nu hoeft u alleen nog maar de vereiste tekst in een tag te plaatsen met de klasse jQtooltip en het title-attribuut, d.w.z. soortgelijk:

tekst

Als je wilt dat er een vierkant is in plaats van tekst, zoals in, dan moet je de volgende stijlen aan het CSS-bestand toevoegen:

JQtooltip.mini (weergave: inline-block; verticaal uitlijnen: onder; lettergrootte: 11px; breedte: 14px; lijnhoogte: 13px; tekst-uitlijning: midden; marge-links: 2px; boven: -2px; kleur : #9A4D18; rand: 1px effen #FAD28F; achtergrond: #FFF6BD; randradius: 2px; )

En de html-code zal in dit geval als volgt zijn:

!

Afhankelijk van uw voorkeuren kunt u de CSS-code wijzigen naar wat u maar wilt. Dat wil zeggen, zoals u kunt zien, kan de tooltip op elke manier worden ontworpen, u hoeft alleen maar CSS te begrijpen.

Dat is eigenlijk alles.

P.S. Ik twijfel er niet aan dat het script geletterder gemaakt zou kunnen worden, maar in principe ben ik tevreden met de manier waarop het is geworden.

Bent u op zoek naar een plek om uw website te hosten in Oekraïne? Kies voor beproefde hosting - X-HOST. U krijgt hoogwaardige en betrouwbare hosting tegen concurrerende tarieven.

jQuery-plug-ins zijn een van de meest noodzakelijke componenten bij het bouwen van een website, of zelfs welke webapplicatie dan ook. Hiermee kunt u uw functionaliteit uitbreiden. Dit artikel bevat de handigste plug-ins van 2012. Om het zoeken te vergemakkelijken zijn alle plug-ins onderverdeeld in de volgende categorieën: Webpagina-indeling - plug-ins, navigatieplug-ins, formulierplug-ins, plug-ins voor het maken van schuifregelaars, plug-ins voor diagrammen en grafieken, effecten voor afbeeldingen en andere. Onder deze plug-ins bevinden zich ook plug-ins die u zullen helpen bij het maken van uw responsieve applicaties.

equalize.js is een jQuery-plug-in waarmee u een op blokken gebaseerde websitestructuur kunt maken. Hiermee kunt u de hoogte en breedte van elk element aanpassen.

Met Freetile, een nieuwe plug-in voor responsieve lay-outs, kunt u elementen van elke grootte maken zonder dat u rasterkolommen met een vaste grootte hoeft te maken.

Gridster.JS jQuery-plug-in voor het bouwen van drag-and-drop-rasters. Het kan ook worden gebruikt om elementen uit het raster dynamisch te verwijderen en toe te voegen.

Zoomooz.js is een eenvoudig te gebruiken jQuery-plug-in waarmee u kunt inzoomen op elk webpagina-element. U kunt eenvoudig een zoomeffect toevoegen door simpelweg de klasse "zoomTarget" aan een HTML-element toe te voegen. De vergroting kan worden gereset door op de pagina te klikken. De plug-in is getest in Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera en Chrome.

Wookmark is een plug-in voor het maken van een dynamische sjabloon met meerdere kolommen.

jQuery HiddenPosition is een plug-in waarmee u elk element kunt toevoegen, zelfs als het verborgen is.

Stellar.js is een jQuery-plug-in die een parallax-effect voor elementen biedt.

Een jQuery-plug-in die een echt pagina-omslageffect toevoegt bij het schakelen tussen secties. Er wordt gebruik gemaakt van hardwareversnelling. Werkt op tablets en smartphones.

Plug-in voor responsieve typografie. Hiermee kunt u een selector gebruiken die de ideale lettergrootte genereert.

Hiermee kunt u geanimeerde bewegingen rond de site maken, inclusief alle mogelijke transformaties

HorizontalNav is een jQuery-plug-in die een horizontaal menu uitbreidt zodat het over de volledige breedte van de container past. Als je ooit hebt geprobeerd het effect te creëren van het correct uitrekken van een navigatiemenu naar een CSS-container voor een project, dan weet je zeker hoe moeilijk het is om dit te doen voor compatibiliteit tussen browsers. Deze plug-in maakt het gemakkelijk.

stickyMojo is een lichtgewicht, snelle en flexibele jQuery sticky sidebar-plug-in. Het werkt met Firefox, Chrome, Safari en IE8+ (ondersteunt oudere versies van IE redelijk goed).

ddSlick is een plug-in waarmee u vervolgkeuzemenu's met afbeeldingen en beschrijvingen kunt maken.

Plug-in voor eenvoudige organisatie van vervolgkeuzepanelen. De plug-in ondersteunt het werken met cookies om de status van panelen op te slaan. Tot de opties behoren retourfuncties voor het aanpassen van het proces van het openen en sluiten van secties.

Plug-in voor het maken van opvouwbare blokken die alle gegevens in een beperkte ruimte kunnen bevatten.

Met de plug-in kunt u het complexiteitsniveau van het wachtwoord bepalen.

JQuery-plug-in voor het visualiseren van het proces van het downloaden van bestanden. Het ondersteunt slepen en neerzetten en creëert direct voorbeelden van foto's.

Een plug-in die creditcardnummers detecteert en verifieert. Hiermee kunt u het type creditcard bepalen.

Plug-in voor gegevensfiltering. U kunt gegevens filteren op tag en op meerdere tags en categorieën.

Een plug-in die e-mailinvoer controleert op juistheid aan de hand van een vooraf opgestelde lijst (u kunt hier de populairste e-maildiensten mail.ru, yandrex.ru, gmail, enz. opnemen).

Plug-ins voor het maken van schuifregelaars en carrousels

Een plug-in waarmee u overgangen kunt besturen met behulp van de muis, het touchpad en het toetsenbord. Aan de standaardovergangen kunt u extra overgangen toevoegen, die zich ook in het bronbestand bevinden.

iosSlider is een plug-in voor een responsieve cross-browser slider.

RSlider is een adaptieve schuifregelaar op volledig scherm. Het past zich automatisch aan de breedte van uw scherm aan.

Fresco is een responsieve lightbox-plug-in. Het kan worden gebruikt om verbluffende overlays te maken die uitstekend werken op alle schermformaten, alle browsers en alle apparaten.

BookBlock is een jQuery-plug-in die kan worden gebruikt om componenten in boekjesstijl te maken waarmee u navigatie in pagina-omslagstijl kunt creëren. Hier kunt u elke inhoud gebruiken, of het nu afbeeldingen of tekst is. De plug-in transformeert de structuur alleen wanneer dat nodig is (met andere woorden, alleen wanneer de pagina wordt omgeslagen) en gebruikt overlays en schaduwen om realisme toe te voegen.

Adapter is een lichtgewicht inhoudsschuifregelaar die ontwikkelaars een eenvoudige interface biedt om prachtige 2D- of 3D-dia-flip-animaties te maken. Momenteel is er ondersteuning voor 3D-eigenschappen in webkit- en Firefox-browsers. Alle 2D-overgangen zijn getest in IE6+ en andere moderne browsers.

Doorlopende carrousel met verschillende handige functies. Het is gemakkelijk aan te passen en ondersteunt zelfs oudere browsers.

Rhinoslider is een redelijk flexibele jQuery-plug-in voor diavoorstellingen. Er zijn niet alleen verschillende effecten beschikbaar, maar u kunt ook uw eigen stijlen, effecten en functies aan de schuifregelaar toevoegen.

Sequence is een jQuery-plug-in waarmee u op een unieke manier door inhoud kunt scrollen en die u volledige controle geeft. Elk type inhoud kan worden gebruikt; het zal eindeloos scrollen. Het maakt gebruik van semantische markup en ondersteunt ook responsieve sjablonen en op aanraking gebaseerde apparaten.

Glisse.js is een eenvoudige, responsieve en zeer aanpasbare jQuery-fotogalerij.

Morris.js is een lichtgewicht bibliotheek die JQuery en Raphaël gebruikt om het tekenen van tijdreeksplots eenvoudiger te maken.

jQuery Org Chart is een plug-in waarmee u boomstructuren met geneste elementen kunt maken. De gegevens worden ingevoerd in een geneste, ongeordende lijst, waardoor de plug-in ongelooflijk eenvoudig te gebruiken is.

Bacon.js is een jQuery-plug-in waarmee u tekst rond een Bezier-curve of -lijn kunt wikkelen.

Textualizer - jQuery-plug-in voor het creëren van prachtige effecten op tekst. Ondersteund: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobiele Safari (iOS 4)

SlabText is een zeer nuttige jQuery-plug-in die kopteksten regel voor regel splitst voordat het formaat van elke regel wordt aangepast om de beschikbare horizontale ruimte te vullen.

trunk8 is een plug-in voor het afkappen van tekst voor JQuery. Hiermee kunt u een groot tekstblok in een kleiner deel verkleinen voor voorafgaande inspectie.

Dit is een jQuery-plug-in die CSS3-filters gebruikt om een ​​kanteleffect te creëren.

Plug-in voor het implementeren van het effect van adaptieve afbeeldingen.

jQuery-plug-in waarmee u eenvoudig afbeeldingskaarten kunt maken. Met deze tool kan elke afbeeldingskaart worden gemarkeerd of geselecteerd, en de kaart kan op verschillende manieren worden gemanipuleerd. Het werkt op alle grote browsers, inclusief Internet Explorer 6, het gebruikt geen Flash en er is niets anders voor nodig dan jQuery. Voor sommige geavanceerde effecten is HTML5-ondersteuning vereist, maar deze werkt nog steeds in oudere browsers.

Interessant teksteffect bij zweven met jQuery.

Een zeer origineel ontwerp voor de afbeeldingsschuifregelaar, die doet denken aan een waaier. Geanimeerde dia-overgang. Navigeren tussen afbeeldingen gebeurt met behulp van pijlen. Er is ook een automatische shift die kan worden in- en uitgeschakeld met de knop Afspelen/Pauze bovenaan.

Geanimeerd cirkeldiagram gemaakt met behulp van de Raphaël JavaScript-bibliotheek.

Eenvoudig CSS3-dropdownmenu voor de site.

Geanimeerde jQuery-schuifregelaar. Achtergrondafbeeldingen worden automatisch geschaald wanneer het formaat van het browservenster wordt gewijzigd. Voor elke afbeelding verschijnt een blok met een beschrijving.

Geanimeerd jQuery-effect wanneer u de cursor over het scherm beweegt.

De functionele oplossing is analoog aan alert() in JavaScript. Meer over het gebruik van Blackbird leest u op de demopagina.

Een set van verschillende Ajax-componenten op het JFS open source-framework voor het maken van gebruikersinterface-elementen. De set componenten omvat de meest voorkomende interface-elementen: componenten voor het werken met tabellen en grafieken, tabbladen, pop-ups, filters, menu's, kalenders, componenten voor het werken met formulieren en vele andere Ajax-oplossingen. U kunt alle componenten in actie zien op de demopagina. OpenFaces wordt gedistribueerd onder twee soorten licenties: gratis en commercieel.

Een verzameling professionele widgets voor webontwikkelaars. De Wijmo-set bevat de volgende gratis jQuery-oplossingen: accordeons, kalenders, pop-updialogen, expanders, gestileerde formulieren, verschillende lijsten, menu's, voortgangsbalken, tabbladen, tooltips en andere handige widgets. Naast gratis oplossingen bieden Wijmo-ontwikkelaars ook hoogwaardige commerciële jQuery UI-ontwikkelingen. Nadat u het archief heeft gedownload, kunt u alle mogelijke widgets in actie zien; ze bevinden zich in de map wijmo-open/development-bundle/samples/. Deze kit bespaart u zeker veel tijd bij het ontwikkelen van uw webprojecten.

Geanimeerd ontwerp van het veld voor het invoeren van een zoekopdracht. Het effect kan worden waargenomen door met de muis in het invoerveld te klikken. Na het invoeren van een zoekopdracht via het toetsenbord verschijnt een knop om te beginnen met zoeken.

Plug-in voor het maken van schaalbare tekst, afhankelijk van de grootte van het browservenster. Hoe groter het browservenster, hoe groter de tekstgrootte. Houd er rekening mee dat dit effect niet mag worden gebruikt voor gewone tekst in alinea's. Het is alleen geschikt voor het weergeven van grote inscripties, bijvoorbeeld op promotiesites. Een voorbeeld is te zien op de demopagina. Probeer het formaat van het venster te wijzigen om het effect te zien.

Functionele diavoorstelling. Dia's kunnen zijn: eenvoudige afbeeldingen, afbeeldingen met bijschriften, afbeeldingen met tooltips, video's. U kunt pijlen, schuifnummerlinks en de links/rechts-toetsen op uw toetsenbord gebruiken om te navigeren. De diavoorstelling is er in verschillende versies: met en zonder thumbnails. Om alle opties te bekijken, volgt u de links Demo #1 - Demo #6 bovenaan de demopagina.

Met deze plug-in kunt u een beeldzoomeffect toevoegen aan het zweven of er een overlay aan toevoegen. De plug-in is eenvoudig aan te passen aan uw behoeften.

Geanimeerde jQuery-galerij.

Nieuwe jQuery-schuifregelaar. Verschillende coole geanimeerde effecten bij het wisselen van dia's.

Nieuw menu in Apple-stijl. Het ziet er donkerder uit dan voorheen, maar niet minder schattig.

Veel verschillende hover-tooltip-effecten.

Een afbeeldingengalerij die is geoptimaliseerd voor weergave op mobiele apparaten (telefoons of tablets).

Het effect van het vergroten van het beeldgebied bij het zweven.

Een functioneel winkelwagentje voor een online winkel met geïntegreerde betaalmethoden voor goederen via PayPal of Google Checkout. Gebruikte technologieën: HTML, CSS, jQuery, AJAX, PHP, XML, XSL. Kan eenvoudig worden ingesloten in een webpagina en past het uiterlijk van het winkelwagentje aan.

Originele navigatie tussen miniatuurafbeeldingen. Om het effect aan de rechterkant van de demopagina te bekijken, klikt u op de knoppen Omhoog en Omlaag. Deze jQuery-oplossing biedt ook een effect wanneer u over een miniatuur beweegt.

5. Het blokweergavetype omschakelen naar jQuery

Met behulp van deze jQuery “Switch Display Options” plugin kun je een switch op de pagina implementeren, waarmee de bezoeker overschakelt van een tabellarische weergave van informatie naar een volledige weergave met een beschrijving van de blokken. Perfect voor portfolio-implementatie.

Implementeren van een prachtig portfolio met behulp van jQuery en HTML5. Het kenmerk van het portfolio zit in het geïmplementeerde filter. Afhankelijk van de geselecteerde categorie worden verschillende werken in het portfolio weergegeven.

jQyery-galerij met miniaturen. De mogelijkheid om in een compact venster en in een volledig scherm te bekijken is geïmplementeerd, evenals de mogelijkheid om automatisch wisselen van dia's in/uit te schakelen.

Plug-in voor het ondertitelen van afbeeldingen. Wanneer u de muiscursor beweegt met een geanimeerd effect, verschijnt er een beschrijving van de afbeelding. jQuery wordt gebruikt om animaties te maken.

In de rechterbovenhoek van de dia kunt u het automatisch wisselen van dia's in- of uitschakelen.

Geanimeerd menu. Menu-items worden gepresenteerd in de vorm van pictogrammen en beschrijvingen. Verschillende geweldige effecten wanneer u met de muis over een menu-item beweegt. Er zijn 8 effecten. Om ze allemaal te zien, volgt u de links Exemple1-Exemple8 op de demopagina.

Diavoorstelling met een origineel effect van wisselende afbeeldingen.

jQuery-galerij met afbeeldingsbijschriften. Verschillende dia-overgangseffecten. Navigeren tussen afbeeldingen gebeurt met behulp van pijlen of door op de miniatuur te klikken.

Achtergrondeffect (beweging door lagen). Beweeg op de demopagina uw muis over het scherm om het effect in actie te zien.

Om unieke ‘muren’ te creëren van foto’s of HTML-blokken die met de muis binnen een vast gebied over het scherm kunnen worden gesleept.