Despre cod

Galeria Hexagon

Galerie CSS numai hexagonală.

Reactiv: nu

Dependente: -

Despre cod

Galeria Zidăriei

Galeria de zidărie CSS Grid receptivă.

Browsere compatibile: Chrome, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

Galerie pură CSS Responsive

V-ați săturat să scrieți JavaScript? Ți-ai scris partea echitabilă de evenimente jQuery onclick? Nu dispera! Pentru că puteți face o galerie receptivă doar în HTML și CSS. Tot ce ai nevoie sunt niște etichete și niște CSS exotice. a se distra!

Reactiv: da

Dependente: -

Despre cod

Galerie

Galerie de zidărie cu efect de scroll.

Browsere compatibile: Chrome, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

Grilă de galerie foto receptivă cu Lightbox - Fără script

Galerie foto receptivă actualizată cu efecte lightbox. Utilizați CSS Grid și Flexbox și fără script. folosind proprietatea țintă.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

Simplitate

Galerie simplă în HTML, CSS și JS.

Browsere compatibile: Chrome, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

galerie de produse

O singură pagină de produs minimă construită cu CSS Flexboxși JavaScript vanilie.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependențe: 12columns.scss, onicons.css

Despre cod

Glisor orizontal către grila galeriei

Grilă receptivă completă cu UX mobil minunat, folosind o interogare media și două linii de cod.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

Galeria anotimpurilor

Galerie de imagini CSS pur.

Browsere compatibile: Chrome, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

Galeria pop-up/suprapunere

Acesta este un design pop-up suprapus pentru portofoliul dvs.! Afișați-vă proiectele/lucrarea în detaliu printr-un clic pe un buton.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: nu

Dependente: -

Despre cod

Galerie de imagini

Galeria de imagini Parallax folosind figure & figcaption .

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependențe: relax.js

Despre cod

Galerie de imagini realizată cu flexbox și grilă CSS.

Despre cod

Fotogrilă/fotoset Tumblr cu casetă flexibilă în loc de JavaScript.

Despre cod

Iată una dintr-o galerie de imagini în care selectați imaginea care doriți să fie afișată în centru. Aspectul este posibil cu grila CSS . Când treceți la o fereastră de vizualizare mai mică, veți obține o experiență diferită care este posibilă prin modificarea coloanele-șablon-grilă și rândurile-șablon-grilă .

Despre cod

Frumoasă galerie receptivă cu: coloane CSS, rotire, subtitrări cu cursorul, script pop-up magnific, efect de mărire.

Despre cod

Animație galerie de imagini cu HTML, CSS și JS.

Despre cod

Galerie de derulare și buclă. Vanilla HTML/CSS/JS. Evenimente fără atingere.

Despre cod

Vedeți galeria făcând clic pe ferestre.

Despre cod

Faceți clic pe butonul de informații din dreapta-jos colţ. 😼 Numai pentru WebKit, deoarece alte browsere au un suport slab pentru utilizarea calc() în locul oricăror altceva decât valorile lungimii.

Galerie de portofoliu HTML, CSS și JavaScript.
Fabricat de Tanmoy Biswas
14 februarie 2017

Galerie de imagini cu zoom.
Fabricat de wunnle
3 februarie 2017

Galeria de transformări 3D cu rotire cub.
Realizat de Lorina Gousi
30 ianuarie 2017

Despre cod

Efectul de trecere cu mouse-ul în galerie și galeria extinsă.

Photobox este evoluția, următoarea generație de cod UI și UX pentru galerie.
Realizat de Yair Even Or
4 ianuarie 2017

Galerie de călătorie cu animații/tranziții flexbox și CSS.
Realizat de Sean Free
2 ianuarie 2017

O galerie care dezvăluie trei panouri pe măsură ce utilizatorul derulează.
Fabricat de Teegan Lincoln
1 ianuarie 2017

Experimentul de perete al galeriei foto reflectorizante HTML, CSS și JavaScript.
Realizat de Shawn Reisner
21 octombrie 2016

