PHP ve jQuery'deki işlevsel galeri

Web'de galeri açın ve arkadaşlarınız ve ailenizle paylaşın. Bazı çevrimiçi hizmetler iyi ve kullanışlıdır. Ancak kendi alan adınızda barındırmak ve bunları kendiniz kontrol etmek istiyorsanız, birçok komut dosyası da mevcuttur. Genellikle betiğin kullanımının basit olmasını ve herhangi bir veritabanı gerektirmeden kurulumunun kolay olmasını isteriz. Bu yazıda 2 PHP betiğini tanıtacağım.

Tek Dosya PHP Galerisi, Kenny Svalgaard

Tek Dosya PHP Galerisi, PHP ile yazılmış bir fotoğraf galerisidir. Yalnızca tek bir PHP dosyası vardır. Fotoğraflar ve dizinler için küçük resimler otomatik olarak oluşturulur. Tek Dosya PHP Galerisi, kullanmak için herhangi bir yapılandırma veya beceri veya veritabanları gerektirmez. Tek yapmanız gereken, galeri oluşturmak için komut dosyasını fotoğraflarınızın bulunduğu dizine kopyalamaktır. Ve alt dizinleri otomatik olarak alt galeriler olarak düzenler.

İndirin: http://www.phpgraphy.org/index.php
Demo: http://www.ericzma.com/photo/index.php (özelleştirilmiş temalı eski fotoğraf galerim)

phpGraphy, KISS felsefesini takip ederek basitlik ve verimlilik göz önünde bulundurularak yazılmış ücretsiz bir PHP fotoğraf galerisi komut dosyasıdır. GPL lisansı altında yayınlanmaktadır. Kurulumu kolaydır ve minimum gereksinimlere sahiptir. phpGraphy yorumlar, derecelendirme, EXIF/IPTC işleme gibi bir dizi güzel özelliği entegre eder. PhpGraphy veritabanlarını kullanacak şekilde ayarlanabilse de, bunun için bilgi depolamak amacıyla dosyaları kullanmayı da seçebilirsiniz. Gelişme birkaç yıldır donmuş gibi görünüyor. Ancak kişisel bir fotoğraf galerisi için güncel özelliklerin bulunması gerekir.

Yalnızca CSS altıgen galeri.

Duyarlı: hayır

Bağımlılıklar: -

Duyarlı CSS Izgara duvar galerisi.

Uyumlu tarayıcılar: Chrome, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

JavaScript yazmaktan bıktınız mı? JQuery onclick olaylarından payınıza düşeni yazdınız mı? Umutsuzluğa kapılmayın! Çünkü yalnızca HTML ve CSS'de duyarlı bir galeri oluşturabilirsiniz. İhtiyacınız olan tek şey biraz etiket ve biraz egzotik CSS. iyi eğlenceler!

Duyarlı: evet

Bağımlılıklar: -

Kaydırma efektli duvar galerisi.

Uyumlu tarayıcılar: Chrome, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

Işık kutusu efektleriyle güncellenen duyarlı fotoğraf galerisi. CSS Grid ve Flexbox'ı kullanın ve komut dosyası kullanmayın. hedef özelliğini kullanarak.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

HTML, CSS ve JS'de basit galeri.

Uyumlu tarayıcılar: Chrome, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

CSS Flexbox ve vanilya JavaScript ile oluşturulmuş minimal tek bir ürün sayfası.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: 12columns.scss, onicons.css

Bir medya sorgusu ve iki satır kod kullanan harika mobil kullanıcı deneyimine sahip tam duyarlı ızgara.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

Saf CSS resim galerisi.

Uyumlu tarayıcılar: Chrome, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

Bu, portföyünüz için açılır bir kaplama tasarımıdır! Tek tuşla projelerinizi/çalışmalarınızı ayrıntılı olarak görüntüleyin.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: hayır

Bağımlılıklar: -

Şekil ve figcaption'u kullanan paralaks resim galerisi.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: Relax.js

Flexbox ve CSS ızgarası ile oluşturulmuş resim galerisi.

