, image galleri med skik mellemstore billeder (bonus jquery stik af),,,,, andel,,,,,,,, 14,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, som jeg lovede i foregående artikel, her er læren om at skabe et galleri i skik store billeder.som en bonus. du skal lære at skabe en grundlæggende jquery stik af at forelægge den større mellemstore billede af virksomhed beskrevet på en bedre måde. hvis du ikke læste mine tidligere artikel om skik image størrelser, læs det, så det bliver lettere at forstå denne forelæsning.,,, trin 1 afgørelse om image størrelse afhængigt af deres emne er indretning, og hvad forsyningsnettet, den anvender, så kan de beslutte anderledes billede størrelser for thumbnails., før der træffes beslutning om, hvor mange billeder, du vil have, at i træk, hvad er bredden af beholderen, hvor thumbnails vises, marginer, paddings osv. jeg vil bruge en 940 pixels bredde, 2 kolonne layout (8 /4 - forholdet) som et eksempel, hvor indholdet vil blive 620 pixels og de tager 300 dpi med 20 pixel venstre margen.indholdet område og tager område vil have indvendig polstring af 20 pixels.nu lidt matematik: indhold er 620px bredt med polstring af 20px, forlader 580px for thumbnails; og med 5 thumbnails pr. linje, hver med en margen på 10px, så de er ikke sammen; 5. image i hver linje ikke har en margen, thumbnails vil blive 108px bredde og højde, og kort. de større mellemstore billede vil være højst 660px bred og 660px høj, vil de blive ændret tilsvarende uden at dukke. du kan vælge, hvad størrelse passer til din indretning, hvis du beslutter at ændre størrelser de let kan blive genskabt (se tidligere om, hvordan det skal gøres, og de behøver ikke at være kvadratisk.,, trin 2, om oprettelse af den skik størrelser, redigere, functions.php, fil, så det ligner det, add_action ('after_setup_theme "," "'); funktion setup() (//...add_theme_support ("post - thumbnails'); add_image_size (" forpremiere, 108, 108, sande); //virksomhed beskrevet add_image_size ("er" 660, 600); //lang //...}, , Step 3 Generate Thumbnail List, Excluding the Image Set as Featured,Still in ,functions.php, add the method ,generate_thumbnail_list,:, function generate_thumbnail_list( $post_id = null ) { \tif ( $post_id == null ) return; \t$images = get_posts( \t\tarray( \t\t\t'numberposts' => -1, \t\t\t'post_type' => 'attachment', \t\t\t'post_mime_type' => 'image/jpeg, image/jpg, image/png, image/gif', \t\t\t'post_parent' => $post_id, \t\t\t'orderby' => 'menu_order', \t\t\t'order' => 'ASC', \t\t\t'exclude' => get_post_thumbnail_id( $post_id ) \t\t) \t); \tif ( count( $images ) > 0 ) { \t\techo '<ul class="gallery">'; \t\tforeach ( $images as $image ) { \t\t\t$src = wp_get_attachment_image_src($image->ID, 'zoomed'); \t\t\techo '<li> < en href = ".$src [0]. "" > ".wp_get_attachment_image ($image - > id "forpremiere").< /a > < /li > "} echo '< /ul > « echo' < div klasse =" klar "> < /div > «) i, content-single.php, ring til, generate_thumbnail_list, metode, at post - id som et parameter, <?folkesundhedsprogrammet aspektet the_content();?> < h3 > billeder < /h3 > <?folkesundhedsprogrammet aspektet generate_thumbnail_list (get_the_id())?> de ovenfor, vil produktionen en unordered liste indeholder links til de store filer og virksomhed beskrevet billeder.,, trin 4 - galleriet, er det klart, at de thumbnails skal være i aften, ellers er det bare en almindelig liste af billeder.der tilføjes følgende til deres eksisterende stylesheet eller skabe nye og enqueue:,. klart {klart: begge}. galleri (liste stil type: ingen; polstring: 0; margen: 0}. galleri li {flyde: venstre margen: 0 10px 10px 0}. galleri li: 117. barn (0) (margen: 0}. galleri en {flyde: venstre markør: point; tekst): ingen.}. galleri img {flyde: venstre; grænse: 0}, vil det sætte billeder ved siden af hinanden, så lidt plads omkring dem, på dette punkt at klikke. om virksomhed beskrevet vil åbne store billede på en tom side.det er et godt alternativ i tilfælde javascript er handicappede.,, løntrin 5 åbne billeder med en jquery image galleri, stil er image galleri, før skrive javascript ville det være ønskeligt, at de ved, hvordan det store billede vises.her er, hvad jeg havde i tankerne:,, note: alt dette vil blive genereret fra det jquery stik af.det er bare for at vise skabelsesproces. en gennemsigtig overlay til alt indhold, med det billede, i midten og kontrol på det øverste højre hjørne.mens billedet er - vil der være en spinner viser.i roden af dokumentet organ et dæksblad div vil blive tilføjet, der skal indeholde links til sejlads til den næste og sidste, et link til tæt på tilhørerpladserne, og indpakning omkring billedet, hvor image vil blive indlæst.This is the minimal HTML code that will be used for the gallery., <div id="zoom"> \t<a href="#next" class="next">Next</a> \t<a href="#previous" class="previous">Previous</a> \t<div class="close"></div> \t<div class="content"></div> </div>,Adding the following style will style the above elements as in the image above (comments are included to explain parts that may not be immediately obvious):, #zoom { \tz-index: 99990; /* high index so it stays on top of all other elements */ \tposition: fixed; /* is fixed so if content is scrolled this stays in the same place */ \ttop: 0; \tleft: 0; \twidth: 100%; \theight: 100%; \t/* creates a transparent background, so the content under it wjeg er synlige, gennemsigtighed kan tilpasses * /baggrund: rgba (0, 0 0, 0, 8)}&#zoom. indhold (z-index: 99991; /* højere indeks, så billedet bliver på toppen af "overlay" * /stilling: absolut; /* starter første placering: vil blive centreret vandret, og vertikalt * /top: 50% tilbage: 50%; bredde: 200px. højde: 200px; margen: - 100px 0 0 - 100px; /* end positionering * /* en animeret spinner som baggrund vil være synlige, mens billedet er lastning * /baggrund:&#ffffff url ("... /img /spinner. gif) nr. gentager, 50% 50% grænse: 20px fast&#ececec; polstring: 0}&#zoom img (display: blok; max bredde: ingen; baggrund:&#ececec; - moz rubrik skygge: 2px 2px 5px rgba (0, 0 0, 0, 3); - webkit æske 2px skygge.2px 5px rgba(0, 0, 0, 0.3); \tbox-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); } #zoom .close { \tz-index: 99993; /* higher index so the close will stay above the overlay and image */ \tposition: absolute; \ttop: 0; \tright: 0; \twidth: 49px; \theight: 49px; \tcursor: pointer; \tbackground: transparent url('../img/icons/close.png') no-repeat 50% 50%; \topacity: 1; \tfilter: alpha(opacity=100); } #zoom .previous, #zoom .next { \tz-index: 99992; /* higher index so the close will stay above the overlay and image */ \tposition: absolute; \ttop: 0; \toverflow: hidden; \tdisplay: block; \twidth: 49px; \theight: 49px; \ttext-indent: 100%; } #zoom .previous { \tright: 100px; \tbackground: url('../img/icons/arrows.png') no-repeat 0 0; } #zoom .næste {ret: 50px; baggrund: url ("... /img /ikoner /pile. men heller ikke dér er menneskene sikre") nr. gentager, 100% 0}&#zoom. tæt på den baggrund: (farve:&#da4f49; /* tilføjer en rød farve på svæv * /}&#zoom. tidligere: den,&#zoom. næste - svæv {baggrund farve:Xcc; /* tilføjer en blå farve på svæv * /}, resultatet af ovennævnte:,, så javascripthttp: //kode ovenfor, ikke vil være nødvendige, det vil følge med javascript.begivenheder vil være knyttet til åbning, navigation og lukning af galleriet.Navigating and closing the gallery can be done from the keyboard or using the mouse.,The JavaScript below is also commented to explain what's going on:, (function($) { \t$.zoom = function() { \t\t //append a gallery wrapper to the document body \t\t$('body').append('<div id="zoom"></div>'); \t\tvar zoomedIn = false, //a flag to know if the gallery is open or not \t\t zoom = $('#zoom'), \t\t zoomContent = null, \t\t opened = null; //the opened image element \t\tfunction setup() { \t\t\tzoom.hide(); //hide it \t\t\t//add the inner elements, image wrapper, close and navigation links \t\t\tzoom.prepend('<div class="content"></div>'); \t\t\tzoom.prepend('<div class="close"></div>'); \t\t\tzoom.prepend('<ahref = "# tidligere" klasse = "tidligere" > tidligere < /a >), zoom. prepend (< en href = "# næste klasse =" næste "> næste < /a > '); zoomcontent = $('&#zoom. indhold"); //lægger de begivenheder, tilføjede elementer $('# zoom. tæt på "). ('click, tæt); $('&#zoom. tidligere '). ('click, openprevious); $('&#zoom. næste"). ('click, opennext); //overholde tastatur begivenheder til navigation og lukke galleriet $(nummer). keydown (funktion (ref.) (hvis (!opened) { \t\t\t\t\treturn; \t\t\t\t} \t\t\t\tif (event.which == 27) { \t\t\t\t\t$('#zoom .close').click(); \t\t\t\t\treturn; \t\t\t\t} \t\t\t\tif (event.which == 37) { \t\t\t\t\t$('#zoom .previous').click(); \t\t\t\t\treturn; \t\t\t\t} \t\t\t\tif (event.which == 39) { \t\t\t\t\t$('#zoom .next').click(); \t\t\t\t\treturn; \t\t\t\t} \t\t\t\treturn; \t\t\t}); \t\t\t \t\t\tif ($('.gallery li a').length == 1) { \t\t\t\t//add 'zoom' class for single image so the navigation links will hide \t\t\t\t$('.gallery li a')[0].addClass('zoom'); \t\t\t} \t\t\t//attach click event observer to open the image \t\t\t$('.zoom, .gallery li a').on('click', open); \t\t} \t\t \t\tfunction open(event) { \t\t\tevent.preventDefault(); //prevent opening a blank page with the image \t\t\tvar link = $(this), \t\t\t src = link.attr('href'), //skabe et billede objekt med kilde fra forbindelsen image = $(nye image()). attr ('src, src). hide(); hvis (!src) {} $tilbage. ('# zoom. tidligere,&#zoom. næste'). show(); hvis (link. hasclass ('zoom ')) ($('&#zoom. tidligere,&#zoom. næste '). hide();} //vise galleri med lastning spinner -, navigations - og tæt knapper, hvis!zoomedin) (zoomedin = sandt, zoom. show();} //rydde op og tilføje image genstand for lastning zoomcontent. empty(). prepend (billede); //begivenhed observatør for billede, lastning, render() vil være //ringede, mens image - billede. belastning (de) åbnet = link;} funktion openprevious (tilfælde) {begivenhed. preventdefault(); hvis (åbnet. hasclass ('zoom ')) (tilbage;} var tidligere = åbnet. moderselskab ('li'). prev(); hvis (prev.length = = 0) (tidligere = $(. galleri li: sidste barn)} tidl. børn (»a«). udløser ('click)} funktion opennext (tilfælde) {begivenhed. preventdefault(); hvis (åbnet. hasclass ('zoom ')) (tilbage;} var næste = åbnet. moderselskab ('li'). next(); hvis (bilagt.length = = 0) (næste = $(. galleri li: for det første barn)} næste. børn (»a«). udløser ('click)} funktion render() (//hvis billedet er ikke fuldt lastet gør intet, hvis (!denne. komplet) {tilbage;} var image = $(det); //hvis billede har de samme dimensioner som tilhørerpladserne //vise billedet ikke manipulerer, hvis (billede. width() = = zoomcontent. width() & & image. height() = = zoomcontent. height()) {vise. billede); tilbage;} var borderwidth = parseint (zoomcontent. css ('borderleftwidth ')); //resize galleriet billedet dimensioner før //med billede zoomcontent. manipulerer ((bredde: image. width(), højde: image. height(), margintop: - (billede. height() /2) - borderwidth, marginleft: - (billede. width() /2) - borderwidth}, 300, function() {(se billede);}); funktion (se billede) {image. fadein ('fast');}} funktion nært (tilfælde) {begivenhed. preventdefault(); zoomedin = falske, zoom. hide(); zoomcontent. empty();} setup();}}) (jquery); efter, herunder ovennævnte stik af, sæt det ved at tilføje den stik af ringe ind til, generate_thumbnail_list, metode:, funktion generate_thumbnail_list ($post_id = null) (//...hvis (tæller ($billeder) > 0) (//...echo 's < manuskript type = "tekst /javascript" > jquery. zoom(); < /manuskript > «), f.eks. et eksempel fra det virkelige liv, hvordan det fungerer, og hvordan det kan anvendes: zoom jquery foto galleri stik af demo, referencer,,, get_the_id() get_posts(),,,,,, get_post_thumbnail_id(),,,,, wp_get_attachment_image() wp_get_attachment_image_src(),,,