Galeria de tranziție pentru patru imagini.
Fabricat de Dudley Storey
14 octombrie 2016

Are 24 de imagini 1920x1080 în interior, deci poate dura o secundă pentru a descărca. Arata misto totusi. Simțiți-vă liber să vă jucați cu variabile (timpi de tranziție și întârzieri). Puteți modifica numărul de imagini. Doar schimbați variabilele în scss și js. De asemenea, dacă doriți să adăugați imagini noi, trebuie doar să adăugați adresa URL a imaginii în matricea js.
Realizat de Kirill Kiyutin
9 septembrie 2016

Iată o galerie de imagini 3D cu derulare înclinată, implementată folosind pluginul jquery.tilted-pagescroll al lui Pete Rojwongsuriya.
Realizat de Sebastian Schepis
19 iunie 2014

O extensie ușoară a câmpului personalizat avansat (ACF) care adaugă Galerie foto câmp la orice postare/pagini de pe site-ul dvs. WordPress.

• Creați vizual câmpurile dvs
• Adăugați mai multe fotografii și puteți modifica, de asemenea, titlul, legenda și linkul către orice
• Atribuiți câmpurile la mai multe pagini de editare (prin reguli personalizate de locație)
• Încărcați ușor datele printr-un API simplu și prietenos
• Utilizează tipul de postare personalizat WordPress nativ pentru ușurință în utilizare și procesare rapidă
• Folosește metadatele native WordPress pentru ușurință în utilizare și procesare rapidă

Notă

Acest plugin este o alternativă la ACF Gallery Pro. Trebuie să aveți cunoștințe de codare, deoarece vi se va solicita să editați codul sursă al temei WordPress. Dacă căutați coduri scurte și galerie preconstruită, atunci acest plugin este NU Pentru dumneavoastră. Acest plugin vă va oferi o serie PHP de imagini și va trebui să faceți aspectul galeriei după cum doriți.

Nevoie de ajutor?

Aveți nevoie de ajutor cu instalarea, configurarea și crearea aspectului galeriei? Puteți achiziționa serviciul meu de pe Fiverr.com urmând linkul https://www.fiverr.com/share/2KAjR8

Utilizare

acf_photo_gallery este o funcție de ajutor care preia ACF_FIELD_NAMEși POST_ID va interoga baza de date și va compila imaginile pentru dvs. Ieșirea acestei funcții va fi o matrice.

Acf_photo_gallery(ACF_FIELD_NAME, POST_ID);

exemplu

Următorul exemplu utilizează cadrul Twitter Bootstrap pentru aranjare. Puteți folosi orice cadru la alegere.

ID); //Verificați dacă matricea returnată are ceva în ea if(count($images)): //Cool, avem câteva date, așa că acum să trecem peste el foreach($imagini ca $imagine): $id = $image[ "id"]; // ID-ul atașamentului media $title = $image["title"]; //Titlul $caption= $image["caption"]; //Detitrarea $full_image_url= $image[" full_image_url"]; //Adresă URL a imaginii de dimensiune completă $full_image_url = acf_photo_gallery_resize_image($full_image_url, 262, 160); //Dimensiune redimensionată la 262px lățime cu 160px înălțime URL a imaginii $thumbnail_image_url/$thumbnail_image_url=$image_url/Get_"thumbnail_image_url; dimensiunea miniaturii URL a imaginii 150px pe 150px $url= $image["url"]; //Mergeți la orice link când faceți clic pe $target= $image["target"]; //Deschideți fila normală sau nouă $alt = get_field("photo_gallery_alt ", $id); //Obțineți alt, care este un câmp suplimentar (vezi mai jos cum să adăugați câmpuri suplimentare) $class = get_field ("photo_gallery_class", $id); //Obțineți clasa care este un câmp suplimentar (vezi mai jos cum să adăugați câmpuri suplimentare) ?>

Adăugați câmpuri suplimentare

Pentru a adăuga câmpuri suplimentare, adăugați următoarele în fișierul teme functions.php.