JavaScript yerine esnek kutulu Tumblr photogrid/photoset.

Burada, ortada gösterilmesini istediğiniz görüntüyü seçeceğiniz bir resim galerisi yer almaktadır. Düzen, CSS ızgarası ile mümkün kılınmıştır. Daha küçük bir görüntü alanına geçiş yaptığınızda, görüntüyü değiştirerek mümkün olan farklı bir deneyim elde edeceksiniz. grid-template-columns ve grid-template-rows .

Şunlara sahip güzel duyarlı galeri: CSS sütunları, yuvarlanma, fareyle üzerine gelindiğinde başlık, muhteşem açılır pencere komut dosyası, yakınlaştırma efekti.

HTML, CSS ve JS ile resim galerisi animasyonu.

Kaydırma ve döngü galerisi. Vanilya HTML/CSS/JS. Dokunma Olayı Yok.

Pencerelere tıklayarak galeriye bakın.

Sağ alt köşedeki bilgi butonuna tıklayın. 😼 Yalnızca WebKit'tir çünkü diğer tarayıcılar uzunluk değerlerinden başka herhangi bir şey yerine calc() işlevini kullanma konusunda zayıf desteğe sahiptir.

HTML, CSS ve JavaScript portföy galerisi.
Tanmoy Biswas tarafından yapılmıştır
14 Şubat 2017

Yakınlaştırmalı resim galerisi.
Wunnle tarafından yapılmıştır
3 Şubat 2017

Küp döndürme 3D dönüşüm galerisi.
Lorina Gousi tarafından yapılmıştır
30 Ocak 2017

Galeri üzerine gelme efekti ve galeri genişletildi.

Photobox, galeri kullanıcı arayüzü ve kullanıcı deneyimi kodunun yeni nesli olan evrimdir.
Yair Even Or tarafından yapılmıştır
4 Ocak 2017

Flexbox ve CSS animasyonları/geçişleri içeren seyahat galerisi.
Sean Free'nin yaptığı
2 Ocak 2017

Kullanıcı kaydırdıkça üç paneli ortaya çıkaran bir galeri.
Teegan Lincoln tarafından yapılmıştır
1 Ocak 2017

HTML, CSS ve JavaScript yansıtıcı fotoğraf galerisi duvarı deneyi.
Shawn Reisner'ın yaptığı
21 Ekim 2016

Dört resim için galerinin geçişi yapıldı.
Dudley Storey tarafından yapılmıştır
14 Ekim 2016

İçerisinde 24 adet 1920x1080 resim bulunduğundan indirilmesi bir saniye sürebilmektedir. Yine de harika görünüyor. Değişkenlerle (geçiş süreleri ve gecikmeler) oynamaktan çekinmeyin. Resim sayısını değiştirebilirsiniz. Sadece scss ve js'deki değişkenleri değiştirin. Ayrıca, yeni resimler eklemek istiyorsanız, resmin URL'sini js dizisine eklemeniz yeterlidir.
Kirill Kiyutin tarafından yapılmıştır
9 Eylül 2016

İşte Pete Rojwongsuriya'nın jquery.tilted-pagescroll eklentisi kullanılarak uygulanan güzel bir 3D eğik kaydırmalı resim galerisi.
Sebastian Schepis'in yaptığı
19 Haziran 2014

WordPress web sitenizdeki herhangi bir yazıya/sayfaya Fotoğraf Galerisi alanı ekleyen, Gelişmiş Özel Alanın (ACF) hafif bir uzantısı.

• Alanlarınızı görsel olarak oluşturun
• Birden fazla fotoğraf ekleyin; ayrıca herhangi bir şeyin başlığını, resim yazısını ve bağlantısını da değiştirebilirsiniz
• Alanlarınızı birden fazla düzenleme sayfasına atayın (özel konum kuralları aracılığıyla)
• Basit ve kullanıcı dostu bir API aracılığıyla verileri kolayca yükleyin
• Kullanım kolaylığı ve hızlı işlem için yerel WordPress özel gönderi türünü kullanır
• Kullanım kolaylığı ve hızlı işleme için yerel WordPress meta verilerini kullanır

