JavaScript-bibliotheken, zoals MooTools, kunnen veel tijd besparen bij het ontwikkelen van een site. In deze zelfstudie laat ik je zien hoe je veel van MooTools's functies kunt combineren om een ​​mooie fotogalerij te maken.

Stap 1 - Stel uw HTML, CSS en MooTools in

Bekijk voordat je begint de demo. Het doel van elke stap zal gemakkelijker te begrijpen zijn als u het doel kent.

Maak eerst een eenvoudig HTML-bestand en voeg een link toe naar het stylesheet (main.css) en naar twee JavaScript-bestanden (mootools.js en main.js). Maak deze bestanden in dezelfde map. Ga dan naar de MooTools Core Builder. Selecteer alle componenten en klik vervolgens op Downloaden. Hiermee download je mootools-1.2-core.js. Kopieer de inhoud van dat bestand naar het bestand mootools.js. Vervolgens ging u naar de MooTools More Builder en selecteer alle componenten en klik op Downloaden. Kopieer de inhoud opnieuw en plak deze aan de onderkant van mootools.js.

(Opmerking: de meeste sites, inclusief deze fotogalerie, hebben niet alle componenten nodig, maar als u ze allemaal in het begin gebruikt en vervolgens de onderdelen verwijdert die u niet nodig hebt, wordt het ontwikkelen een stuk eenvoudiger. in het midden van een project en besefte dat je wilde dat een andere feature werd opgenomen in een van de componenten die je niet downloadde, je zou het opnieuw moeten downloaden voordat je verder gaat. Op deze manier hoef je het alleen opnieuw te downloaden nadat je klaar bent.)

Stap 2 - Creëer de lay-out

Nu moeten we de lay-out voor onze fotogalerij maken met HTML en CSS. Voeg de volgende code toe aan de body-tags van uw HTML-bestand.

 
Fotogallerij
 
 
      
 
 
 
Omhoog scrollen
 
Naar beneden scrollen
 
 
 
Links
 
Rechts
 
 

Hiermee wordt een container gemaakt die alle code op de site omringt, een titel, een gedeelte voor afbeeldingen en bedieningselementen voor de site. Waarom alle lege img-tags? In de onderstaande CSS geven we ze de grootte en een andere achtergrondkleur, zodat we de galerij kunnen testen zonder echte afbeeldingen toe te voegen en de grootte ervan te wijzigen. Nu voegen we de CSS toe aan het main.css-bestand.

* marge: 0; padding: 0; schetsen: none;  .hide display: none;  body background: # 000; color: # fff; padding: 30px; font-family: Arial, Helvetica, sans-serif;  #container width: 596px; Hoogte: 400px; achtergrond: # 111; overloop verborgen; rand: 1px vast # 333;  h1 background: # 222; width: 592px; hoogte: 29px; padding-left: 7px; border-bottom: 1px solid # 333; font-size: 18px; line-height: 29px; font-weight: normal;  #picture_section opvulling: 7px 0 7px 7px; width: 590px; Hoogte: 332px; overloop verborgen;  #inside width: 590px; Hoogte: 332px;  #picture_section img border: 0; hoogte: 57px; width: 111px; float: left; achtergrond: # 333; margin-bottom: 7px; margin-right: 7px; cursor: wijzer;  #controls_vert background: # 222; width: 600px; hoogte: 23px; border-top: 1px solid # 333;  #controls_horz background: # 222; width: 600px; hoogte: 23px; border-top: 1px solid # 333;  #up height: 10px; width: 10px; margin-right: 7px; achtergrond: url (up.jpg) geen herhaling; text-indent: -9999px; float: left; margin: 7px; margin-bottom: 6px; cursor: wijzer;  #down height: 10px; width: 10px; achtergrond: url (down.jpg) geen herhaling; text-indent: -9999px; float: left; margin: 7px; margin-left: 0; margin-bottom: 6px; cursor: wijzer;  #left height: 10px; width: 10px; achtergrond: url (left.jpg) geen herhaling; text-indent: -9999px; float: left; margin: 7px; margin-bottom: 6px; cursor: wijzer;  #rechts height: 10px; width: 10px; achtergrond: url (right.jpg) geen herhaling; text-indent: -9999px; float: left; margin: 7px; margin-left: 0; margin-bottom: 6px; cursor: wijzer;  div # up.deactivated opacity: 0.2; Filter: alfa (opaciteit = 20); cursor: standaard;  div # down.deactivated opacity: 0.2; Filter: alfa (opaciteit = 20); cursor: standaard;  div # right.deactivated opacity: 0.2; Filter: alfa (opaciteit = 20); cursor: standaard;  div # left.deactivated opacity: 0.2; Filter: alfa (opaciteit = 20); cursor: standaard; 

