Një galeri funksionale në PHP dhe jQuery. Galeria funksionale në PHP dhe jQuery Inurl fotogaleria ID e fotove të epokës së mesme
Galeria në internet dhe ndajnë me miqtë dhe familjen. Disa shërbime në internet janë të mira dhe të përshtatshme. Por nëse doni ta prisni atë në domenin tuaj dhe t'i kontrolloni ato vetë, ka edhe shumë skenarë të disponueshëm. Zakonisht, ne duam që skenari të jetë i thjeshtë për t’u përdorur dhe i lehtë për t’u vendosur pa kërkuar ndonjë bazë të dhënash... Në këtë post, unë prezantoj 2 skenarë PHP.
Galeria e një skedari të vetëm PHP
Galeria Single File PHP nga Kenny Svalgaard
Galeria Single File PHP është një galeri fotografish e shkruar në PHP. Ka vetëm një skedar të vetëm PHP. Fotografitë e fotografive dhe drejtorive gjenerohen automatikisht. Galeria Single File PHP nuk kërkon ndonjë konfigurim ose aftësi për t'u përdorur ose baza të të dhënave. E tëra çfarë ju duhet të bëni është të kopjoni skenarin në direktori që përmban fotot tuaja për të bërë një galeri. Dhe automatikisht organizon nën drejtoritë si nën galeri.
Shkarkoni: http://www.phpgraphy.org/index.php
Demo: http://www.ericzma.com/photo/index.php (galeria ime e vjetër e fotove me temë të personalizuar)
phpGraphy është një skenar falas i galerisë së fotove PHP i shkruar me thjeshtësi dhe efikasitet në mendje duke ndjekur filozofinë KISS. Isshtë lëshuar nën licencën GPL. Toshtë e lehtë për tu instaluar dhe ka kërkesa minimale. phpGraphy integron një mori karakteristikash të këndshme si komentet, vlerësimet, trajtimi EXIF \u200b\u200b/ IPTC. Megjithëse phpGraphy mund të konfigurohet për të përdorur bazat e të dhënave, ju gjithashtu mund të zgjidhni të përdorni skedarë për ruajtjen e informacionit për të. Zhvillimi duket i ngrirë për disa vjet. Por tiparet aktuale duhet të gjenden për një galeri personale fotografish.
Rreth kodit
Galeria gjashtëkëndësh
Galeria vetëm gjashtëkëndësh CSS.
Të përgjegjshëm: jo
Varësitë: -
Rreth kodit
Galeria e muraturave
Galeria e muraturave të përgjegjshme të CSS Grid.
Shfletuesit e pajtueshëm: Chrome, Firefox, Opera, Safari
Të përgjegjshëm: po
Varësitë: -
Rreth kodit
Galeria e përgjegjshme e pastër CSS
Lodhur të shkruani JavaScript? A e keni shkruar pjesën e duhur të ngjarjeve të jQuery onclick? Mos e humbni shpresën! Për ju mund të bëni një galeri të përgjegjshme vetëm në HTML dhe CSS. E vetmja gjë që ju nevojitet janë disa etiketa dhe disa CSS ekzotike. Argëtohuni!
Të përgjegjshëm: po
Varësitë: -
Rreth kodit
Galeri
Galeri murature me efekt rrotullimi.
Shfletuesit e pajtueshëm: Chrome, Firefox, Opera, Safari
Të përgjegjshëm: po
Varësitë: -
Rreth kodit
Rrjeti i përgjegjshëm i galerisë së fotove me Lightbox - Pa skript
Galeria e përgjegjshme e fotove e azhurnuar me efektet e kutisë së dritës. Shfrytëzoni CSS Grid & Flexbox dhe pa skript. Përdorimi i pronës së synuar.
Shfletuesit e pajtueshëm: Chrome, Edge, Firefox, Opera, Safari
Të përgjegjshëm: po
Varësitë: -
Rreth kodit
Thjeshtësia
Galeri e thjeshtë në HTML, CSS dhe JS.
Shfletuesit e pajtueshëm: Chrome, Firefox, Opera, Safari
Të përgjegjshëm: po
Varësitë: -
Rreth kodit
Galeria e produkteve
Një faqe minimale e vetme e produktit e ndërtuar me CSS Flexbox dhe vanilje JavaScript.
Shfletuesit e pajtueshëm: Chrome, Edge, Firefox, Opera, Safari
Të përgjegjshëm: po
Varësitë: 12 kolona.scss, onicons.css
Rreth kodit
Rrëshqitës horizontal në Rrjetin e Galerisë
Rrjeti i plotë i përgjegjshëm me UX të mrekullueshëm celular duke përdorur një pyetje mediatike dhe dy linja kodi.
Shfletuesit e pajtueshëm: Chrome, Edge, Firefox, Opera, Safari
Të përgjegjshëm: po
Varësitë: -
Rreth kodit
Galeria e stinëve
Galeria e pastër e imazheve CSS.
Shfletuesit e pajtueshëm: Chrome, Firefox, Opera, Safari
Të përgjegjshëm: po
Varësitë: -
Rreth kodit
Galeria Pop-up / Mbivendosje
Ky është një dizajn i mbivendosur i popup-it për portofolin tuaj! Shfaqni projektet / punën tuaj në detaje me një klikim të një butoni.
Shfletuesit e pajtueshëm: Chrome, Edge, Firefox, Opera, Safari
Të përgjegjshëm: jo
Varësitë: -
Rreth kodit
Galeria e imazheve
Galeri imazhesh paralaksi duke përdorur figurën & fig.
Shfletuesit e pajtueshëm: Chrome, Edge, Firefox, Opera, Safari
Të përgjegjshëm: po
Varësitë: relaksohuni.js
Rreth kodit
Galeri imazhesh e bërë me rrjetin flexbox dhe CSS.
Rreth kodit
Fotogrid / fotoset Tumblr me kutinë përkulëse në vend të JavaScript.
Rreth kodit
Këtu është një nga një galeri imazhesh ku zgjidhni imgun që dëshironi të shfaqet në qendër. Paraqitja bëhet e mundur me rrjetin CSS. Kur kaloni në një pikëpamje më të vogël ju do të merrni një përvojë tjetër që bëhet e mundur duke ndryshuar kolonat e shabllonit të rrjetit dhe rreshtat e modelit të rrjetit.
Rreth kodit
Galeri e këndshme e përgjegjshme me: kolona CSS, rrokullisje, titull rri pezull, skenar madhështor i dritares, zmadhim në fuqi.
Rreth kodit
Animacion i galerisë së imazheve me HTML, CSS dhe JS.
Rreth kodit
Galeria e lëvizjes dhe rishikimit. Vanilje HTML / CSS / JS. Ngjarje pa prekje.
Rreth kodit
Shihni galerinë duke klikuar në dritare.
Rreth kodit
Klikoni në butonin e informacionit në këndin e poshtëm të djathtë. 😼 Vetëm WebKit sepse shfletuesit e tjerë kanë mbështetje të dobët për përdorimin e calc () në vend të çdo gjëje tjetër përveç vlerave të gjatësisë.
Galeria e portofolit HTML, CSS dhe JavaScript.
Bërë nga Tanmoy Biswas
14 Shkurt 2017
Galeri imazhesh me zmadhim.
Bërë nga wunnle
3 Shkurt 2017
Kubi rrotullohet galeria 3D e transformimit.
Krijuar nga Lorina Gousi
30 Janar 2017
Rreth kodit
Galeria rri pezull efekt dhe galeri u zgjerua.
Photobox është evolucioni, gjenerata tjetër e kodit galeri UI & UX.
Bërë nga Yair Edhe Or
4 janar 2017
Galeri udhëtimesh me animacione / tranzicione flexbox dhe CSS.
Krijuar nga Sean Free
2 janar 2017
Një galeri që zbulon tre panele ndërsa përdoruesi lëviz.
Bërë nga Teegan Lincoln
1 janar 2017
Eksperimenti i murit të galerisë fotografike reflektuese HTML, CSS dhe JavaScript.
Bërë nga Shawn Reisner
21 Tetor 2016
Galeri e tranzicionit për katër imazhe.
Bërë nga Dudley Storey
14 tetor 2016
Ka 24 fotografi 1920x1080 brenda, kështu që mund të duhen një sekondë për t'u shkarkuar. Duket mirë sidoqoftë. Mos ngurroni të luani me ndryshoret (kohët e tranzicionit dhe vonesat). Mund të ndryshoni numrin e fotografive. Thjesht ndryshoni variablat në scss dhe js. Gjithashtu, nëse doni të shtoni fotografi të reja, thjesht shtoni url-në e fotografisë në grupin js.
Bërë nga Kirill Kiyutin
9 shtator 2016
Këtu është një galeri e këndshme e imazheve lëvizëse 3D të animuara, e zbatuar, duke përdorur shtojcën e regjistrimit të faqes së Pete Rojwongsuriya.
Krijuar nga Sebastian Schepis
19 qershor 2014
Një shtrirje e lehtë e fushës së personalizuar të përparuar (ACF) që shton Foto Galeria fushë për çdo postim / faqe në faqen tuaj të internetit WordPress.
- Vizualisht krijoni Fushat tuaja
- Shtoni fotografi të shumta dhe gjithashtu mund të modifikoni titullin, titullin dhe lidhjen me çdo gjë
- Caktoni fushat tuaja në faqe të shumta të redaktimit (përmes rregullave të vendndodhjes së personalizuar)
- Ngarko me lehtësi të dhënat përmes një API-je të thjeshtë dhe miqësore
- Përdor llojin vendas të postimit të personalizuar WordPress për lehtësinë e përdorimit dhe përpunimin e shpejtë
- Përdor meta të dhënat vendase WordPress për lehtësinë e përdorimit dhe përpunimin e shpejtë
shënim
Kjo shtojcë është alternative e ACF Gallery Pro. Ju duhet të keni njohuri për kodimin sepse do t'ju kërkohet të redaktoni kodin tuaj burimor të temës WordPress. Nëse po kërkoni kode të shkurtra dhe galeri të parandërtuar, atëherë kjo shtojcë është JO për ty. Kjo shtojcë do t'ju japë një varg imazhesh PHP dhe do t'ju duhet të bëni paraqitjen e galerisë siç dëshironi.
Kam nevojë për ndihmë?
Keni nevojë për ndihmë për instalimin, konfigurimin dhe krijimin e paraqitjes së galerisë? Shërbimin tim mund ta blini në Fiverr.com duke ndjekur lidhjen https://www.fiverr.com/share/2KAjR8
Përdorimi
acf_photo_gallery është një funksion ndihmës që merr përsipër ACF_FIELD_NAME dhe POST_ID do të kërkojë bazën e të dhënave dhe do të përpilojë imazhet për ju. Dalja e këtij funksioni do të jetë një grup.
Galeria e Acf_photo (ACF_FIELD_NAME, POST_ID);
Shembull
Shembulli i mëposhtëm po përdor kornizën Twitter Bootstrap për paraqitjen. Ju mund të përdorni çdo kornizë të zgjedhur nga ju.
ID); // Kontrolloni nëse koleksioni i kthimit ka ndonjë gjë nëse (numëroni ($ imazhe)): // Ftohtë, kemi disa të dhëna, kështu që tani le të rrethojmë atë ($ images as $ image): $ id \u003d $ image [ "id"]; // Identifikimi i bashkëngjitur i medias $ title \u003d $ image ["title"]; // Titulli $ caption \u003d $ image ["caption"]; // Titulli $ full_image_url \u003d $ image [" full_image_url "]; // url me madhësi të plotë $ full_image_url \u003d acf_photo_gallery_resize_image ($ full_image_url, 262, 160); // Madhësia e ridimensionuar në gjerësi 262px nga 160px lartësi e imazhit url $ thumbnail_image_url \u003d $ image [" thumbnail_image_urge]; madhësia e imazhit url 150px nga 150px $ url \u003d $ image ["url"]; // Shko çdo lidhje kur klikohet $ target \u003d $ image ["target"]; // Hap skedën normale ose të re $ alt \u003d get_field ("photo_gallery_alt ", $ id); // Merrni alt që është një fushë shtesë (Shikoni më poshtë si të shtoni fusha shtesë) $ class \u003d get_field (" photo_gallery_class ", $ id); // Merrni klasën që është një fushë shtesë (Shih më poshtë si të shtoni fusha shtesë)?\u003e
"alt \u003d" (! GJUH:" title="!}">
Shto fusha shtesë
Për të shtuar fusha shtesë shtoni sa vijon në skedarin temat tuaja features.php.
// Krijoni fusha shtesë të quajtura funksion Alternativ Teksti dhe Klasa e Zakonshme my_extra_gallery_fields ($ args, $ attachment_id, $ field) ($ args ["alt"] \u003d array ("type" \u003d\u003e "text", "label" \u003d\u003e "Altnative) Teksti "," name "\u003d\u003e" alt "," value "\u003d\u003e get_field (fusha $." _Alt ", $ attachment_id)); // Krijon fushën e tekstit alternativ $ args [" class "] \u003d array (" type " \u003d\u003e "teksti", "etiketa" \u003d\u003e "Klasa e personalizuar", "emri" \u003d\u003e "klasa", "vlera" \u003d\u003e get_field (fusha $. "_class", $ attachment_id)); ktheje $ args;) add_filter ("acf_photo_gallery_image_fields", "my_extra_gallery_fields_space", 10, 3);
Si të merrni vlerat e fushave shtesë
Ju mund të përdorni funksionin ndihmës të ACF get_field
Get_field ("foto_gallery_alt", $ id); get_field ("klasa e fotove_galerisë", $ id);
Tërhiq titullin nga fusha e titullit bashkëngjitje
Si parazgjedhje, titra po tërhiqet nga fusha e përshkrimit. Shtoni filtrin e mëposhtëm në funksionin tuaj.php për të tërhequr titullin nga fusha e titullit të bashkëngjitjes.
Shto_filtër ("acf_photo_gallery_caption_from_atachment", "__return_true");
API I PUSHIMIT
Dërgoni Kërkesë HTTP në URL për të marrë përgjigjen JSON të të gjitha postimeve
Http: // (domain) / wp-json / wp / v2 / (POST_TYPE) /
Dërgoni kërkesën HTTP në URL për të marrë përgjigjen JSON të postit specifik
Http: // (domain) / wp-json / wp / v2 / (POST_TYPE) / (POST_ID) /
Kur të merrni përgjigjen, shihni artikullin ACF i cili përmban emrin e galerisë së fotove ACF dhe grupin e imazheve.
Përputhshmëria
Ky lloj i fushës ACF është i pajtueshëm me:
* ACF 4
* ACF 5
Çështjet
Ashtu si çdo shtojcë tjetër WordPress, kjo shtojcë gjithashtu mund të shkaktojë probleme me tema dhe shtojca të tjera. Nëse po përballeni me probleme që e bëjnë këtë shtojcë të funksionojë në faqen tuaj WordPress, ju lutemi kërkoni ndihmë në forumin e mbështetjes. Në këtë mënyrë ne mund t'ju ndihmojmë të parandaloni që kjo çështje të ndodhë me dikë tjetër. Nëse dëshironi të flisni me mua drejtpërdrejt, mund të më kontaktoni përmes faqes time në internet http://www.navz.me/
Instalimi
- Kopjoni dosjen navz-photo-gallery në dosjen tuaj wp-content / plugins
- Aktivizoni fushat e përparuara të personalizuara: Shtojca e Galerisë së fotove përmes faqes së administratorit të shtojcave
- Krijoni një fushë të re përmes ACF dhe zgjidhni llojin e Galerisë së Fotove
- Ju lutemi referojuni përshkrimit për më shumë informacion në lidhje me cilësimet e llojit të fushës
Regjistri i ndryshimeve
1.6.5=
* Hiqni kushtet jo të zbrazëta nga artikulli i kutisë së zgjedhjes gjatë ndryshimit
* Hiqni mbështetjen për shtojcën ACF to REST API
* Mbështetje vendase për REST API
1.6.4=
* Gabim JavaScript në tastierë kur hiqni imazhe nga metabolika e WordPress
1.6.3=
* Mbështetje për ACF 5
* Redaktoni galerinë me modelin vendas të integruar ose WordPress. Faleminderit Github @makepost
* Përmirësimet e kapakut të bazës së kodit
* Mbështetje për RESTFul API me shtojcën ACF to REST API
1.6.2=
* Mbani të dhënat të sinkronizuara me të dhënat e bashkëngjitjes
* Tërhiqni titullin bashkëngjitje të titullit duke përdorur filtra shtesë
* Gabim në numërimin e PHP 7.2 ()
1.6.1=
* Kutia e editimit të imazhit zhduket me klikimin e butonit të ndryshimit të lapsit të raportuar nga @ rickytoof9
1.6.0=
* Gabim në ruajtjen e postimit me galerinë bosh. Patch-i siguruar nga @ugy
* Shfaqja e fushave të shumta të galerisë së fotove në të njëjtën faqe të raportuara nga @ rickytoof9
* Mbështetje për srcset. Faleminderit të veçantë për @ugy për kodin
1.5.0
- Mbështetje për SVG
- Mbështetje për versionin e trashëguar PHP
- Shtoni fusha shtesë
1.4.0
- Mund të klasifikojmë imazhe të galerisë
- Fiksoi porosinë për të ndjekur renditjen për imazhet e galerisë
1.3.0
- Ndryshoni meta_key nga acf field_key në acf field_name
- Funksioni ndihmës acf_photo_gallery () për të tërhequr imazhe
- Funksioni ndihmës acf_photo_gallery_resize_image për të ridimensionuar imazhin në fluturim dhe për ta ruajtur atë
- Problem me parametrin e synuar në konfigurim
- Problem me url nuk kursen si duhet
1.2.0
- Mbështetje për WordPress 4.6
- Disa ndryshime në ekran
- Merrni të dhënat nga baza e të dhënave
1.1.0
- Indeksi i padefinuar: acf-foto-galeri-fushë në skedar acf-photo_gallery-v4
- Kur fshini fotot nga galeria, fotografia e fundit nuk po fshihej
- Fotografitë e galerisë nuk po ruanin në bazën e të dhënave