Bu eklenti ACF Gallery Pro'nun bir alternatifidir. WordPress tema kaynak kodunuzu düzenlemeniz gerekeceğinden kodlama bilgisine sahip olmanız gerekir. Kısa kodlar ve önceden oluşturulmuş galeri arıyorsanız bu eklenti size göre DEĞİLDİR. Bu eklenti size PHP resim dizisi verecek ve galeri düzenini istediğiniz gibi yapmanız gerekecek.

Galeri düzeninin kurulumu, konfigürasyonu ve oluşturulması konusunda yardıma mı ihtiyacınız var? Hizmetimi Fiverr.com üzerinden https://www.fiverr.com/share/2KAjR8 bağlantısını takip ederek satın alabilirsiniz.

acf_photo_gallery ACF_FIELD_NAME ve POST_ID'yi alan bir yardımcı işlevdir ve veritabanını sorgulayacak ve görüntüleri sizin için derleyecektir. Bu fonksiyonun çıktısı bir dizi olacaktır.

Acf_photo_gallery(ACF_FIELD_NAME, POST_ID);

Aşağıdaki örnek, düzen için Twitter Bootstrap çerçevesini kullanıyor. İstediğiniz çerçeveyi kullanabilirsiniz.

">" başlık = "">

Ekstra alanlar eklemek için aşağıdakileri temanızın function.php dosyasına ekleyin.

//Alternatif Metin ve Özel Sınıflar adı verilen ekstra alanlar oluşturun function 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)); // Alternatif Metin alanını oluşturur $args["class"] = array("type" => "text", "label" => "Özel Sınıflar", "name" => "sınıf", "değer" => get_field($field . "_class", $attachment_id)); // Özel Sınıflar alanı oluşturur return $args; ) add_filter("acf_photo_gallery_image_fields", "my_extra_gallery_fields", 10, 3);

ACF yardımcı fonksiyonunu get_field kullanabilirsiniz

Get_field("photo_gallery_alt", $id); get_field("photo_gallery_class", $id);

Varsayılan olarak başlık açıklama alanından çekiliyor. Altyazıyı ek başlık alanından çekmek için aşağıdaki filtreyi function.php dosyanıza ekleyin.

Add_filter("acf_photo_gallery_caption_from_attachment", "__return_true");

Tüm gönderilerin JSON yanıtını almak için URL'ye HTTP İsteği gönder

http://(etki alanı)/wp-json/wp/v2/(POST_TYPE)/

Belirli bir gönderinin JSON yanıtını almak için URL'ye HTTP İsteği gönderin

http://(etki alanı)/wp-json/wp/v2/(POST_TYPE)/(POST_ID)/

Yanıt aldığınızda, ACF fotoğraf galerisi adını ve resim dizisini içeren ACF öğesine bakın.

Bu ACF alan türü aşağıdakilerle uyumludur:
*ACF4
*ACF5

Diğer tüm WordPress eklentileri gibi, bu eklenti de diğer temalar ve eklentilerle ilgili sorunlara neden olabilir. Bu eklentinin WordPress sitenizde çalışmasını sağlayan sorunlarla karşılaşıyorsanız lütfen destek forumundan yardım isteyin. Bu şekilde size yardımcı olabilir ve bu sorunun başkasının başına gelmesini önleyebiliriz. Benimle doğrudan konuşmak isterseniz http://www.navz.me/ web sitem üzerinden bana ulaşabilirsiniz.

1.6.5=
* Düzenleme sırasında onay kutusu öğesinden boş değil koşulunu kaldırın
* ACF'den REST API'ye eklenti desteğini kaldırın
* REST API için yerel destek

1.6.4=
* WordPress meta kutusundan görselleri kaldırırken konsolda JavaScript hatası

1.6.3=
*ACF5 desteği
* Yerleşik veya WordPress yerel modeliyle galeriyi düzenleyin. Github @makepost'a teşekkürler
* Kod tabanındaki genel iyileştirmeler
* ACF'den REST API eklentisine kadar RESTFul API desteği

