ligetil lightbox med css og jquery,,,, snarere end med en oppustet, stik af, der har træk, du kommer aldrig til at bruge denne forelæsning viser, hvordan man skaber et meget simpelt lightbox for håndtering af billeder.det er perfekt for billede gallerier, porteføljer og mere!,, trin 1: den avance, åbne din favorit tekst redaktør (jeg bruger gang), og lad os begynde med vores html oveni.note:,,,,, hvis du ikke giver et korrekt doctype og side gør i særheder tilstand, lightbox vil ikke vise korrekt i internet explorer.,, <!doctype html > < html > < head > < afsnit > simple lightbox < /afsnit > < /head > < krop > < div id = "papir" > og lt; h1 > ligetil lightbox < /h1 > < p > vores ligetil lightbox demo.her er billedet forbindelser: < ul > < li > < en href = "http://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" klasse = "lightbox_trigger" > billede 1 < /a > < /li > < li > < en href = "http://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" klasse = "lightbox_trigger" > billede 2 < /a > < /li > < li > < en href = "http://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" klasse = "lightbox_trigger" > billede 3 < /en > < /li > < /ul > < /p > < /div > <!-&#/papir - > < /organ > < /html >,,,,,, note: vi har klasse, lightbox_trigger, hver en forbindelse, der er et billede, som vi ønsker at vise vores lightbox.det er nyttigt, når vi ønsker at fokusere på de elementer i det manuskript, vi vil skrive.,, trin 2: css, lad os anvende nogle grundlæggende css - til vores side.For this basic example, we will place all our CSS in ,<style></style>, tags within the ,<head>, section., ,body { \tmargin:0; \tpadding:0; \tbackground:#efefef; \ttext-align:center; /* used to center div in IE */ } #wrapper { \twidth:600px; \tmargin:0 auto; /*centers the div horizontally in all browsers (except IE)*/ \tbackground:#fff; \ttext-align:left; /*resets text alignment from body tag */ \tborder:1px solid #ccc; \tborder-top:none; \tpadding:25px; \t/*Let's add some CSS3 styles, these will degrade gracefully in older browser and IE*/ \tborder-radius:0 0 5px 5px; \t-moz-border-radius:0 0 5px 5px; \t-webkit-border-radius: 0 0 5px 5px; \tbox-shadow:0 0 5px #ccc; \t-moz-box-shadow:0 0 5px #ccc; \t-webkit-box-shadow: 0 0 5px&#ccc.},,,,, men nu har vi en enkel, men elegant side, hvor vi kan afprøve vores lightbox vindue.,, trin 3: sedler på css i internet explorer, brugte vi, margen: 0 auto; at center vores&#indpakning div horisontalt på den side.det virker godt for alle browsere undtagen... trommehvirvel... du har gættet det, internet explorer.for at løse dette problem, vi anvendte, tekst, tilpasse: center; på kroppen - - som barn divs (i dette tilfælde,&#indpakning div) horisontalt på den side. imidlertid ved hjælp af tekst, tilpasse: center; på kroppen, vil center tilpasse alle tekst i divs som barn.at ordne det, vi gør den tekst, tilpasse: venstre; i&#indpakning div til at genoprette alle yderligere barn indhold til venstre tilpasning.tjek communitymx.com, hvis du er interesseret i at lære mere om dette særlige spørgsmål, dvs. lightbox, trin 4: http: //,, det er, hvad vores lightbox html - skal se ud.men sæt ikke det i html oveni.det vil vi gøre dynamisk med jquery.forståelse af lightbox html - gør det muligt for os at stil den med css i overensstemmelse hermed, < div id = "lightbox" > < p > klik på < /p > < div id = "indhold" > < img src = "#" /> < /div > < /div >,,, bemærk: er der ingen værdi for det image, src, fordi det vil være afhængig af, hvor forbindelsen er slået af brugeren.derfor vil vi bruge javascript at indsætte den værdi, dynamisk senere.,, løntrin 5: lightbox css sorte overlay, lad os gå videre og indsæt css for vores lightbox.ved at gøre det nu, vores side elementer vil udvise korrekt senere, når vi dynamisk indsætte vores html.,, har vi vores&#lightbox div., der fungerer som den sorte overlap.vi ønsker, at dette skal brugeren hele viewport, uanset skærmopløsning.,,&#lightbox {holdning: faste; /* holder lightbox vindue i den nuværende viewport * /top: 0; tilbage: 0; bredde: 100%, højde: 100%; baggrund: url (overlap. men heller ikke dér er menneskene sikre gentager, tekst, tilpasse: center;},,,,,, css er ret ligetil.her er højdepunkterne:,,, holdning: faste, gør vores overlay anføres korrekt i den nuværende viewport, uanset brugerens position på skærmen (øverst eller nederst på siden).det er, hvor brugen af den ret doctype kommer belejligt.hvis han løber i særheder tilstand på grund af den forkerte doctype (eller ingen), så vores overlay ikke synes rigtigt.,, bredde: 100%, højde: 100%, det er vores&#lightbox div., der fungerer som sort "overlay", dækker hele viewport uanset slutbrugeren er skærm beslutning.,, baggrund: url (overlap. men heller ikke dér er menneskene sikre gentager, kunne vi have brugt rgba farve for at gøre vores baggrund farve lidt gennemsigtig.det ville have krævet noget som baggrund: rgba (0,0,0,. 7).men da denne ejendom er forholdsvis nyt, baggrund farve gennemsigtighed vil ikke arbejde i irland (medmindre du anvende visse mænd).så i stedet for at bruge css3 og er dem, vi vil blot skabe en 1x1 pixel - men heller ikke dér er menneskene sikre i photoshop, med en sort baggrund og gennemsigtighed på ca. 75%.,,, trin 6: lightbox css brugsvejledning, blot for at sikre, at brugerne er ikke forvirret, vil vi tilføje en tekst i lightbox overlay - at erklære, at de kan nogen steder at have lightbox klik vindue forsvinde.,,&#lightbox p {tekst tilpasse: ret; farve:&#fff; margen: 20px; skriftstørrelsen: 12px;}, trin 7: lightbox css image, nu vil vi stil det image, som vil blive offentliggjort i den lightbox.jeg vil blot give nogle css3 virkninger.disse åbenbart ikke anføres i ie og ældre - browsere, men det nedbryder yndefuldt.du kan tilføje andre virkninger her, hvis du vil, som en hvid ramme omkring image.,,&#lightbox img {æske skygge: 0 0 25pxo - webkit rubrik skygge: 0 0 25pxo - moz rubrik skygge: 0 0 25pxo max bredde: 940px;}, note:, at max bredde, vil reducere alle højtopløseligt billeder, vi kan være mellem til.dette hjælper med til at sikre, at alle billeder passer ind i viewport.,, det er, hvad vores side ville se ud, hvis vi, som vores lightbox html i det dokument, vi skal gøre det med javascript):,,, image takket være css lounge photostream på flickr, trin 8: bestemmelse af logik, hvis brugeren klik et link til billede, vi vil se billedet i en lightbox.for at gøre det, vi vil først fastslå logikken bag vores funktioner:,,, bruger klik forbindelse med klasse, lightbox_trigger, forhindre browser fra efter forbindelse ved misligholdelse,,, - - for at se, om det, lightbox, div er allerede inde i dokument, hvis det eksisterer:,, finde og de eksisterende img - mærke i, indhold,.,, erstatte det image, src, værdi med, href, værdien af enhver forbindelse mellem var sammen.,,,,,,, hvis det ikke findes:,, før lightbox avance til side med det image, src, værdi, der er fastsat til, href, værdien af enhver forbindelse mellem blev slået,,,,,,,, tillade, at et klik på lightbox (når det vises) for at få dem til at forsvinde,,, trin 9: javascript, herunder jquery, nu, hvor vi har vores htmlavancen, css stil, og javascript logik, det er tid til at grave i kodeksen og få vores funktioner., først vi medtager de jquery bibliotek.jeg gerne tilføje, at det lige før den sidste, et organ, et af jquery er vært for version.,, < manuskript src = "http: //kode. jquery. kom /jquery-1.6.2. min.js" > < /manuskript >,, trin 10: javascript skik manus, - tag vores kode i manuskriptet, mærker og jquery er document.ready, vil vi inddrage vores skik skrift lige efter, herunder jquery bibliotek.vi har vores jquery funktion ved hjælp af dollartegn "$" i funktion parameter, så behøver vi ikke at skrive "jquery", hver gang vi skal bruge jquery funktionalitet.vi kan bare bruge "$".,, < manuskript > jquery (dokument). klar (funktion ($) (//vores manuskript vil gå her}). < /manuskript >,, trin 11: javascript, lightbox_trigger, funktion, som nævnt i trin 1, for hver tilknyttet image, der vil bruge lightbox, vi gav den en klasse, lightbox_trigger,.i vores manuskript, skaber vi en funktion, der brænder, hver gang et link til den klasse, lightbox_trigger er sammen.,, $(". lightbox_trigger). klik (funktion (e) (//kode, der gør det lightbox anføres}), trin 12: javascript i funktion, vi ønsker at undgå, at den manglende handling.dette forhindrer browser og åbningen af knyttet billede i en ny side.(se, hvorfor bruger vi, preventdefault(), klik her, f. preventdefault();,, vi får, href, af det billede, som vi vil se i lightbox fra forbindelsen var det klik, var image_href = $(det). attr ("href"), er det, hvor vores forudbestemte logik, virkelig kommer til at spille en rolle.vi sætter vores lightbox html dynamisk, vi vil først se, om det allerede findes i dokumentet.så løber vi en hvis /anden erklæring, hvis, hvis, lightbox, div. eksisterer, vil vi erstatte, img, tag i, indhold. vi vil også sikre, at værdien af det billede, src, tag er sat til at matche, href, uanset forbindelse sammen.,, hvis ($('# lightbox). længde > 0) (//&#lightbox findes //stik img - tagfat med klikkede link er href som src værdien $('&#indhold "). http: //(< img src =" + image_href + "/> '); //vise lightbox vindue - - kan du bruge en overgang her, hvis du vil, dvs. (se'fast) $('&#lightbox '). show();},,,,, hvis vores, lightbox, div., findes ikke i det dokument, vi vil skabe det og sæt det.dette vil kun op første gang, en lightbox forbindelse sammen.,, andet (//&#lightbox ikke findes //skabe html tillæg for lightbox vindue var lightbox = < div id = "lightbox" > + < p > klik på < /p > + < div id = "indhold" > + //stik klikkede link er href i img src (< img src = "+ image_href +" /> + < /div > » + « - < /div > '; //stik lightbox html til side $('body). både (lightbox)}, trin 13: javascript skjuler de lightbox vindue, og endelig ønsker vi at skjule lightbox vindue, når brugeren klik på det.fordi div., lightbox, indsættes efter den dom, er allerede bygget (side har allerede lagt. vi er nødt til at fortælle jquery, at vi lægger en ny div på vores side og se til klik på det nye elementer.vi gør dette ved at bruge. live() snarere end. click(), $('# lightbox). bor ('click, function() {$('&#lightbox '). hide().}), punkt 14: javascript endelige kode, nu hvor vi har gennemgået vores lightbox manuskript, her er, hvad det ligner:,, < manuskript > jquery (dokument). klar (funktion ($) {$(". lightbox_trigger). klik (funktion (e) (//undgå misligholdelse aktion (link), f. preventdefault(); //få klik forbindelse href var image_href = $(). attr (" href ") /*, hvis lightbox vindue html allerede findes i dokument, ændre img src til at matche de href uanset sammenhæng var sammen, hvis lightbox vindue html ikke findes, skaber det og sæt den.\t\t(This will only happen the first time around) \t\t*/ \t\t \t\tif ($('#lightbox').length > 0) { //#lightbox exists \t\t\t \t\t\t//place href as img src value \t\t\t$('#content').html('<img src="' + image_href + '" />'); \t\t \t \t\t\t//show lightbox window - you could use .show('fast') for a transition \t\t\t$('#lightbox').show(); \t\t} \t\t \t\telse { //#lightbox does not exist - create and insert (runs 1st time only) \t\t\t \t\t\t//create HTML markup for lightbox window \t\t\tvar lightbox = \t\t\t'<div id="lightbox">' + \t\t\t\t'<p>Click to close</p>' + \t\t\t\t'<div id="content">' + //insert clicked link's href into img src \t\t\t\t\t'<img src="' + image_href +'" />' + \t\t\t\t'</div>' +\t \t\t\t'</div>'; \t\t\t\t \t\t\t//insert lightbox html til side $('body). både (lightbox)}}); //klik på den side, for at slippe af med lightbox vindue $('# lightbox). bor ('click, function() (//skal bruge levende, som lightbox element er indsat i dom $('&#lightbox '). hide().})}). < /manuskript >, det endelige produkt,,,,,, image takket være css lounge photostream på flickr,,,,,, det er det!nu har du en let lightbox løsning for at vise billeder.jeg håber, du nød det pædagogiske og lærte noget nyt!tak fordi du læste.
