Funkční galerie v PHP a jQuery

Galerie na webu a sdílení s přáteli a rodinou. Některé online služby jsou dobré a pohodlné. Pokud jej ale chcete hostovat na vlastní doméně a ovládat je sami, je k dispozici také mnoho skriptů. Obvykle chceme, aby byl skript snadno použitelný a snadno nastavitelný bez nutnosti jakékoliv databáze. V tomto příspěvku představím 2 PHP skripty.

Galerie PHP s jedním souborem

Single File PHP Gallery od Kennyho Svalgaarda

Single File PHP Gallery je fotogalerie napsaná v PHP. Obsahuje pouze jeden soubor PHP. Miniatury fotografií a adresářů se generují automaticky. Single File PHP Gallery nevyžaduje žádnou konfiguraci nebo dovednosti k používání databází. Jediné, co musíte udělat, je zkopírovat skript do adresáře obsahujícího vaše fotografie a vytvořit galerii. A automaticky organizuje podadresáře jako podgalerie.

Ke stažení: http://www.phpgraphy.org/index.php
Demo: http://www.ericzma.com/photo/index.php (moje stará fotogalerie s přizpůsobeným tématem)

phpGraphy je bezplatný skript pro fotogalerii PHP napsaný s ohledem na jednoduchost a efektivitu podle filozofie KISS. Je vydán pod licencí GPL. Snadno se instaluje a má minimální požadavky. phpGraphy integruje spoustu pěkných funkcí, jako jsou komentáře, hodnocení, zpracování EXIF/IPTC. Ačkoli lze phpGraphy nastavit tak, aby používal databáze, můžete si také zvolit použití souborů pro ukládání informací. Zdá se, že vývoj na několik let zamrzne. Ale aktuální funkce by měly být nalezeny pro osobní fotogalerii.

O kódu

Galerie Hexagon

Pouze CSS šestiúhelníková galerie.

Reagující: ne

Závislosti: -

O kódu

Galerie zdiva

Responzivní CSS Grid galerie zdiva.

Kompatibilní prohlížeče: Chrome, Firefox, Opera, Safari

Reagující: ano

Závislosti: -

O kódu

Čistá CSS responzivní galerie

Už vás nebaví psát JavaScript? Napsali jste svůj spravedlivý podíl na událostech jQuery onclick? Nezoufejte! Můžete vytvořit responzivní galerii pouze v HTML a CSS. Vše, co potřebujete, jsou nějaké štítky a nějaké exotické CSS. bavte se!

Reagující: ano

Závislosti: -

O kódu

Galerie

Galerie zdiva s efektem posouvání.

Kompatibilní prohlížeče: Chrome, Firefox, Opera, Safari

Reagující: ano

Závislosti: -

O kódu

Responzivní mřížka fotogalerie s Lightboxem – žádný skript

Responzivní fotogalerie aktualizovaná o efekty lightbox. Využijte CSS Grid & Flexbox a žádný skript. pomocí cílové vlastnosti.

Kompatibilní prohlížeče: Chrome, Edge, Firefox, Opera, Safari

Reagující: ano

Závislosti: -

O kódu

Jednoduchost

Jednoduchá galerie v HTML, CSS a JS.

Kompatibilní prohlížeče: Chrome, Firefox, Opera, Safari

Reagující: ano

Závislosti: -

O kódu

galerie produktů

Minimální stránka s jedním produktem vytvořená pomocí CSS Flexbox a vanilkového JavaScriptu.

Kompatibilní prohlížeče: Chrome, Edge, Firefox, Opera, Safari

Reagující: ano

Závislosti: 12columns.scss, onicons.css

O kódu

Vodorovný posuvník na mřížku galerie

Plně responzivní mřížka s úžasným mobilním UX pomocí jednoho mediálního dotazu a dvou řádků kódu.

Kompatibilní prohlížeče: Chrome, Edge, Firefox, Opera, Safari

Reagující: ano

Závislosti: -

O kódu

Galerie ročních období

Galerie obrázků čistého CSS.

