In plaats van een opgeblazen plug-in te gebruiken die functies bevat die u nooit zult gebruiken, toont deze tutorial u hoe u een supereenvoudige lightbox maakt voor het verwerken van afbeeldingen. Het is perfect voor afbeeldingsgalerijen, portfolio's en meer!

Stap 1: De markup

Open uw favoriete teksteditor (ik gebruik Coda) en laten we beginnen met onze HTML-markup.

Notitie: Als u geen goede DOCTYPE opgeeft en de pagina in quirks-modus rendert, wordt de lightbox niet correct weergegeven in Internet Explorer.

      
 
Super eenvoudige lightbox
 
Onze supereenvoudige lightbox-demo. Hier zijn de afbeeldingslinks: 
 
  Foto 1  
 
  Afbeelding 2  
 
  Afbeelding 3  
 
 
 
   

Notitie: We hebben de klas gebruikt lightbox_trigger op elke link die een afbeelding heeft die we willen laten zien in onze lightbox. Dit wordt handig als we die elementen willen targeten in het script dat we gaan schrijven.

Stap 2: De CSS

Laten we wat basis-CSS-styling toepassen op onze pagina. Voor dit eenvoudige voorbeeld plaatsen we al onze CSS in tags in de sectie.

body marge: 0; padding: 0; background: #efefef; text-align: center; / * gebruikt om div te centreren in IE * / #wrapper width: 600px; marge: 0 auto; / * centreert de div horizontaal in alle browsers (behalve IE) * / background: #fff; text-align: left; / * reset tekstuitlijning van body tag * / border: 1px solid #ccc; border-top: none; padding: 25px; / * Laten we wat CSS3-stijlen toevoegen, deze zullen gracieus verslechteren in oudere browsers en IE * / border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; vakschaduw: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; 

Nu hebben we een eenvoudige maar elegante pagina waarin we ons lightbox-venster kunnen testen.

Stap 3: opmerkingen over CSS in Internet Explorer

We gebruikten marge: 0 auto; om onze #wrapper div horizontaal op de pagina te centreren. Dit werkt uitstekend voor alle browsers behalve ... tromgeroffel ... je raadt het al, Internet Explorer. Om dit probleem te verhelpen, hebben we het gebruikt text-align: center; op de body-tag die child divs (in dit geval de #wrapper div) horizontaal op de pagina centreert.

Echter, met behulp van text-align: center; op de body-tag zal ook alle tekst in child divs worden uitgelijnd. Om dit te verhelpen, stellen we opnieuw in text-align: left; in de #wrapper div om alle verdere onderliggende inhoud te herstellen naar links uitlijnen. Bekijk communitymx.com als je meer wilt weten over dit IE-probleem.

Stap 4: HTML voor lightbox

Dit is hoe onze HTML-markeringen voor lightbox eruit zullen zien. Plaats het echter niet in de HTML-markup. We zullen dat dynamisch doen met jQuery. Als we de HTML-markeringen voor lightbox begrijpen, kunnen we deze op basis van CSS inrichten.

 
Klik om te sluiten
 
  
 

Notitie: Er is geen waarde voor de afbeelding src omdat dat afhankelijk zal zijn van op welke link wordt geklikt door de gebruiker. Daarom zullen we Javascript gebruiken om de waarde later dynamisch in te voegen.

Stap 5: Lightbox CSS Black Overlay

Laten we doorgaan en de CSS invoegen voor onze lightbox. Door dit nu te doen, zullen onze pagina-elementen later correct worden weergegeven wanneer we onze HTML dynamisch invoegen.

Eerst hebben we onze #lightbox div die fungeert als de zwarte overlay. We willen dat dit het gehele kijkvenster van de gebruiker vult, ongeacht de schermresolutie.

#lightbox position: fixed; / * houdt het lightbox-venster in de huidige viewport * / top: 0; left: 0; Breedte: 100%; height: 100%; achtergrond: url (overlay.png) herhalen; text-align: center; 

De CSS is vrij eenvoudig. Hier zijn een paar hoogtepunten:

