Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, izleyicilere HTML, CSS ve jQuery kullanarak basit bir lightbox fotoğraf galerisi oluşturma sürecini adım adım göstermektedir.
- Video, Lightbox adlı basit bir fotoğraf galerisi kütüphanesinin nasıl kullanılacağını anlatmaktadır. İçerikte önce Lightbox'ın GitHub sayfasından indirilmesi, Visual Studio Code'da HTML, CSS ve JavaScript dosyalarının oluşturulması, jQuery'nin indirilmesi ve tüm dosyaların bir HTML sayfasına entegre edilmesi gösterilmektedir. Daha sonra galerinin stillendirilmesi, resimlerin boyutlandırılması ve galerinin açılması ile resimlerin arasında geçiş yapılması anlatılmaktadır.
- Videoda ayrıca galerinin üç resim arasında navigasyon yapabilmesi için gerekli ikonların (prev, next, close, loading) nasıl dahil edileceği de açıklanmaktadır. Bu içerik, en küçük ve en basit şekliyle bir lightbox galerisinin nasıl sitenize entegre edilebileceğini göstermektedir.
- 00:07Lightbox Foto Galeri Tanıtımı
- HTML ve CSS yapısında foto galerileri kullanmak gerekiyor ve en basitinden en kompleks yapısına kadar fotoğraf galerileri üzerine odaklanılacak.
- Lightbox photo galeri, en basit galeri türlerinden biridir ve resimlere tıklandığında başlık ve kaçıncı imaj dosyası olduğu bilgisi gösteren bir yapı sunar.
- Lightbox'ı npm kullanarak yükleyebilir veya GitHub sayfasından indirerek HTML ve CSS sitemize entegre edebiliriz.
- 01:30Lightbox'ı Sitemize Entegre Etme
- GitHub'dan indirilen Lightbox klasörünün içindeki "examples" klasörü, farklı galeri uygulamaları örneği sunar.
- Visual Studio Code'da yeni bir proje oluşturup, Lightbox'in "src" klasöründeki "css", "images" ve "js" klasörlerini projemize kopyalayacağız.
- Lightbox jQuery ile çalıştığı için, jQuery'yi indirip projemizin "js" klasörüne eklememiz gerekiyor.
- 04:48HTML ve CSS Yapılandırması
- HTML dosyasında önce Lightbox CSS dosyasını ve kendi stil dosyamızı "link" etiketiyle dahil ediyoruz.
- JavaScript dosyalarını "body" etiketinin hemen öncesine "script" etiketiyle dahil ediyoruz.
- Sayfaya açıklayıcı bir bölüm ekleyip, CSS ile stillendiriyoruz.
- 07:50Galeri Oluşturma
- Lightbox'ın "examples" klasöründeki "single image" örneğini kopyalayıp sayfamıza yapıştırıyoruz.
- Resimlere tıklandığında galeri açılıyor ve belirtilen başlık görüntüleniyor.
- Birden fazla resim eklemek için aynı kodu kopyalayıp yapıştırıp, resim kaynaklarını ve başlıkları değiştiriyoruz.
- 10:26Küçük Resimler Kullanımı
- Küçük resimler kullanmak için "a" etiketindeki yazı yerine "img" etiketiyle resim eklememiz gerekiyor.
- Resimlerin boyutunu ayarlamak için "class" kullanarak CSS ile stillendirme yapabiliriz.
- 11:31Lightbox Galeri Yapısı
- Resim boyutu 200px olarak ayarlandığında, tıklanıldığında küçük hale gelerek galeri açılıyor.
- Galeri içinde resimler arasında geçiş yapılabiliyor ve herhangi bir sıkıntı yaşanmıyor.
- Diğer resimler için de aynı işlem uygulanarak galeriye entegre edilebiliyor.
- 12:20Lightbox Galerisinin Çalışması
- Galeri düzgün bir şekilde çalışıyor ve lightbox özelliği tıklanıldığında sorunsuz çalışıyor.
- Lightbox'ın çalışması için jQuery eklenmesi gerekiyor, aksi takdirde çalışmıyor.
- İkonları kullanabilmek için "close", "loading", "next", "prev" gibi dosyaların galeriye dahil edilmesi gerekiyor.
- 13:16Galerin Özeti
- En küçük ve en basit şekliyle bir lightbox galerisi bu şekilde sitenize entegre edilebilir.
- Galeri basit, kullanışlı ve yapılabilir bir yapıya sahip.