//Creează câmpuri suplimentare numite Altnative Text și Custom Classess funcția my_extra_gallery_fields($args, $attachment_id, $field)( $args["alt"] = array("type" => "text", "label" => "Altnative Text", "name" => "alt", "value" => get_field($field . "_alt", $attachment_id)); // creează un câmp text alternativ $args["class"] = array("type" => „text”, „label” => „Class personalizat”, „nume” => „clasă”, „valoare” => get_field($field . „_class”, $attachment_id)); // Creează un câmp personalizat Classess return $args; ) add_filter("acf_photo_gallery_image_fields", "my_extra_gallery_fields", 10, 3);

Cum să obțineți valorile câmpurilor suplimentare

Puteți utiliza funcția de ajutor ACF get_field

Get_field("foto_galerie_alt", $id); get_field("clasa_galerie_foto", $id);

Extrageți legendă din câmpul legendă al atașamentului

În mod implicit, legenda este extrasă din câmpul de descriere. Adăugați următorul filtru la function.php dvs. pentru a extrage legenda din câmpul de subtitrare al atașamentului.

Add_filter("acf_photo_gallery_caption_from_attachment", "__return_true");

API-ul REST

Trimiteți cererea HTTP la adresa URL pentru a obține răspunsul JSON la toate postările

http://(domeniu)/wp-json/wp/v2/(POST_TYPE)/

Trimiteți cererea HTTP la adresa URL pentru a obține răspunsul JSON la o anumită postare

http://(domeniu)/wp-json/wp/v2/(POST_TYPE)/(POST_ID)/

Când primiți răspunsul, vedeți articolul ACF care conține numele galeriei foto ACF și o serie de imagini.

Compatibilitate

Acest tip de câmp ACF este compatibil cu:
*ACF4
*ACF5

Probleme

La fel ca orice alt plugin WordPress, acest plugin poate cauza probleme și cu alte teme și pluginuri. Dacă întâmpinați probleme pentru ca acest plugin să funcționeze pe site-ul dvs. WordPress, vă rugăm să cereți ajutor pe forumul de asistență. În acest fel, vă putem ajuta și prevenim ca această problemă să se întâmple altcuiva. Dacă doriți să vorbiți direct cu mine, mă puteți contacta prin intermediul site-ului meu http://www.navz.me/

Instalare

1. Copiați folderul navz-photo-gallery în folderul wp-content/plugins
2. Activați pluginul Câmpuri personalizate avansate: Galerie foto prin intermediul paginii de administrare a pluginurilor
3. Creați un câmp nou prin ACF și selectați tipul Galerie foto
4. Vă rugăm să consultați descrierea pentru mai multe informații despre setările tipului de câmp

jurnalul de modificări

1.6.5=
* Eliminați condiția care nu este goală din elementul casetei de selectare la editare
* Eliminați suportul pentru pluginul ACF to REST API
* Suport nativ pentru API-ul REST

1.6.4=
* Eroare JavaScript în consolă la eliminarea imaginilor din metaboxul WordPress

1.6.3=
* Suport pentru ACF5
* Editați galeria cu modelul nativ încorporat sau WordPress. Mulțumim lui Github @makepost
* Sub capota îmbunătățiri ale bazei de cod
* Suport pentru RESTFul API cu pluginul ACF to REST API

1.6.2=
* Păstrați datele sincronizate cu datele atașate
* Trageți legendă atașată subtitrare folosind filtre adăugați
* Eroare PHP 7.2 count().

1.6.1=
* Caseta de editare a imaginii dispare la clic pe butonul de editare a creionului raportat de @rickytoof9

1.6.0=
* Eroare la salvarea postării cu galeria goală. Patch oferit de @ugy
* Se afișează mai multe câmpuri ale galeriei foto în aceeași pagină raportată de @rickytoof9
* Suport pentru srcset. Mulțumiri speciale lui @ugy pentru cod

1.5.0

• Suport pentru SVG
• Suport pentru versiunea PHP moștenită
• Adăugați câmpuri suplimentare