• position: fixed zorgt ervoor dat onze overlay correct wordt weergegeven in de huidige viewport, ongeacht de positie van de gebruiker op het scherm (boven of onder aan de pagina). Dit is waar het gebruik van de juiste DOCTYPE van pas komt. Als IE in de modus Quirks wordt uitgevoerd vanwege de verkeerde DOCTYPE (of helemaal geen), wordt onze overlay niet correct weergegeven.
• Breedte: 100%; height: 100%; Dit zorgt ervoor dat onze #lightbox div, die als de zwarte overlay fungeert, het gehele venster bedekt, ongeacht de schermresolutie van de eindgebruiker.
• achtergrond: url (overlay.png) herhalen; We hadden RGBa-kleur kunnen gebruiken om onze achtergrondkleur enigszins transparant te maken. Dit zou iets als nodig hebben gemaakt achtergrond: rgba (0,0,0, 7);. Omdat deze eigenschap echter vrij nieuw is, werkt transparantie op de achtergrondkleur niet in IE (tenzij u bepaalde hacks toepast). Dus in plaats van CSS3- en IE-hacks te gebruiken, maken we eenvoudig een PND van 1x1 pixel in photoshop met een zwarte achtergrond en zetten we de transparantie op ongeveer 75 procent.

Stap 6: Lightbox CSS-gebruikersinstructies

Om er zeker van te zijn dat onze gebruikers niet in de war zijn, zullen we wat tekst toevoegen in de lightbox-overlay met de mededeling dat ze ergens kunnen klikken om het lightbox-venster te laten verdwijnen.

#lightbox p text-align: right; color: # fff; margin-right: 20px; font-size: 12px; 

Stap 7: Lightbox CSS-afbeelding

Nu willen we de afbeelding die in de lightbox verschijnt, stylen. Ik ga het gewoon wat CSS3-effecten geven. Deze zullen uiteraard niet verschijnen in IE en oudere browsers, maar het wordt nog steeds gracieus verslechterd. Je kunt hier andere effecten toevoegen als je wilt, zoals een witte rand rond de afbeelding.

#lightbox img vakschaduw: 0 0 25px # 111; -webkit-vak-schaduw: 0 0 25px # 111; -moz-box-shadow: 0 0 25px # 111; max-width: 940px; 

Notitie:Een toevoegen Maximale wijdte krimpt alle afbeeldingen met een hoge resolutie waarnaar we mogelijk linken. Dit helpt ervoor te zorgen dat alle afbeeldingen in de viewport passen.

Dit is hoe onze pagina er nu zou uitzien als we onze lightbox-HTML in het document zouden invoegen (we doen dat met javascript):

Afbeelding met dank aan CSS Lounge Photostream op Flickr

Stap 8: Bepalen van de logica

Als de gebruiker op een koppeling naar de afbeelding klikt, willen we de afbeelding in een lightbox weergeven. Om dit te doen, willen we eerst de logica achter onze functionaliteit bepalen:

• Klikken van gebruikers met klas lightbox_trigger
  • Voorkom dat de browser de link standaard volgt
  • Kijk of het lichtbak div staat al in het document
    • Als het bestaat:
      • Zoek en het bestaande img tag in de inhoud div.
      • Vervang de afbeelding's src waarde met de href waarde van elke link waarop is geklikt.
    • Als het niet bestaat:
      • plaats de lightbox-markup in de pagina met de afbeeldingen src waarde ingesteld op de href waarde van elke link waarop is geklikt
• Laat elke klik op de lightbox (wanneer weergegeven) verdwijnen

Stap 9: Javascript Inclusief jQuery

Nu we onze HTML-markeringen, CSS-styling en JavaScript-logica hebben, is het tijd om ons te verdiepen in de code en onze functionaliteit te laten werken.

Eerst nemen we de jQuery-bibliotheek op. Ik voeg het graag toe vlak voor de afsluiting lichaam tag met behulp van jQuery's gehoste versie.

Stap 10: Javascript Aangepast script

Laten we onze code inpakken script tags en het document.ready van jQuery

We zullen ons aangepaste script toevoegen direct na het opnemen van de jQuery-bibliotheek. We hebben onze jQuery-functie ingesteld met behulp van het dollarteken "$" in de functieparameter, op die manier hoeven we niet "jQuery" te schrijven elke keer dat we jQuery-functionaliteit willen gebruiken. In plaats daarvan kunnen we gewoon "$" gebruiken.

Stap 11: Javascript lightbox_trigger Functie

Zoals eerder in stap 1 is uitgelegd, hebben we voor elke gekoppelde afbeelding die de lightbox zal gebruiken een klasse van toegewezen lightbox_trigger. In ons script creëren we een functie die elke keer dat een link met de klas wordt geactiveerd, wordt geactiveerd lightbox_trigger is geklikt.