Kompatibilní prohlížeče: Chrome, Firefox, Opera, Safari

Reagující: ano

Závislosti: -

O kódu

Vyskakovací/překryvná galerie

Toto je vyskakovací překryvný design pro vaše portfolio! Zobrazte své projekty/práce podrobně kliknutím na tlačítko.

Kompatibilní prohlížeče: Chrome, Edge, Firefox, Opera, Safari

Reagující: ne

Závislosti: -

O kódu

Galerie Obrázků

Galerie paralaxních obrázků pomocí obrázku a popisku obrázku.

Kompatibilní prohlížeče: Chrome, Edge, Firefox, Opera, Safari

Reagující: ano

Závislosti: relax.js

O kódu

Galerie obrázků vytvořená pomocí flexboxu a mřížky CSS.

O kódu

Tumblr photogrid/photoset s flex-boxem místo JavaScriptu.

O kódu

Zde je jedna z obrázkových galerií, kde vyberete obrázek, který chcete předvést uprostřed. Rozvržení je možné pomocí mřížky CSS. Při přepnutí na menší výřez získáte jiný zážitek, který je možný díky změně mřížka-šablona-sloupce a mřížka-šablona-řádky .

O kódu

Pěkná responzivní galerie s: CSS sloupci, přejetím, popiskem při najetí, velkolepým vyskakovacím skriptem, efektem přiblížení.

O kódu

Animace galerie obrázků s HTML, CSS a JS.

O kódu

Posouvání a opakování galerie. Vanilkové HTML/CSS/JS. Žádné dotykové události.

O kódu

Prohlédněte si galerii kliknutím na okna.

O kódu

Klikněte na tlačítko info v pravém dolním rohu. 😼 Pouze WebKit, protože jiné prohlížeče mají špatnou podporu pro použití calc() místo čehokoli jiného, než jsou hodnoty délky.

Galerie portfolia HTML, CSS a JavaScriptu.
Výrobce Tanmoy Biswas
14. února 2017

Galerie obrázků se zoomem.
Vyrobeno wunnle
3. února 2017

Kostka rotace 3D transformační galerie.
Vytvořila Lorina Gousi
30. ledna 2017

O kódu

Efekt zobrazení galerie a rozšíření galerie.

Photobox je evoluce, další generace uživatelského rozhraní a UX kódu galerie.
Výrobce Yair Even Or
4. ledna 2017

Cestovní galerie s flexboxem a CSS animacemi/přechody.
Vytvořil Sean Free
2. ledna 2017

Galerie, která při posouvání uživatele odhaluje tři panely.
Výrobce Teegan Lincoln
1. ledna 2017

Experiment s reflexní stěnou galerie HTML, CSS a JavaScript.
Vytvořil Shawn Reisner
21. října 2016

Přechodová galerie pro čtyři obrázky.
Vyrobil Dudley Storey
14. října 2016

Uvnitř je 24 obrázků 1920x1080, takže stahování může chvíli trvat. Vypadá to ale cool. Neváhejte a pohrajte si s proměnnými (doby přechodu a zpoždění). Můžete změnit počet obrázků. Stačí změnit proměnné v scss a js. Také, pokud chcete přidat nové obrázky, stačí přidat adresu URL obrázku do pole js.
Vytvořil Kirill Kiyutin
9. září 2016

Zde je pěkná 3D galerie obrázků s nakloněným posouváním implementovaná pomocí zásuvného modulu jquery.tilted-pagescroll Pete Rojwongsuriya.
Vytvořil Sebastian Schepis
19. června 2014

Odlehčené rozšíření Advanced Custom Field (ACF), které přidává FOTOGALERIE pole na jakýkoli příspěvek/stránky na vašem webu WordPress.

Vizuálně vytvořte svá pole
Přidejte více fotografií a můžete také upravit název, popisek a odkaz na cokoli
Přiřaďte svá pole více stránkám úprav (pomocí vlastních pravidel pro umístění)
Snadné načítání dat prostřednictvím jednoduchého a přátelského rozhraní API
Pro snadné použití a rychlé zpracování používá nativní vlastní typ příspěvku WordPress
Pro snadné použití a rychlé zpracování používá nativní metadata WordPress

