için basit bir komut dosyası rahat görüntüleme sitenizin sayfalarındaki resimler. Kurulumu kolay ve her durumda çalışır popüler tarayıcılar. Örnek bir çalışma görebilirsiniz. Kütüphanenin kendisini bağlamak iki adımda gerçekleştirilir:

Kurulum

Lightbox, Prototype ve Scriptaculous kitaplıklarını kullanır. Bunları HTML sayfasının başlık bölümüne eklemelisiniz:

Aktivasyon

Görselin Lightbox kullanılarak açılabilmesi için görsel bağlantı etiketine rel=”lightbox” özelliğini eklemeniz gerekmektedir. Gerekiyorsa başlık, başlık niteliğine yerleştirilebilir. Örneğin şöyle:

resim #1

Görünüm alanında mantıksal olarak ilişkili birkaç görüntü yerleştirmeniz ve bunlar arasında gezinmeyi düzenlemeniz gerekiyorsa, ilgili her görüntü için grup adını rel=”lightbox” özelliğinde köşeli parantez içine yerleştirmeniz gerekir. Örneğin:

resim #1
resim #2
resim #3

Bir sayfaya birden fazla fotoğraf galerisi yerleştirilebilir ve bunların her biri herhangi bir sayıda resim içerebilir.

LightBox kütüphanesinin önceki sürümü, üçüncü taraf kütüphaneler kullanılmadan uygulandı. Animasyon yoktur ve birden fazla bağlantılı görüntüyü görüntülemenin bir yolu yoktur.

GÜNCELLEME 2014-02-14

Altı ay önce fotoğrafları görüntülemek için bir komut dosyası paylaştığımı hatırlıyor musunuz? Ayrıca az kilolu olması, hızlı çalışması ve genel olarak yakışıklı olmasıyla da övündüm. Durumun gerçekten böyle olup olmadığı ancak dışarıdan değerlendirilebilir, ancak size senaryo lehine birkaç neden daha vereceğim. Bugün dikkatinize geliştirilmiş versiyonunu sunuyorum - quickBox 0.2.

Herkesten biraz daha fazlası, geleneksel norm haline gelen senaryoları kullanıyor. Bir yerde yakınlaştırma komut dosyası varsa, bu vakaların yarısında olur İnce Kutu veya Hafif kutu. Bunun için gereken 6 dosya yerine Hafif kutu, senaryom yalnızca iki tane gerektiriyor: bir CSS ve bir JS. Çalışması için resim gerektirmez ve fotoğrafları ekranda göstermeden önce önceden yükler ve 6,5 KB ağırlığındadır.

İşte ana özellikleri:

• grafik yok, her şey üzerine inşa edildi HTML+CSS
• Çalışmak için iki dosya gerekir +
• sol ve sağ okların ve Esc düğmesinin kontrolü (hem Win hem de MacOS'ta çalışır). Fotoğrafı büyüttükten sonra klavyedeki imlece basarak sonraki veya önceki fotoğrafa geçebilir, pencereyi kapatmak için Esc tuşuna veya sağ üstteki “Kapat” bağlantısına basabilirsiniz.
• otomatik galeri oluşturma: büyütülmüş görüntüleme için açmak istediğiniz sayfada birden fazla fotoğraf varsa, komut dosyası otomatik olarak bir galeri oluşturacak ve sol üstte resimlerin bir listesini görüntüleyecektir. Ne LightBox ne de SlimBox bunu yapamaz.
• Fotoğraflar için başlık özellikleri doldurulmuşsa, bunlar otomatik olarak her fotoğrafın altında açıklama olarak görüntülenecektir.
• komut dosyası jQuery'nin etkin olup olmadığını kontrol eder ve değilse yükler

Sizin için komik hale getireceğim ama pencerenin açılma tarzı dışında ilk versiyondan görsel olarak hiçbir farkı yok. İş yerindeki komut dosyası şuna benzer:

Komut dosyasını çalışırken görebilirsiniz.

Kurulum 1 dakika sürer. Dosyaları ftp aracılığıyla hostinginizdeki herhangi bir klasöre yüklemeniz gerekecektir.

Arşiv içeriğinin yüklenmesi kök klasör/js/. Belgenin başlığına kapanış etiketinin önüne aşağıdaki satırı ekleyin:

Jquery'yi etkinleştirmediyseniz şu adresten indirin: /jquery.js. Ve böylece komut dosyası fotoğraflarınızı işleyebilir. onlara şu özelliği eklemeniz gerekir: class='quickbox'. Örnek olarak işte 4 fotoğraf:

Script ücretsizdir, kullanın ve hayatın tadını çıkarın. Lütfen satmaya çalışmayın, sağduyunuzu ihlal etmeyin :-).

» Resim galerileri için PHP betikleri

Coppermine, çok yönlü, çok işlevli bir web resim galerisidir. PHP dili GD veya ImageMagick'in yanı sıra bir veritabanı kullanarak MySQL verileri.

| v.1.5.24 | İndirilen: kez