1.6.2=
* Verileri ek verileriyle senkronize tutun
* Ekleme filtrelerini kullanarak başlık eki başlığını çekin
* PHP 7.2 count() hatası

1.6.1=
* @rickytoof9 tarafından bildirilen kalem düzenleme düğmesine tıklandığında görseli düzenle kutusu kayboluyor

1.6.0=
* Boş galeriyle gönderi kaydedilirken hata oluştu. @ugy tarafından sağlanan yama
* @rickytoof9 tarafından bildirilen aynı sayfada birden fazla fotoğraf galerisi alanı gösteriliyor
* Srcset desteği. Kod için @ugy'ye özellikle teşekkürler

• SVG desteği
• Eski PHP sürümü desteği
• Ekstra alanlar ekleyin

• Galeri resimlerini sıralayabilir
• Galeri görsellerinin sıralama düzenini takip etme sırası düzeltildi

• Meta_key'i acf field_key'den acf field_name'e değiştirin
• Görüntüleri çekmek için yardımcı işlev acf_photo_gallery()
• Görüntüyü anında yeniden boyutlandırmak ve kaydetmek için acf_photo_gallery_resize_image yardımcı işlevi
• Yapılandırmadaki hedef parametreyle ilgili sorun
• URL'nin düzgün şekilde kaydedilmemesiyle ilgili sorun

• WordPress 4.6 desteği
• Ekranda bazı değişiklikler
• Verileri veritabanından getir

• Tanımsız dizin: acf-photo_gallery-v4 dosyasındaki acf-photo-gallery-field
• Galerideki fotoğrafları sildiğimde son fotoğraf silinmiyordu
• Galeri fotoğrafları veritabanına kaydedilmedi

Bu eğitimde, bir klasördeki görüntüleri otomatik olarak bulacak ve bunları bir ışık kutusu kullanarak görüntüleyecek bir galerinin nasıl oluşturulacağı gösterilecektir.

Öncelikle galerimizin omurgasını oluşturuyoruz:

Harika bir jQuery galerisi

Fikir çok basit; PHP betiği klasördeki resimleri tarayacaktır. Bundan sonra bu görüntüler CSS ve jQuery kullanılarak güzel bir galeriye dönüştürülecek. Böyle bir galeriyi kullanmak çok basittir - sadece resimleri bir klasöre yüklemeniz yeterlidir; sonuç sayfada hemen görünecektir.

$dizin = "galeri"; // görsellerin bulunduğu klasörün adı
$allowed_types=array("jpg","jpeg,"gif,"png"); //izin verilen resim türleri
$file_parts=dizi();
$ext = "";
$başlık = "";
$i=0;
//klasörü açmayı dene
$dir_handle = @opendir($directory) or die("Resim dizininizde bir hata var!");
while ($file = readdir($dir_handle)) //dosyalar arasında arama yapın
{
if($file=="." || $file == "..") devam et; //diğer klasörlere olan bağlantıları atla
$file_parts = patlayabilir(".",$dosya); // dosya adını bölüp bir diziye yerleştiriyoruz
$ext = strtolower(array_pop($file_parts)); //son eleman eklentidir
$başlık = implode(".",$file_parts);
$başlık = htmlspecialchars($başlık);
$nomargin = "";
if(in_array($ext,$allowed_types))
{
if(($i+1)%4==0) $nomargin="nomargin"; //satırdaki son görsele CSS sınıfı "nomargin" atanır
Eko "

".$başlık."
";
$i++;
}
}
closedir($dir_handle); // klasörü kapat

Klasör dosyalarını tarayıp resim olmayan dosyaları atlayarak her resim için XHTML kodunu biriktiririz. Kod (28-39. satırlar) pic (ve bazı durumlarda nomargin) sınıfına sahip bir kaptan oluşur. Style özelliği ile arka plan görselini görselimiz olarak ayarlıyoruz. 50% 50% kullanarak görüntüyü merkeze konumlandırıyoruz. Böylece görüntü hem yatay hem de dikey olarak hizalanır. Eğer görsel bloktan büyükse sadece orta kısmını (kabın içine sığan kısmı) görürüz. Böylece güzel küçük resimler elde ederiz (görüntünün kendisini küçültmeye gerek kalmadan).