Poznámka

Tento plugin je alternativou ACF Gallery Pro. Musíte mít znalosti o kódování, protože budete muset upravit zdrojový kód motivu WordPress. Pokud hledáte krátké kódy a předem vytvořenou galerii, pak je tento plugin NE pro tebe. Tento plugin vám poskytne PHP pole obrázků a budete muset vytvořit rozložení galerie, jak si přejete.

Potřebovat pomoc?

Potřebujete pomoci s instalací, konfigurací a vytvořením rozvržení galerie? Moji službu si můžete zakoupit na Fiverr.com kliknutím na odkaz https://www.fiverr.com/share/2KAjR8

Používání

acf_photo_gallery je pomocná funkce, která přebírá ACF_FIELD_NAME a POST_ID bude dotazovat databázi a kompilovat obrázky za vás. Výstupem této funkce bude pole.

Acf_photo_gallery(ACF_FIELD_NAME, POST_ID);

příklad

Následující příklad používá k rozvržení rámec Twitter Bootstrap. Můžete použít libovolný rámec dle vašeho výběru.

ID); //Zkontrolujte, zda má pole return něco if(count($images)): //Skvělé, máme nějaká data, takže teď přes ně zacyklíme foreach($images jako $image): $id = $image[ "id"]; // ID přílohy média $title = $image["title"]; //Název $caption= $image["caption"]; //Titulek $full_image_url= $image[" full_image_url"]; //URL obrázku v plné velikosti $full_image_url = acf_photo_gallery_resize_image($full_image_url, 262, 160); //Velikost změněna na šířku 262 pixelů a výšku 160 pixelů [thumbnail_thumbnail_image $thumbnail_image] Získejte velikost miniatury url obrázku 150 x 150 pixelů $url= $image["url"]; //Při kliknutí přejít na libovolný odkaz $target= $image["target"]; //Otevřít normální nebo novou kartu $alt = get_field("photo_gallery_alt ", $id); //Získejte alt, což je další pole (viz níže, jak přidat další pole) $class = get_field("photo_gallery_class", $id); //Získejte třídu, která je dalším polem (viz níže, jak přidat další pole) ?>

" >

"alt="" title="!}">

Přidat další pole

Chcete-li přidat další pole, přidejte do souboru themes functions.php následující.

//Vytvořte další pole s názvem Alternativní text a funkce Custom Classess 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)); // Vytvoří alternativní textové pole $args["class"] = array("type" => "text", "label" => "Custom Classess", "name" => "class", "value" => get_field($field . "_class", $attachment_id)); // Vytvoří pole Custom Classess return $args; ) add_filter("acf_photo_gallery_image_fields", "moje_extra_galerie_pole", 10, 3);

Jak získat hodnoty dalších polí

Můžete použít pomocnou funkci ACF get_field

Get_field("foto_galerie_alt", $id); get_field("třída_foto_galerie", $id);

Vytáhněte titulek z pole titulků přílohy

Ve výchozím nastavení se titulek stahuje z pole popisu. Přidejte následující filtr do souboru function.php, abyste vytáhli titulek z pole titulků přílohy.

Add_filter("acf_photo_gallery_caption_from_attachment", "__return_true");

REST API

Chcete-li získat odpověď JSON na všechny příspěvky, odešlete požadavek HTTP na adresu URL

http://(doména)/wp-json/wp/v2/(POST_TYPE)/

Chcete-li získat odpověď JSON na konkrétní příspěvek, odešlete požadavek HTTP na adresu URL

http://(doména)/wp-json/wp/v2/(POST_TYPE)/(POST_ID)/

Když obdržíte odpověď, podívejte se na položku ACF, která obsahuje název fotogalerie ACF a pole obrázků.

Kompatibilita

Tento typ pole ACF je kompatibilní s:
*ACF4
*ACF5

Problémy