Mükemmel, basit fotoğraf galerisi komut dosyası. Bu Maian Galeri paketinde Tam Boyutlu görselleri açılan yeni bir pencerede görüntüleyin, otomatik olarak önizlemeler (küçük resim) oluşturun ve çok daha fazlasını yapın.

| v.2.0 | İndirilen: kez

KoschtIT Resim Galerisi ücretsiz ve açık kaynak(açık kaynak) PHP fotoğraf galerisi betiği. Program şunun için kullanılır: hızlı ekleme Mevcut bir web sitesi için PHP resim galerileri.

| v.3.1c | İndirilen: kez

Max'in PHP Fotoğraf Albümü basit, kullanımı kolay bir PHP Fotoğraf Albümü komut dosyasıdır. Resimleri sunucunuza yükleyebilir, fotoğraf dosyalarınıza bir başlık/başlık ve açıklama ekleyebilir, dosyaları bir parola ve diğer standart işlevlerle görüntülenmeye karşı koruyabilirsiniz. .

| v.1.0 | İndirilen: kez

MySQL veritabanı kullanılarak PHP ile yazılmış basit bir fotoğraf galerisi. Sadece fotoğraf dosyalarını yükleyin ve bunlar anında sitenizin ziyaretçilerine mümkün olan en iyi şekilde sunulur.

| v.2.0 | İndirilen: kez

Basit Galeri en çok hafif sistem PHP ile yazılmış, jQuery, MySQL ve GD Kütüphanesini kullanan resim galerisi yönetimi.

| v.1.3 | İndirilen: kez

Plogger, kodu düzenlemeye açık, temelde yeni nesil bir PHP resim galerisi betiğidir. PHP programı Gereksiz özelliklerle veya karmaşık kurulumlarla şişirilmemiş.

Görselleri değiştirmek için çok basit ve ilginç bir JavaScript kodunun çalışmasını test etmek için web sitemde böyle bir sayfa hazırladım.

Bu kodu kullanarak, bir web sitesi sayfasında herhangi bir web öğesi oluşturabilirsiniz: resim galerisi, resim görüntüleyici, fotoğraf galerisi vb.. Her neyse! Ona istediğiniz herhangi bir şey diyebilirsiniz; özü aynıdır. Bu hafif bir resim görüntüleyicidir.

Birkaç örnek var ve bunlar, her örneğin kendine ait olmasına rağmen, normal bir HTML tablosunda çalışan ve hatta (!) CSS katılımı OLMADAN çalışan 1. tür javascript kodu kullanılarak yapılmıştır!

Prim* Arka plan olarak, örn. Örneklerin her biri için "başlangıç" resmini tanımladım: Resim No. 1.

Önce en basit şeyler. Soldaki bağlantılara tıkladığınızda vurgulanan çerçevedeki resimler değişecektir.

İlk örnekte açıkça görebileceğiniz gibi sonuç, basit ve hızlı bir resim görüntüleyicidir. Her şey anında değişiyor!

Ayrıca tablonun kendisi de resimlerin boyutuna göre otomatik olarak ayarlanır.

Burada başka bir tane çalıştırmaya çalışıyorum. aynı işlev
Tek fark, 2 piksellik kenarlığı tablodan kaldırdım.

1. sayfada 2 özdeş betiğin nasıl çalışacağını kontrol etmek istedim.

Çalışıyorlar!
ANCAK! Vermek gerekli(!)

Bağlantı görsellerine tıklayarak görselleri değiştirmenin üçüncü örneği Burada bir tane daha başlatıyorum tamamen aynı işlev
Bağlantılara tıkladığınızda görselleri görüntüleyin.

Yalnızca bağlantıların adları yerine çok renkli resimler ekledim.
Aynı şekilde çalışıyor! VE! Unutma! Ayrıca vermeniz gerekiyor .

Bağlantı görsellerine tıklayarak görselleri değiştirmenin dördüncü örneği
Burada, önceki örnekte olduğu gibi, görsellerin bağlantısına tıklandığında görselleri görüntülemek için aynı işlevi başlatıyorum.

ANCAK! Burada alt satırı ekleyerek tabloyu değiştirdim, yani. bu bağlantı resimlerinin konumu değiştirildi.

ÖNEMLİ! Unutma(!) tablo satırlarını değiştir

Bağlantı görsellerine tıklayarak görselleri değiştirmenin beşinci örneği

Bu resim görüntüleyici örneği biraz özeldir. Bunu TOPLANAN GÖRÜNTÜLER'den derledim ve ilk "başlangıç" olanı 0 numaralı görüntüyü yaptı. Bağlantıların "düğmelerini" değiştirmedim, ancak bunları zaten diğer çizimler

ve özellikle ilginç olan (!), farklı boyutlarda. Ve bu örnekte her şey MÜKEMMEL çalışıyor! FAKAT! Kesinlikle gerekli .

bazı özellikleri dikkate alın

Özellikle önemli! Görüntülemek için bağlanan görüntülerin boyutu (genişliği). Benim durumumda ve ben "katı" bir düzen kullanıyorum, maksimum genişlik 772 pikselden fazla olmamalıdır. Aksi halde sayfa!