Hier is hoe het eruit ziet met dat toegepast.

Omdat de galerij bovenaan begint, wordt de pijl-omhoog automatisch uitgeschakeld. De linker- en rechterpijlen worden ook automatisch verborgen, omdat ze alleen worden weergegeven wanneer het grote beeld wordt opgeblazen. Ook worden alleen de toppen van de afbeeldingen in de zesde rij getoond, om de gebruiker te laten weten dat er meer hieronder zijn.

Laten we nu de overlay toevoegen die de grote afbeeldingen laat zien. Voeg eerst de volgende code toe vlak voor de afsluitende body-tag in uw HTML-bestand.

 
Klik op de afbeelding om terug te gaan naar de galerij.
 
een

Voeg het volgende toe aan het einde van uw CSS-bestand om de div's als overlay over de miniaturen te laten verschijnen.

#display_picture_container position: absolute; top: 0; left: 0; width: 700px; Hoogte: 400px; padding-top: 16px;  #display_picture positie: absoluut; top: 61px; left: 31px; width: 596px; Hoogte: 330px; achtergrond: # 000; opaciteit: 0,8; Filter: alfa (opaciteit = 80); text-align: center; font-size: 11px; padding-top: 16px;  #display_picture_img position: absolute; top: 108px; left: 65px; Hoogte: 272px; width: 530px; cursor: wijzer; 

Dat creëert dit effect:

De grote afbeelding zou verschijnen waar de (nu onzichtbare) display_picture_img div is (klik op de afbeelding om terug te gaan naar de galerietekst).

Stap 3 - Verzamel en verander uw afbeeldingen

Dit is een goed moment om al je foto's te verzamelen en ze te verkleinen. Maak eerst een map "afbeeldingen" en een map "duimen". Voeg al je foto's toe aan de afbeeldingenmap en noem ze 1.jpg, 2.jpg, 3.jpg, etc. Pas ze allemaal aan op het formaat van de display_picture_img div: 530 pixels breed en 272 pixels hoog. Kopieer die bestanden vervolgens naar de map Duimen en verklein die kopieën in 111 pixels breed en 57 pixels hoog. Het maakt niet uit hoeveel foto's je hebt. Ik raad echter aan om meer dan 26 te gebruiken voor deze tutorial, zodat u verticaal scrollen kunt gebruiken.

Stap 4 - Voeg functionaliteit toe met MooTools

Het eerste wat u moet doen, is alle verwijderen tags in het HTML-bestand. Dat waren alleen tijdelijke aanduidingen; we zullen de daadwerkelijke bestanden later met JavaScript toevoegen. Nu zullen we de overlay laten verdwijnen wanneer de pagina wordt geladen. Voeg de volgende code toe aan het bestand main.js

var number_of_pictures = 32; functie show_pictures () var while_pictures = 1; while (while_pictures <= number_of_pictures)  var new_image = new Element('img',  'src': 'thumbs/' + while_pictures + '.jpg', 'id': 'image_' + while_pictures, 'events':  'click': function() $('display_picture_img').innerHTML = ""; $ ('display_picture_container'). fade (1); $ ('big_picture'). fade (.999999); $ ('controls_vert'). setStyle ('display', 'none'); if (this.id .replace ('image _', ') == 1) $ (' left '). set (' class ',' gedeactiveerd '); . $ ( 'Rechts') wist ( 'klasse');  else if (this.id.replace ('image _', ') == number_of_pictures) $ (' left '). wis (' class '); $ (' right '). set (' class ',' gedeactiveerd '); else $ (' left '). set (' class ',' activated '); $ (' right '). wis (' class '); $ (' controls_horz '). setStyle (' display ',' block '); $ (' left '). tween (' margin-left ',' 286px ');); new_image.inject ($ (' inside ')); // preload alle van de images var preload_image = nieuw Element ('img', 'src': 'pictures /' + while_pictures + '.jpg', 'class': 'hide'); preload_image.inject ($ ('container')); // OPMERKING: ik heb geen alt-attribuut gemaakt omdat iedereen het hier toch niet ziet. While_pictures ++; window.addEvent ('domready', function () show_pictures (); $ ('display_picture_container') .fade ('hide'););