1.4.0

• Se pot sorta imagini din galerie
• S-a remediat ordinea de a urma ordinea de sortare a imaginilor din galerie

1.3.0

• Schimbați meta_key din acf field_key în acf field_name
• Funcția de ajutor acf_photo_gallery() pentru a extrage imagini
• Funcția de ajutor acf_photo_gallery_resize_image pentru a redimensiona imaginea din zbor și a o salva
• Problemă cu parametrul țintă în config
• Problemă cu adresa URL care nu se salvează corect

1.2.0

• Suport pentru WordPress 4.6
• Unele modificări pe afișaj
• Preluați datele din baza de date

1.1.0

• Index nedefinit: acf-photo-gallery-field din fișier acf-photo_gallery-v4
• Când ștergeți fotografiile din galerie, ultima fotografie nu se ștergea
• Fotografiile din galerie nu au fost salvate în baza de date

Galerie pe web și partajați prietenilor și familiei. Unele servicii online sunt bune și convenabile. Dar dacă doriți să îl găzduiți pe propriul domeniu și să le controlați singur, există și multe scripturi disponibile. De obicei, dorim un script simplu de utilizat și ușor de configurat fără a necesita nicio bază de date. În această postare, vă prezint 2 scripturi PHP.

Galerie PHP cu un singur fișier

Galerie PHP cu un singur fișier de Kenny Svalgaard

Single File PHP Gallery este o galerie foto scrisă în PHP. Are un singur fișier PHP. Miniaturile pentru fotografii și directoare sunt generate automat. Single File PHP Gallery nu necesită nicio configurație sau abilități de utilizare sau baze de date. Tot ce trebuie să faceți este să copiați scriptul în directorul care conține fotografiile dvs. pentru a face o galerie. Și organizează automat subdirectoare ca subgaleri.

Descărcați: http://www.phpgraphy.org/index.php
Demo: http://www.ericzma.com/photo/index.php (vechea mea galerie foto cu temă personalizată)

phpGraphy este un script PHP gratuit pentru galerie foto, scris cu simplitate și eficiență în minte, urmând filozofia KISS. Este lansat sub licență GPL. Este ușor de instalat și are cerințe minime. phpGraphy integrează o mulțime de caracteristici frumoase, cum ar fi comentariile, evaluarea, gestionarea EXIF/IPTC. Deși phpGraphy poate fi configurat pentru a utiliza baze de date, puteți alege și să utilizați fișiere pentru stocarea informațiilor pentru acesta. Dezvoltarea pare să înghețe de câțiva ani. Dar caracteristicile actuale ar trebui găsite pentru o galerie foto personală.

Acest tutorial vă va arăta cum să creați o galerie care va găsi automat imagini într-un folder și le va afișa folosind o casetă lightbox.

În primul rând, creăm coloana vertebrală a galeriei noastre:

Ideea este foarte simplă - scriptul PHP va scana folderul pentru imagini. După aceea, aceste imagini vor fi transformate într-o galerie frumoasă folosind CSS și jQuery. Utilizarea unei astfel de galerii este foarte simplă - trebuie doar să încărcați imagini într-un folder și rezultatul va fi vizibil imediat pe pagină.

$directory = "galerie"; // numele folderului cu imagini
$allowed_types=array("jpg","jpeg","gif","png"); //tipurile de imagini permise
$file_parts=array();
$ext="";
$title="";
$i=0;
//încercați să deschideți folderul
$dir_handle = @opendir($directory) sau die(„Există o eroare cu directorul de imagini!”);
while ($fișier = readdir($dir_handle)) //căutare prin fișiere
{
if($file=="." || $file == "..") continua; //săriți linkurile către alte foldere
$file_parts = explode(".",$file); // Împărțiți numele fișierului și puneți-l într-o matrice
$ext = strtolower(array_pop($file_parts)); //ultimul element este extensia
$title = implode(".",$file_parts);
$title = htmlspecialchars($titlu);
$nomargin="";
if(in_array($ext,$allowed_types))
{
if(($i+1)%4==0) $nomargin="nomargin"; //ultimei imagini din rând i se atribuie clasa CSS „nomargin”
ecou"

";
$i++;
}
}
closedir($dir_handle); // închide folderul