Stejně jako jakýkoli jiný plugin WordPress může i tento plugin způsobovat problémy s jinými motivy a pluginy. Pokud se potýkáte s problémy s fungováním tohoto pluginu na vašem webu WordPress, požádejte o pomoc ve fóru podpory. Tímto způsobem vám můžeme pomoci a zabránit tomu, aby se tento problém stal někomu jinému. Pokud se mnou chcete mluvit přímo, můžete mě kontaktovat prostřednictvím mých webových stránek http://www.navz.me/

Instalace

Zkopírujte složku navz-photo-gallery do složky wp-content/plugins
Aktivujte plugin Advanced Custom Fields: Photo Gallery na stránce pro správu pluginů
Vytvořte nové pole přes ACF a vyberte typ Fotogalerie
Další informace týkající se nastavení typu pole naleznete v popisu

changelog

1.6.5=
* Odebrat neprázdnou podmínku ze zaškrtávacího políčka při úpravě
* Odebrat podporu pro plugin ACF to REST API
* Nativní podpora pro REST API

1.6.4=
* Chyba JavaScriptu v konzoli při odstraňování obrázků z metaboxu WordPress

1.6.3=
*Podpora pro ACF5
* Upravte galerii pomocí vestavěného nebo nativního modelu WordPress. Díky Github @makepost
* Pod kapotou vylepšení kódové základny
* Podpora pro RESTFul API s ACF to REST API plugin

1.6.2=
* Udržujte data synchronizovaná s daty přílohy
* Vytáhněte titulek přílohy pomocí přidat filtry
* Chyba count() PHP 7.2

1.6.1=
* Pole Upravit obrázek zmizí po kliknutí na tlačítko úprav tužkou nahlášené @rickytoof9

1.6.0=
* Chyba při ukládání příspěvku s prázdnou galerií. Patch poskytl @ugy
* Zobrazení více polí fotogalerie na stejné stránce nahlášené @rickytoof9
*Podpora pro srcset. Zvláštní poděkování @ugy za kód

1.5.0

Podpora pro SVG
Podpora starší verze PHP
Přidejte další pole

1.4.0

Může třídit obrázky galerie
Opraveno pořadí podle pořadí řazení obrázků galerie

1.3.0

Změňte meta_key z acf field_key na acf field_name
Pomocná funkce acf_photo_gallery() pro stahování obrázků
Pomocná funkce acf_photo_gallery_resize_image pro změnu velikosti obrázku za běhu a jeho uložení
Problém s cílovým parametrem v konfiguraci
Problém s nesprávným ukládáním adresy URL

1.2.0

Podpora pro WordPress 4.6
Některé změny na displeji
Získejte data z databáze

1.1.0

Nedefinovaný index: acf-photo-gallery-field v souboru acf-photo_gallery-v4
Při smazání fotek z galerie se poslední fotka nesmazala
Fotografie galerie nebyly uloženy do databáze

Tento tutoriál vám ukáže, jak vytvořit galerii, která automaticky vyhledá obrázky ve složce a zobrazí je pomocí lightboxu.

Nejprve vytvoříme páteř naší galerie:

Skvělá galerie jQuery

// Zde je kód PHP
?>

Myšlenka je velmi jednoduchá - PHP skript prohledá složku pro obrázky. Poté se tyto obrázky promění v krásnou galerii pomocí CSS a jQuery. Použití takové galerie je velmi jednoduché – stačí nahrát obrázky do složky a výsledek bude na stránce hned vidět.

$adresar = "galerie"; // název složky s obrázky
$allowed_types=array("jpg","jpeg","gif","png"); //povolené typy obrázků
$části_souboru=pole();
$ext="";
$title="";
$i=0;
//zkuste otevřít složku
$dir_handle = @opendir($adresář) or die("V adresáři s obrázky je chyba!");
while ($file = readdir($dir_handle)) //prohledávání souborů
{
if($file=="." || $file == "..") pokračovat; //přeskakování odkazů na jiné složky
$části_souboru = explode(".",$soubor); // rozdělí název souboru a vloží jej do pole
$ext = strtolower(pole_pop($části_souboru)); //posledním prvkem je rozšíření
$title = implode(".",$části_souboru);
$title = htmlspecialchars($title);
$nomargin="";
if(in_array($ext,$allowed_types))
{
if(($i+1)%4==0) $nomargin="nomargin"; //poslednímu obrázku v řádku je přiřazena CSS třída "nomargin"
echo"

".$title."

";
$i++;
}
}
closedir($dir_handle); // zavřít složku