Hier is hoe het eruit ziet:

Laten we, om dit uit te leggen, onderaan beginnen. In MooTools voert de code window.addEvent de code naar binnen wanneer de DOM gereed is om elementen weer te geven. De $ ('display_picture_container'). Fade ('hide'); verbergt de display_picture_container div en de volledige inhoud. Ik heb de fade ('hide') methode gebruikt omdat we het later zullen laten vervagen. We maken geen display: geen; verklaring in ons CSS-bestand of JavaScript op die manier verbergen; het moet worden verborgen door de functie die we gaan gebruiken om het later opnieuw te laten zien (vervagen).

Nu voor het grootste deel: de functie show_pictures. Allereerst stellen we de variabele number_ofpictures in. Dit vertelt de functie om miniaturen toe te voegen vanuit de map Duimen met elk geheel getal van 1 tot het opgegeven aantal. Als u meer afbeeldingen aan deze diavoorstelling wilt toevoegen, hoeft u ze alleen aan de mappen toe te voegen, de grootte ervan te wijzigen en de waarde number_of_pictures te vergroten. Ik heb 32 gebruikt.

Het volgende deel is de interne werking van show_pictures. Dit toont, zoals de naam al doet vermoeden, alle afbeeldingen. Het preload ook de grotere foto's op de achtergrond. Binnen de functie is while_pictures gedefinieerd als 1. Dit is de variabele die we gebruiken als startpunt voor het weergeven van alle afbeeldingen. De volgende while-instructie laat zien dat de code binnen één keer wordt uitgevoerd voor elke foto, beginnend bij één en gaat omhoog naar het totale aantal foto's (aantal_foto's). Merk op dat while_pictures ++; bevindt zich aan het einde van de while-lus, zodat deze elke keer dat de lus wordt herhaald met één wordt verhoogd.

Vervolgens maken we een elementinstantie voor een img-element. We kunnen src, id, class, event en andere attributen toevoegen. We hebben echter alleen src, id en gebeurtenissen nodig. Door 'src': 'thumbs /' + while_pictures + '.jpg' te gebruiken, geven we aan dat we willen dat de bron van de afbeelding gelijk is aan het huidige huidige nummer en binnen de map met de duimen. De ID's voor al onze miniaturen zijn afbeelding_1, afbeelding_2, enzovoort.

Nu willen we dat er een grote afbeelding wordt weergegeven nadat op een miniatuur is geklikt, dus we maken een klikgebeurtenis. De eerste regel daaronder maakt de display_picture_img divi de grote afbeelding met een id van big_picture en een klasse van de id van de thumbnail (image_1, image_2, etc.). Onthoud dat op dit moment de display_picture_img div verborgen is.

Gebruik nu de .fade (1) methode om de display_picture_container div en alle inhoud ervan in te faden. De 1 staat voor het dekkingsniveau (1 is 100%, .5 is 50%, etc.). Dit veroorzaakt echter een bug in alle, behalve de nieuwste browsers zoals Firefox 3 en Safari. Ze vervagen correct, maar de anderen duiken gewoon in het beeld en vervagen het donkere gebied eromheen. Na veel experimenten, kwam ik erachter dat als je de grote afbeelding (die big_picture als zijn id heeft) fade-in met zijn eigen fade-methode, het werkt - maar alleen als de fade niet op 1 staat. We willen echter de foto om op 100% dekking te zijn. Daarom heb ik dit ingesteld op .999999, zonder zichtbare transparantie.

Dus nu staat de grote afbeelding op het scherm. We willen echter ook dat de bedieningselementen naar het midden gaan en de linker- en rechterpijlen worden in plaats van de pijlen omhoog en omlaag. Allereerst verbergen we de verticale bedieningselementen (controls_vert). We kunnen weergave gebruiken: geen; hiervoor, omdat we niet gaan vervagen in of uit. Vervolgens gebruiken we een if, if else en else-instructie om te bepalen of de afbeelding waarop werd geklikt de eerste of de laatste was in onze galerij. Als het de eerste was, willen we niet dat het naar links kan gaan, omdat er geen vorige bestaat. Hetzelfde is aan de rechterkant noodzakelijk. Later, wanneer we de linker en rechter pijlen gebruiken, zullen we detecteren of het een gedeactiveerde klasse heeft. Dit zal bepalen of de klikgebeurtenis ervoor zal werken. (Kijk ook eens naar de CSS.) Hiermee stelt u de afbeelding in op 20%, zodat u geen 8 richtingspijlen hoeft te plaatsen in plaats van 4.)