Bu, "ağır olmayan" görüntülerde işe yarar. Klasöre 10 megapiksel fotoğraf yüklememeye çalışın :).

Blok, tam boyutlu görüntüye yönlendiren bir bağlantı içerir. Dosyanın başlığı, başlık niteliğinin değeri olarak işlev görür. LightBox eklentisi bu değerleri kullanır ve görselleri galeriye dönüştürür. Bir görselin açıklamasını değiştirmek için onu yeniden adlandırmanız gerekir.

Nomargin sınıfı hakkında bir sorunuz olabilir! Neden buna ihtiyacımız var? Galerideki her görselin sağ ve alt kenar boşluğu vardır. Bu, her satırdaki son öğenin blok başlığının sağ tarafıyla hizalanamayacağı anlamına gelir. Bu profesyonelce görünmüyor. Bu nedenle satırdaki son öğe için doğru dolguyu kaldıran özel bir sınıf atadık. Sonuç olarak güzel bir sonuç elde ediyoruz.

Şimdi işleri biraz ayarlayalım:

/* önce tarayıcı uyumluluğu için bazı öğeleri sıfırlayın */
gövde,h1,h2,h3,p,td,teklif,küçük,form,giriş,ul,li,ol,etiket(
kenar boşluğu:0 piksel;
dolgu:0 piksel;
yazı tipi ailesi: Arial, Helvetica, sans-serif;
}
vücut vücut */
kenar boşluğu üst:20 piksel;
Beyaz renk;
yazı tipi boyutu:13 piksel;
arka plan rengi:#222222;
}
.clear( /* clearfix sınıfı */
ikisini de temizle;
}
a, a: ziyaret edildi (
renk:#00BBFF;
metin dekorasyonu: yok;
taslak:yok;
}
a: üzerine gelin(
metin dekorasyonu:altı çizili;
}
#konteyner(
genişlik:890 piksel;
kenar boşluğu:20 piksel otomatik;
}
#başlık,#altbilgi(
arka plan rengi:#2A2A2A;
kenarlık:1 piksel katı #444444;
yükseklik:20 piksel;
dolgu:6 piksel 0 25 piksel 15 piksel;
kenar boşluğu alt:30 piksel;
taşma:gizli;
}
#altbilgi(
yükseklik:10 piksel;
kenar boşluğu:20px0 20px0;
dolgu:6 piksel 0 11 piksel 15 piksel;
}
div.nomargin( /* nomargin sınıfı */
sağ kenar boşluğu:0px;
}
.pic(
kayan nokta:sol;
kenar boşluğu:0 15 piksel 15 piksel 0;
kenarlık:5 piksel düz beyaz;
genişlik:200 piksel;
yükseklik:250 piksel;
}
.resim a(
genişlik:200 piksel;
yükseklik:250 piksel;
metin girintisi:-99999px;
Ekran bloğu;
}
h1(
yazı tipi boyutu:28 piksel;
yazı tipi ağırlığı: kalın;
yazı tipi ailesi:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
h2(
yazı tipi ağırlığı:normal;
yazı tipi boyutu:14 piksel;
Beyaz renk;
}

Düzgün çalışma için çerçeveyi, stil sayfasını ve yardımcı komut dosyalarını belge başlığına bağlamamız gerekir:

Biraz daha sihir:

// sayfa yüklendikten sonra
$(document).ready(function()(
$(".pic a").lightBox((

ImageLoading: "lightbox/images/loading.gif",
imageBtnClose: "lightbox/images/close.gif",
imageBtnPrev: "ışık kutusu/images/prev.gif",
imageBtnNext: "ışık kutusu/resimler/next.gif"
});
});

Burada, ışık kutusunun düzgün çalışması için yalnızca birkaç resim ekliyoruz.

Galerimiz hazır! Severim! :)