$ ('. lightbox_trigger'). klik (functie (e) // Code die de lightbox weergeeft);

Stap 12: Javascript In de functie

Ten eerste willen we de standaardactie voorkomen. Dit voorkomt dat de browser de gekoppelde afbeelding op een nieuwe pagina opent. (Om te zien waarom we gebruiken voorkom standaard() Klik hier

e.preventDefault ();

Vervolgens krijgen we de href van de afbeelding die we in de lightbox weergeven vanaf de link waarop is geklikt

var image_href = $ (this) .attr ("href");

Dit is waar onze vooraf bepaalde logica echt in het spel komt. Omdat we onze lightbox-HTML dynamisch invoegen, willen we eerst zien of deze al in het document bestaat. We zullen dus een if / else-instructie uitvoeren.

Als

Als het lichtbak div bestaat, we zullen de img tag in de inhoud div. We zullen er ook voor zorgen dat het src waarde van de afbeeldingstag is ingesteld om overeen te komen met de href van welke link werd geklikt.

if ($ ('# lightbox'). length> 0) // #lightbox bestaat // invoegen img -tag met href van aangeklikte link als src-waarde $ ('# content'). html (''); // toon lightbox-venster - je kunt hier een overgang gebruiken als je wilt, d.w.z. toon ('snel') $ ('# lightbox'). show (); 

Anders

Als onze lichtbak div kan niet worden gevonden in het document, we zullen het maken en invoegen. Dit wordt alleen uitgevoerd als er voor de eerste keer op een lightbox-link wordt geklikt.

else // # lightbox bestaat niet // maak HTML-markup voor lightbox-venster var lightbox = '
'+'
Klik om te sluiten
'+'
'+ // insert clicked link's href into img src''+'
'+'
'; // voeg lightbox HTML in pagina $ ('body'). append (lightbox); 

Stap 13: Javascript Het lightbox-venster verbergen

Ten slotte willen we het lightbox-venster verbergen wanneer de gebruiker erop klikt. Omdat de div lichtbak wordt ingevoegd nadat de DOM al is opgebouwd (de pagina is al geladen) we moeten jQuery laten weten dat we een nieuwe div op onze pagina plaatsen en op klikken voor deze nieuwe elementen letten. We doen dit door .live () te gebruiken in plaats van .click ()

$ ('# lightbox'). live ('klik', functie () $ ('# lightbox'). hide (););

Stap 14: Javascript-eindcode

Nu we ons lightbox-script hebben bekeken, is hier hoe het geheel eruit ziet:

Eindproduct

Afbeelding met dank aan CSS Lounge Photostream op Flickr

Dat is het! Nu hebt u een lichtgewicht lightbox-oplossing voor het weergeven van afbeeldingen. Ik hoop dat je deze tutorial leuk vond en iets nieuws hebt geleerd! Bedankt voor het lezen.

Premium-opties

Deze tutorial heeft je de doe-het-zelf-aanpak geleerd, maar als je de voorkeur geeft aan een kant-en-klare oplossing, heeft Envato Market veel lightbox-plug-ins beschikbaar. Hier is een selectie van de meest populaire:

1. Lightbox Evolution voor WordPress

Lightbox Evolution is een hulpmiddel voor het weergeven van afbeeldingen, html-inhoud, kaarten en video's in een "lightbox" -stijl die boven de webpagina zweeft. Met behulp van Lightbox Evolution kunnen website-auteurs een breed assortiment aan media presenteren in alle belangrijke browsers zonder gebruikers weg te leiden van de koppelingspagina. Er is ook een jQuery-versie.

Lightbox Evolution voor WordPress

2. iLightBox · Revolutionaire Lightbox-plug-in

Met iLightBox kunt u eenvoudig de mooiste responsieve overlay-vensters maken met behulp van de jQuery JavaScript-bibliotheek. Door ondersteuning te combineren voor een breed scala aan media met prachtige skins en een gebruiksvriendelijke API, wil iLightBox het Lightbox-concept zo ver mogelijk naar voren schuiven.

iLightBox · Revolutionaire lightbox-plug-in

3. PopupPress - Popups met Slider & Lightbox voor WP

PopupPress is een WordPress-plug-in waarmee u eenvoudig elegante overlappende vensters kunt maken. Deze plug-in is bedoeld om elk type inhoud in een pop-up van de snelste en gemakkelijkste manier op elke pagina van WordPress in te voegen. Het heeft ook een eenvoudige systeemstatistiek voor het aantal weergaven van de pop-ups. 

PopupPress - Popups met Slider & Lightbox voor WP