Vervolgens geven we de horizontale bedieningselementen weer door de weergavestijl in te stellen om te blokkeren. Dus door de verticale bedieningselementen te verbergen en de horizontale bedieningselementen weer te geven, hebben we ze zojuist uitgeschakeld. We willen echter dat de horizontale besturingselementen gecentreerd zijn. Ik heb dit bereikt door een tween te maken die een toename in de linkermarge animeert naar 286px, wat het midden van de galerij is.

Nu we ons new_image hebben gemaakt, moeten we het in het document plaatsen. Met de injectiemethode kunnen we het nieuw gemaakte img-element in de interne div invoegen.

We willen ook elk van de afbeeldingen vooraf laden, dus er zal geen vertraging optreden wanneer mensen daadwerkelijk op de afbeeldingen klikken om ze in te faden. We maken een nieuw img-element voor elke afbeelding die op ware grootte is. Het gebruikt echter de hide-klasse, die in onze CSS display gebruikt: none; om de inhoud te verbergen. Vervolgens injecteren we de verborgen preloaderafbeelding in de container-div.

Hier is hoe het eruit ziet nadat u op een miniatuur klikt:

Nu moeten we de foto laten verdwijnen als we erop klikken. Voeg de volgende code toe na de $ ('display_picture_container'). Fade ('hide'); verklaring in main.js.

$ ('display_picture_img'). addEvent ('klik', functie () $ ('display_picture_container'). fade (0); $ ('big_picture'). fade (0); $ ('up'). setStyle ( 'margin-left', '286px'); $ ('controls_horz'). setStyle ('display', 'none'); $ ('controls_vert'). setStyle ('display', 'block'); $ (' left '). setStyle (' margin-left ',' 7px '); $ (' up '). tween (' margin-left ',' 7px '););

Hiermee wordt een klikgebeurtenis aan de div met de grote afbeelding toegevoegd. Wanneer erop wordt geklikt, vervaagt de container tot niets, en vanwege de bovengenoemde bug is de afbeelding zelf ook vervaagd tot 0. Vervolgens stellen we de verborgen div in om dezelfde hogere marge links te hebben als de linker div. Vervolgens schakelen we de horizontale bedieningselementen onmiddellijk terug naar de verticale besturingselementen en vervolgens, nadat we de linker weg terug naar de oorspronkelijke linkermarge hebben ingesteld, animeren we de linkermarge van de pijl omhoog naar de oorspronkelijke 7px met een andere tween. Nu kunt u op miniaturen klikken om ze op te blazen en vervolgens op de grote afbeelding klikken om deze weer te verbergen. Bijna klaar!

Neem nu de volgende code en plak deze boven de code die u zojuist hebt ingevoerd.

