Inurl galerie foto php id foto maghiară. Galerie funcțională în PHP și jQuery

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

• Creați-vă vizual câmpurile
• 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 cu ușurință 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 codificare, deoarece vi se va solicita să editați codul sursă al temei WordPress. Dacă sunteți în căutarea unor coduri scurte și a unei galerii preconstruite, atunci acest plugin NU este pentru dvs. 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.

" > " title="">

Adăugați câmpuri suplimentare

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

//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" => "clasa", "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 de legendă al atașamentului

În mod implicit, legenda este extrasă din câmpul de descriere. Adăugați următorul filtru la function.php 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 solicitarea 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:
*ACF 4
*ACF 5

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

Copiați folderul navz-photo-gallery în folderul wp-content/plugins

Activați pluginul Advanced Custom Fields: Photo Gallery prin intermediul paginii de administrare a pluginurilor

Creați un câmp nou prin ACF și selectați tipul Galerie foto

Vă rugăm să consultați descrierea pentru mai multe informații despre setările tipului de câmp

Jurnalul modificărilor

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 ACF 5
* 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 grămadă 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, să creăm coloana vertebrală a galeriei noastre:

O galerie jQuery cool

Ideea este foarte simplă - un script PHP va scana un folder 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 imediat vizibil 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
$titlu = 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"

„.$titlu”.
";
$i++;
}
}
closedir($dir_handle); //închide folderul

Scanând fișierele din folder ș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 o imagine de clasă (și în unele cazuri nomargin ). Folosind atributul style, setăm imaginea de fundal să fie imaginea noastră. Pozitionam imaginea in centru folosind 50% 50% . În acest fel 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). În acest fel obținem miniaturi frumoase (fără a fi nevoie să micșorăm imaginea în sine).

Acest lucru funcționează bine cu imagini „luminoase”. Î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. Pluginul lightBox folosește aceste valori și convertește imaginile într-o galerie. Pentru a schimba descrierea unei imagini, trebuie să o redenumiți.

Este posibil să aveți o întrebare despre clasa 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. Pare neprofesionist. Prin urmare, atribuim o clasă specială care elimină marja dreaptă pentru ultimul element dintr-un rând. Drept urmare, obținem un rezultat frumos.

Acum să oficializăm totul puțin:

/* 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;
familia 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:20px 0 20px 0;
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;
greutate font: bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
h2(
font-weight:normal;
dimensiunea fontului: 14px;
culoare albă;
}

Pentru o funcționare corectă, va trebui să includem cadrul, foaia de stil și scripturile auxiliare în antetul documentului:

Mai multă magie:

// după ce pagina s-a încărcat
$(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 pur și simplu conectăm mai multe imagini pentru ca lightbox-ul să funcționeze corect.

Galeria noastră este gata! Imi place! :)

Despre codul Hexagon Gallery

Galerie CSS numai hexagonală.

Reactiv: nu

Dependente: -

Despre codul Galeria Zidăriei

Galeria de zidărie CSS Grid receptivă.

Browsere compatibile: Chrome, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre codul Pure CSS Responsive Gallery

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 galeria de coduri

Galerie de zidărie cu efect de scroll.

Browsere compatibile: Chrome, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre codul Responsive Photo Gallery Grid with Lightbox - No Script

Galeria foto receptivă actualizată cu efecte lightbox. Utilizați CSS Grid și Flexbox și fără script. Utilizarea proprietății ț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 codul Galerie de produse

O pagină de produs minimă, construită cu CSS Flexbox și JavaScript vanilla.

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

Reactiv: da

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

Despre codul Horizontal Slider to Gallery Grid

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 codul Galeria anotimpurilor

Galerie de imagini CSS pur.

Browsere compatibile: Chrome, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre codul Pop-up/Overlay Gallery

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 galeria de imagini de cod

Galeria de imagini Parallax folosind figure & figcaption.

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

Reactiv: da

Dependențe: relaxax.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

Galerie drăguță 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 colțul din dreapta jos. 😼 Numai pentru WebKit, deoarece alte browsere au un suport slab pentru utilizarea calc() în locul oricăror altceva decât valorile de lungime.

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 poze 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