Share
Maak een jQuery-diavoorstelling waarmee u door elke dia kunt klikken wanneer JavaScript is uitgeschakeld, zonder alle dia's onder elkaar te hoeven weergeven.
Er zijn verschillende zelfstudies die mensen helpen bij het maken van een jQuery-diavoorstelling, maar er zijn er niet veel
die zich richten op het maken ervan functie zonder JavaScript. Dit komt omdat de meeste mensen denken dat het niet mogelijk is maar
Ik ga een buitengewoon eenvoudige methode uitleggen die laat zien dat het inderdaad mogelijk is. Je zult snel zijn
jezelf schoppen en vragen: "Hoe heb ik daar niet aan gedacht?" ...
In deze tutorial zal ik het volgende behandelen:
Allereerst moeten we de markeringen schrijven die onze diavoorstelling zal gebruiken. Dus laten we rechtdoor springen
in en codeer het:
JQuery-diavoorstelling met tabbladen
Schuif er een
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium arcu non velit. Phasellus adipiscing-auctor lorem. Curabitur in urna ut purus consequident sollicitudin. Phasellus ut diam. Cras magna libero, tempor id, venenatis sit amet, venenatis et, dui.
Schuif twee
Nam ac nibh sit amet augue ultricies sagittis. Donec zit amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus nisi specimentum urna, sit amet molestie odio dolor non lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Dia drie
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing dui a nibh. Integer tristique lorem vitae massa. Etiam dapibus, eros sit amet euismod sempre, felis erat congue lacus, sed aliquam metus libero sed elit.
- Schuif er een
- Schuif twee
- Dia drie
Dit is nog niet helemaal voltooid, maar als algemene vuistregel zouden we dat moeten doen
begin altijd met het absolute minimum en verbeter / voeg toe wanneer
noodzakelijk.
We gaan vandaag niet de mooiste diavoorstelling maken als ik
wil gewoon de functionaliteit meer dan wat dan ook demonstreren. De
volgende stijlen zullen onze slideshow klaar maken voor actie:
/ * ------------------------------------------------ ---- */ /* GLOBAAL /* --------------------------------------- ------------- * / html font-size: 76%; body font-family: arial, helvetica, sans-serif; regelhoogte: 1,4em; lettergrootte: 1.2em; opvulling: 5%; / * ------------------------------------------ ---------- * / / * DIAVOORSTELLING / * --------------------------------- ------------------- * / #slideshow width: 960px; achtergrondkleur: #eee; border: 1px solid #ddd; #slideshow ul margin: 0; opvulling: 0; list-style-type: none; hoogte: 1%; / * IE fix * / #slideshow ul: after content: "."; beiden opschonen; weergave: blok; hoogte: 0; zichtbaarheid: verborgen; / * ------------------------------------------- --------- * / / * DIAVOORSTELLING> DIA'S / * -------------------------------- -------------------- * / #slideshow .slides overflow: hidden; width: 960px; #slideshow .slides ul / * totale breedte van alle dia's - 960px vermenigvuldigd met 3 in dit geval * / width: 2880px; #slideshow .slides li width: 920px; zweven: links; opvulling: 20px; #slideshow .slides h2 margin-top: 0; / * ------------------------------ ---------------------- * / / * DIAVOORSTELLING> NAVIGATIE / * ------------------- --------------------------------- * / #slideshow .slides-nav background-color: #ddd; border-top: 2px solid #ccc; #slideshow .slides-nav li float: left; #slideshow .slides-nav li a display: block; opvulling: 15px 20px; outline: none;
Voeg deze stijlen toe aan a slideshow.css stylesheet
in een CSS-map binnen de root. Je zou nu iets moeten zien
vergelijkbaar met dit:
Sommigen van jullie vragen zich waarschijnlijk af hoe dit in hemelsnaam gaat werken
nu dus ik laat je niet langer wachten.
Het enige dat we moeten doen is elk van onze dia's een ID geven en daarnaar verwijzen
ID in het href-kenmerk van het juiste navigatie-item. Dat is het
eenvoudig.
Uw nieuwe opmaak moet er als volgt uitzien:
JQuery-diavoorstelling met tabbladen
Schuif er een
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium arcu non velit. Phasellus adipiscing-auctor lorem. Curabitur in urna ut purus consequident sollicitudin. Phasellus ut diam. Cras magna libero, tempor id, venenatis sit amet, venenatis et, dui.
Schuif twee
Nam ac nibh sit amet augue ultricies sagittis. Donec zit amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus nisi specimentum urna, sit amet molestie odio dolor non lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Dia drie
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing dui a nibh. Integer tristique lorem vitae massa. Etiam dapibus, eros sit amet euismod sempre, felis erat congue lacus, sed aliquam metus libero sed elit.
- Schuif er een
- Schuif twee
- Dia drie
Test nu uw nieuwe code door op elk tabblad te klikken ... Hoe cool is dat?
Dit is geenszins een onontdekte techniek. Mensen gebruiken het al
het op sites die je waarschijnlijk hebt gebruikt zonder dat je het wist, zoals de
Coda website.
Inderdaad, dat was leuk! Nu is het tijd om wat funky glijdende animaties toe te voegen
naar onze diavoorstelling.
U moet het downloaden
verkleinde
jQuery Cycle-plug-in die alle overgangen bevat en opslaat als jquery.cycle.js
in een 'js'-map in de hoofdmap van uw project. Voeg vervolgens het volgende toe aan uw
onder de script-tag van de jQuery-bibliotheek.
We maken nu het slideshow.js bestand hierboven vermeld en sla het op in de
'js' directory met de volgende code:
Accentsconagua
$ slideshow = context: false, tabbladen: false, time-out: 1000, // tijd voordat volgende dia verschijnt (in ms) slideSpeed: 1000, // tijd die nodig is om in elke dia (in ms) te schuiven tabSpeed: 300, / / tijd die nodig is om in elke dia (in ms) te schuiven bij het klikken door tabbladen fx: 'scrollLeft', // het dia-effect om init: function () // de context te gebruiken om selectors te versnellen / de prestaties te verbeteren .context = $ ('# slideshow'); // tabs instellen voor huidige hardgecodeerde navigatie-items this.tabs = $ ('ul.slides-nav li', this.context); // verwijder hard-gecodeerde navigatie-items van DOM // omdat ze niet zijn gekoppeld aan jQuery-cyclus this.tabs.remove (); // prepare slideshow en jQuery cycle tabs this.prepareSlideshow (); , prepareSlideshow: function () // initialise the jquery cycle plugin - // voor informatie over de opties die hieronder zijn ingesteld ga naar: // http://malsup.com/jquery/cycle/options.html $ ("div. dia's> ul ", $ slideshow.context) .cycle (fx: $ slideshow.fx, timeout: $ slideshow.timeout, speed: $ slideshow.slideSpeed, fastOnEvent: $ slideshow.tabSpeed, pager: $ (" ul.slides -nav ", $ slideshow.context), pagerAnchorBuilder: $ slideshow.prepareTabs, before: $ slideshow.activateTab, pauseOnPagerHover: true, pause: true); , prepareTabs: functie (i, dia) // retourneer markeringen van hardgecodeerde tabbladen voor gebruik als jQuery-tabbladen // (voegt noodzakelijke jQuery-cyclusgebeurtenissen aan tabbladen toe) return $ slideshow.tabs.eq (i); , activateTab: function (currentSlide, nextSlide) // verkrijg de actieve tab var activeTab = $ ('a [href = "#' + nextSlide.id + '"]', $ slideshow.context); // als er een actieve tab is als (activeTab.length) // verwijder actieve styling van alle andere tabbladen $ slideshow.tabs.removeClass ('on'); // voeg actieve styling toe aan actieve knop activeTab.parent (). addClass ('aan'); ; $ (function () // initialiseer de diavoorstelling wanneer de DOM klaar is $ slideshow.init (););
OPMERKING: om deze tutorial kort te houden, zal ik niet alles uitleggen
in dit nieuwe javascript-bestand maar als je vragen hebt, voel je dan vrij
te vragen in de reacties hieronder en ik zal mijn best doen om u te helpen =)
Open uw bijgewerkte diavoorstelling in een browser (zorg ervoor dat er geen # slide- num) is
het einde van uw URL) en wacht ... ziet u het schuiven? ...
Super goed! Nu kunt u op de tabbladen klikken en het een beetje sneller zien verschuiven.
Dus we hebben het aan het werk, maar wat is dit $ Slideshow.activateTab ()
methode die we hebben toegevoegd? Nou, het is niet helemaal noodzakelijk sinds de jQuery-cyclus
plugin voegt al een toe .activeSlide klasse naar de actieve navigatie
link voor jou, maar ik geef graag wat meer controle over mijn navigatie
deze methode voegt gewoon een toe .op klasse aan de ouder
van de actieve link.
Als u dit hebt ingevoerd, kunt u de volgende CSS toevoegen aan het einde van onze
slideshow.css-stylesheet om het actieve tabblad te markeren:
#slideshow .slides-nav li.on, #slideshow .slides-nav li.on a background-color: #eee; #slideshow .slides-nav li.on a position: relative; top: -4px;
Wanneer u een voorbeeld bekijkt, ziet u waarschijnlijk dat het eerste tabblad niet is gemarkeerd
pagina laden ... dit is eenvoudig te repareren ... gebruik gewoon jQuery om een toe te voegen .js
klasse voor de tag zoals hieronder getoond:
$ (functie () // voeg een 'js' klasse toe aan de body $ ('body') addClass ('js') // initialiseer de slideshow wanneer de DOM klaar is $ slideshow.init ();) ; Voeg vervolgens de CSS toe die we zojuist met de nieuwe hebben toegevoegd .js klasse:
.js #slideshow .slides-nav li.on, .js #slideshow .slides-nav li.on a background-color: #eee; .js #slideshow .slides-nav li.on a position: relative; top: -4px;
Dit betekent dat de gemarkeerde knoppen alleen worden opgemaakt als de gebruiker javascript heeft
ingeschakeld en dan coderen we het .op klasse voor het eerste tabblad in
de navigatie van de diavoorstelling:
... en voila! Probeer JavaScript uit te schakelen / in te schakelen en vernieuw de
diavoorstelling om te controleren of alles nog werkt en we zijn klaar!