var vertical_moves = 0; var rows = Math.ceil (number_of_pictures / 5); if (rijen> 5) $ ('up'). addEvent ('klik', functie (gebeurtenis) if (! $ ('up'). hasClass ('gedeactiveerd')) vertical_moves--; $ (' down '). wis (' class '); $ (' inside '). tween (' margin-top ',' - '+ (64 * vertical_moves) +' px '); if (vertical_moves == 0) $ ('up'). set ('class', 'gedeactiveerd');); $ ('down'). addEvent ('klik', functie (event) if (! $ ('down'). hasClass ('gedeactiveerd')) vertical_moves ++; $ ('up'). wis ('klasse') ); $ ('binnen'). tween ('margin-top', '-' + (64 * vertical_moves) + 'px'); if (vertical_moves == (rijen-5)) $ ('down') .set ('class', 'gedeactiveerd'););  else $ ('up'). set ('class', 'gedeactiveerd'); $ ('down'). set ('class', 'gedeactiveerd');  var current_id = 1; $ ('left'). addEvent ('klik', functie () if (! $ ('left'). hasClass ('gedeactiveerd')) current_id = $ ('big_picture'). get ('class') .replace ('image_', '); current_id--; $ (' big_picture '). fade (' hide '); $ (' big_picture '). set (' src ',' pictures / '+ current_id +'. jpg '); $ (' big_picture '). fade (1); $ (' big_picture '). set (' class ',' image_ '+ current_id); if (current_id == 1) $ (' left ') .set ('class', 'gedeactiveerd'); if (current_id == (number_of_pictures-1)) $ ('right'). wis ('class');); $ ('right') .addEvent ('klik', functie () if (! $ ('right'). hasClass ('gedeactiveerd')) current_id = $ ('big_picture'). get ('class'). replace ('image_' , "); current_id ++; $ ('big_picture'). fade ('hide'); $ ('big_picture'). set ('src', 'pictures /' + current_id + '.jpg'); $ ('big_picture ') .fade (1); $ (' big_picture '). set (' class ',' image_ '+ current_id); if (current_id == 2) $ (' left '). wis (' class ');  if (current_id == number_of_pictures) $ ('right'). set ('class', 'gedeactiveerd'););

Het eerste wat we zullen doen, is verticaal scrollen. Allereerst zullen we een variabele maken met de naam vertical_moves met een waarde van 0. Dit zal ons vertellen hoeveel rijen het naar beneden is verplaatst. Dan komen we te weten hoeveel rijen afbeeldingen we hebben, met 5 afbeeldingen op een rij. De functie Math.ceil rond elk getal met een decimaal naar een geheel getal. Ik heb bijvoorbeeld 32 afbeeldingen. 32 gedeeld door 5 is 6.4, die zou eindigen op 6. We willen echter nog steeds dat de extra foto's worden getoond; Hoewel er slechts twee afbeeldingen op de laatste rij staan, willen we dat het als een hele rij telt. Aangezien Math.ceil alles rond maakt, wordt het aantal rijen 7.

Vervolgens detecteren we of er meer dan vijf rijen zijn. Als dat niet het geval is, deactiveren we de pijlen omhoog en omlaag. Met vijf rijen of minder worden alle afbeeldingen getoond zonder de schuifknoppen. Als er echter zes of meer zijn, willen we er evenementen aan toevoegen. Voor de pijl naar boven div, voegen we een gebeurtenis toe en dan detecteren of het is gemarkeerd als gedeactiveerd of niet. Als het is gedeactiveerd, wordt het weergegeven met een dekking van slechts 20% en als u hierop klikt, doet het niets. Bovendien zal het geen aanwijzer als cursor meer hebben. Als het die klasse echter niet heeft, gaat het verder. Als je omhoog gaat, neemt het aantal rijen af ​​dat je bent weggegaan, dus neemt vertical_moves met één rij af. Het wist dan elke klasse die de down-div heeft. Als het zich in de onderste rij bevindt en de pijl-omlaag gedeactiveerd is, kan het, als het eenmaal een rij omhoog is gegaan, weer naar beneden gaan. Daarom wordt het niet gedeactiveerd.

Vervolgens worden alle miniaturen omhoog verplaatst door te detecteren wat de nieuwe vertical_moves is, vermenigvuldig dit met 64 en maak het negatief. Het getal 64 wordt gebruikt omdat dat de hoogte is van een rij miniaturen plus de marge eronder. Vervolgens wordt deze waarde toegepast op de marge. Als de marge-top bijvoorbeeld oorspronkelijk -128 px was, zou deze omhoog gaan omdat de nieuwe margin-top slechts -64 px zou zijn. De tween-methode maakt het vervagen naar zijn nieuwe positie. In het bestand main.css heeft de afbeelding_sectie div de overloop verborgen. Dit is zo dat wanneer je een negatieve marge toevoegt, deze deze verbergt in plaats van er doorheen steekt. Vervolgens wordt bepaald of deze bovenaan de galerij staat. Als dit het geval is, wordt de pijl omhoog gedeactiveerd zodat deze niet verder kan gaan. Op de pijl-omlaag worden dezelfde acties toegepast, behalve in omgekeerde volgorde.

Nu zullen we de linker en rechter knoppen correct laten werken. Allereerst stellen we current_id gelijk aan één om de variabele te maken. Dit helpt ons te bepalen welk groot beeld wordt weergegeven (onthoud dat de linker- en rechterknoppen alleen verschijnen wanneer een grote afbeelding wordt weergegeven). Vervolgens voegen we een klikgebeurtenis toe aan de linker div en controleren of deze gedeactiveerd is of niet. Als dat niet het geval is, detecteren we de klasse van de img met de id van het grote beeld. Dit werd eerder als afbeelding_ ingesteld (voer hier het nummer van de huidige afbeelding in). We gebruiken de methode get om dit te vinden en de methode replace om het prefix van image_ te verwijderen. Vervolgens trekken we het met één af, omdat we door naar links te gaan teruggaan naar een foto met een id van één minder.

Vervolgens verbergen we de afbeelding zelf en veranderen we de bron naar de vorige afbeelding. Vervolgens vervagen we de afbeelding tot 100% dekking. Daarna veranderen we de klasse van de afbeelding in zijn nieuwe waarde, die een gebruiker in staat stelt om herhaaldelijk links te gaan. We detecteren dan of het bij de allereerste foto is. Als dat zo is, kunnen we niet meer links gaan, dus we deactiveren de linkerknop. Als dit de een na laatste afbeelding is nadat er links is geklikt, betekent dit dat deze zich net op de laatste foto bevond, waar de rechterknop zou worden uitgeschakeld. Als dat het geval is, schakelen we de rechterknop in zodat ze verder kunnen gaan. Bijna de identieke acties worden toegepast op de rechterknop, behalve, nogmaals, in omgekeerde volgorde.

Stap 4 - Testen en optimalisatie

Dat is het zo ongeveer. De grote afbeelding verdwijnt wanneer u op een miniatuur klikt, u kunt naar links en rechts gaan, teruggaan naar de hoofdgalerij door op de grote afbeelding te klikken en omhoog en omlaag te bladeren. Maar wacht! Na ontwikkeling in een goede browser zoals Firefox, moet u het testen in andere populaire browsers zoals Safari, IE6 en IE7. Ik heb ze allemaal getest en ze werkten allemaal, behalve dan -verrassing! -Internet Explorer 6. Als je op een afbeelding klikt en de horizontale bedieningselementen naar buiten schuiven, vallen ze veel te ver weg in IE6. Om wat voor reden dan ook, denkt IE6 dat wat elke andere browser denkt dat 286px is, slechts 143px is. Dus verander de volgende code:

$ ('left'). tween ('margin-left', '286px');

Hiernaar:

if (Browser.Engine.trident4) $ ('left'). tween ('margin-left', '143px');  else $ ('left'). tween ('margin-left', '286px'); 

Browser.Engine.trident4 geeft true als de browser IE6 is. Anders wordt false geretourneerd en wordt de originele code uitgevoerd. En de volgende code:

$ ('up'). setStyle ('margin-left', '286px');

Hiernaar:

if (Browser.Engine.trident4) $ ('up'). setStyle ('margin-left', '143px');  else $ ('up'). setStyle ('margin-left', '286px'); 

Nu werkt het op alle browsers. Op dit punt kunt u ook naar de MooTools-site gaan en alleen de componenten selecteren die u hebt gebruikt. Hoewel mootools.js, main.js, main.css en het HTML-bestand samen minder dan 100 kb gebruiken, kunt u altijd de grootte verkleinen om de ervaring voor gebruikers met een tragere internetverbinding te optimaliseren. Ik heb de hele MooTools-bibliotheek echter in de broncode voor dit achtergelaten, dus mensen die dingen in de galerij willen wijzigen, kunnen alle componenten gebruiken.

.