uzayacak Bu boyut, ana sarmalayıcının (#wrapper): max-width=800px genişliğini ayarladığım ve sitenin ana tablosunun (#content) girintilere sahip olması nedeniyle maksimumdur - öznitelik"hücre dolgusu"
, her iki tarafta 10 piksele eşit ve ek olarak 2 piksellik bir kenarlık.

Toplamda dolgu ve kenarlık şunu verir: 24 piksel. Bunun dikkate alınması gerekiyor!
Tekrar tekrar kontrol ettikten sonra (!), her iki tarafa da 2 piksellik ek kenar boşluğu vermenin gerekli(!) olduğunu öğrendim. Aksi halde sayfa yine de olacak

* * *
, biraz da olsa ama "pullanma"!

Resim görüntüleme kodu

Görüntüleyicinin javascript kodunun yukarıdaki örneklerinden de görebileceğiniz gibi, her şey mükemmel çalışıyor! Bütün çekiciliği çok küçük ve yazılı olmasıdır. bağlantı olmadan harici komut dosyaları veya kitaplıklar.

İşte burada - resim görüntüleme kodu. Yakışıklı!

function primimages1(a)(document.example1.src=a;)

Görüntüleyici işlevi başlatıldı her linkte aynı. Yalnızca değişiklikler resim adresi. Böyle bir çıktı komutunu yazma prensibi şuna benzer:

1 numaralı resmin bağlantısı

*Prim. Bu javascript kodunu test ederek denedim, farklı görüntü formatları. Her şey harika çalışıyor! Ancak(!), bir web sayfasının adresini koda girerseniz ÇALIŞMAZ!

Bu eğitici test sayfasında javascript kodunun böylesine ilginç bir fonksiyonunun yazımını ve yeteneklerini test ettim ve gösterdim.

Bana göre en basit, en hafif ve en hızlı resim görüntüleyiciyi oluşturmak için kullanılabilir.
Sanırım burada yeterince detaylı konuştum ve her şeyi açıkça gösterdim.

Ancak, o kadar basit olmasa da, aynı zamanda çok da başkaları da var. ilginç yollar Web sitenizdeki görsellerin görüntülenmesini düzenleyin.

Bunları kendi bölümlerinde görüntüleyebilir ve kontrol edebilirsiniz.
(yeni bir pencerede açılacaktır).

Ayrıca sekmeler oluşturarak web sitenizdeki görsellerin değişimini organize etmenin oldukça ilginç bir olasılığı da vardır. Bunun gibi: "Site için HTML+CSS Sekmeleri".

Peki, bir resim görüntüleyici daha var, ancak otomatik olan "JavaScript Slayt Gösterisi" bölümünde "yaşıyor".
Normal bir duruma dönüştürmek için BAŞLAT/DURDUR düğmesine basmanız yeterlidir.

Otomatik görüntüleyicilerden bahsettiğimiz ve sitemde gereğinden fazla sayıda bulunduğu için, bol miktarda bulunan "Slayt Gösterisi" bölümünü ziyaret etmeye değer. Orada "bunlarla dolu bir kutu" var!
Ve bu arada! Bağlantıda belirtilen sayfada her türlü slayt gösterisinin oluşturulması detaylı olarak yorumlandı.

JQuery kullanan LightBox'a harika bir alternatif.

IE6'yı destekler. Klavyeyi kullanarak gezinmek mümkündür: n düğmesi (sonraki) - sonraki resim; düğme p (önceki) - önceki.

Çeşitli formatları destekler: PDF, flv, swf, ses, HTML içeriği, çerçeve desteği.

Büyütülmüş görüntüleri açılır bir blokta görüntülemenize olanak tanıyan kompakt ve bağlanması kolay bir komut dosyası. Site Rusçadır.

Eklenti beş farklı tarzda uygulanmaktadır. Farklı tasarımlarla çalışırken görmek için 1'den 5'e kadar Örnekler bağlantılarını izleyin.

Lightbox ailesinden başka bir script. Hem görsel küçük resimlerini hem de tam boyutlu fotoğrafların görüntülenme stilini özelleştirmek mümkündür.

JQuery kullanarak fareyle üzerine gelindiğinde monokromdan renkliye yumuşak geçiş.

Bilgileri bir açılır pencerede çeşitli formatlarda görüntülemek mümkündür: tek görseller, galeri, medya dosyaları, formlar. Demo sayfası çeşitli içerik seçeneklerine bağlantılar içerir.

Ünlü LightBox eklentisine başka bir alternatif. Komut dosyasını çalışırken görmek için demo sayfasındaki resme tıklayın.

İnanılmaz pürüzsüz içerik değiştirme efekti. Açıklama sayfasında eklentinin tüm demo örneklerine bağlantılar bulacaksınız.

Tarayıcı penceresini yeniden boyutlandırdığınızda görüntünün boyutları değişir.

Prototip javascript kütüphanesini kullanır.

Kalıcı pencerelerde çeşitli içerikleri görüntüleyin.

Mootools kullanarak bilgilerin kalıcı pencerelerde görüntülenmesi: resimler, videolar, animasyonlar, sosyal Hizmetler ve benzeri.