Skenováním souborů složek a přeskakováním jiných než obrazových souborů shromažďujeme kód XHTML pro každý obrázek. Kód (řádky 28-39) se skládá z kontejneru s třídou obr(a v některých případech nomargin). S atributem styl nastavíme obrázek na pozadí jako náš obrázek. Umístíme obrázek do středu pomocí 50% 50% . Obraz je tedy zarovnán horizontálně i vertikálně. Pokud je obrázek větší než blok, vidíme pouze jeho centrální část (část, která se vejde do kontejneru). Získáme tak krásné náhledy (bez nutnosti zmenšování samotného obrázku).

To funguje dobře s "netěžkými" obrázky. Zkuste do složky nenahrát 10megapixelové fotky :).

Blok obsahuje odkaz, který vede na obrázek v plné velikosti. Název souboru slouží jako hodnota atributu titul. zapojit světelný box používá tyto hodnoty a převádí obrázky do galerie. Chcete-li změnit popis obrázku, musíte jej přejmenovat.

Můžete mít otázku ohledně třídy nomargin! Proč to potřebujeme? Každý obrázek v galerii má pravý a spodní okraj. To znamená, že poslední prvek v každém řádku se nebude moci zarovnat s pravou stranou záhlaví bloku. Vypadá to neprofesionálně. Proto přiřadíme speciální třídu, která odstraní správnou výplň pro poslední prvek v řadě. Výsledkem je krásný výsledek.

Nyní si věci trochu nastavíme:

/* nejprve resetujte některé prvky pro kompatibilitu prohlížeče */
tělo,h1,h2,h3,p,td,citát,malý,formulář,vstup,ul,li,ol,štítek(
margin:0px;
padding:0px;
rodina písem:Arial, Helvetica, bezpatkové;
}
tělo( /* tělo */
margin-top:20px;
barva bílá;
font-size:13px;
background-color:#222222;
}
.clear( /* třída clearfix */
jasné:obě;
}
a, a: navštíveno (
barva:#00BBFF;
text-decoration:none;
obrys:žádný;
}
a:hover(
text-decoration:podtržení;
}
#kontejner(
šířka:890px;
margin:20px auto;
}
#nadpis,#patička(
background-color:#2A2A2A;
border:1px solid #444444;
výška:20px;
padding:6px 0 25px 15px;
margin-bottom:30px;
přetečení:skryté;
}
#zápatí(
výška:10px;
margin:20px0 20px0;
padding:6px 0 11px 15px;
}
div.nomargin( /* třída nomargin */
margin-right:0px;
}
.pic(
plavat vlevo;
margin:0 15px 15px 0;
ohraničení:5px plná bílá;
šířka:200px;
výška:250px;
}
.pic a(
šířka:200px;
výška:250px;
text-odsazení:-99999px;
displej:blok;
}
h1(
font-size:28px;
váha písma: tučné;
font-family:"Trebuchet MS",Arial, Helvetica, bezpatkové;
}
h2(
font-weight:normal;
font-size:14px;
barva bílá;
}

Pro správnou práci potřebujeme propojit framework, styly a pomocné skripty v hlavičce dokumentu:

Ještě trochu magie:

// po načtení stránky
$(document).ready(function()(
$(".pic a").lightBox((

ImageLoading: "lightbox/images/loading.gif",
imageBtnClose: "lightbox/images/close.gif",
imageBtnPrev: "lightbox/images/prev.gif",
imageBtnNext: "lightbox/images/next.gif"
});
});

Zde uvádíme jen několik obrázků, aby lightbox fungoval správně.

Naše galerie je připravena! Mám rád! :)