Scanând fișierele folderului și omitând fișierele care nu sunt imagini, acumulăm cod XHTML pentru fiecare imagine. Codul (liniile 28-39) constă dintr-un container cu clasa poza(și în unele cazuri nomargin). Cu un atribut stil setăm imaginea de fundal ca imaginea noastră. Pozitionam imaginea in centru folosind 50% 50% . Astfel, imaginea este aliniată atât pe orizontală, cât și pe verticală. Dacă imaginea este mai mare decât blocul, vedem doar partea centrală a acestuia (partea care se potrivește în container). Astfel, obținem miniaturi frumoase (fără a fi nevoie să reducem imaginea în sine).

Acest lucru funcționează bine cu imagini „negrele”. Încercați să nu încărcați fotografii de 10 megapixeli în folder :).

Blocul conține un link care duce la imaginea de dimensiune completă. Numele fișierului servește ca valoare a atributului titlu. conecteaza caseta de lumina folosește aceste valori și transformă imaginile într-o galerie. Pentru a schimba descrierea unei imagini, trebuie să o redenumiți.

Este posibil să aveți o întrebare despre clasă nomargin! De ce avem nevoie de ea? Fiecare imagine din galerie are o margine din dreapta și de jos. Aceasta înseamnă că ultimul element din fiecare rând nu se va putea alinia cu partea dreaptă a antetului blocului. Asta pare neprofesional. Prin urmare, atribuim o clasă specială care elimină umplutura potrivită pentru ultimul element din rând. Drept urmare, obținem un rezultat frumos.

Acum hai să stabilim puțin lucrurile:

/* mai întâi resetați unele dintre elementele pentru compatibilitatea browserului */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label(
margine: 0px;
umplutură: 0px;
familie de fonturi:Arial, Helvetica, sans-serif;
}
corp( /* corp */
margine-sus: 20px;
culoare albă;
dimensiunea fontului: 13px;
culoare de fundal:#222222;
}
.clear( /* clasa clearfix */
clar:ambele;
}
a, a: vizitat (
culoare:#00BBFF;
text-decor:niciuna;
contur:niciuna;
}
a:hover(
text-decor:subliniat;
}
#container(
lățime: 890px;
margine: 20px automat;
}
#titlu,#subsol(
culoare de fundal:#2A2A2A;
chenar: 1px solid #444444;
înălțime: 20px;
umplutură: 6px 0 25px 15px;
margine-jos: 30px;
preaplin:ascuns;
}
#subsol(
înălțime: 10px;
margine:20px0 20px0;
umplutură: 6px 0 11px 15px;
}
div.nomargin( /* clasa nomargin */
margine-dreapta:0px;
}
.pic(
plutește la stânga;
margine:0 15px 15px 0;
chenar: 5px alb solid;
lățime: 200px;
înălțime: 250px;
}
.pic a(
lățime: 200px;
înălțime: 250px;
text-indent:-99999px;
display:bloc;
}
h1(
dimensiunea fontului: 28px;
greutatea fontului: bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
h2(
font-weight:normal;
dimensiunea fontului: 14px;
culoare albă;
}

Pentru o funcționare corectă, trebuie să conectăm cadrul, foaia de stil și scripturile auxiliare în antetul documentului:

Mai multă magie:

// după încărcarea paginii
$(document).gata(funcție()(
$(".pic a").lightBox((

Încărcare imagine: „lightbox/images/loading.gif”,
imageBtnClose: „lightbox/images/close.gif”,
imageBtnPrev: „lightbox/images/prev.gif”,
imageBtnNext: „lightbox/images/next.gif”
});
});

Aici includem doar câteva imagini pentru ca lightbox să funcționeze corect.

Galeria noastră este gata! Imi place! :)