Home JQuery JQuery “Fotoğraf Duvarı” | Fotoğraf Albüm
JQuery “Fotoğraf Duvarı” | Fotoğraf Albüm

JQuery “Fotoğraf Duvarı” | Fotoğraf Albüm

397
9

Merhaba Arkadaşlar ,

Jquery fotoğraf albümlerinden baya bahsetmiştik şimdi ise size jquery’nin “photowall” tarzı fotoğraf galerisinden bahsedeceğim. Kullanımı diğerleri gibi basit ve bütün browserlar tarafından destekleniyor. Sitenizde istediğiniz gibi kullanabilirsiniz. 

Aşağıdaki indirme linkine tıkladığınızda jquery fotoğraf albümünü bilgisayarınıza indirmiş olacaksınız. İndirdiğiniz Rar lı dosyanın içinde 3 klasör bulunmaktadır. css klasörünün içindeki css dosyasını css’ ten anlayan arkadaşlar yeniden düzenleyebilirler. İmages klasörünün içine resmimizin büyük halini. Thumbs klasörünün içine ise resmimizin 75x75boyutlarında” veya sizin belirlediğinizi bir boyutta olması uygundur ama hepsi belirlediğiniz boyutta olsun.” yerleştiriyorsunuz. Sonrasında ise index.html dosyasını dreamweaver veya herhangi bir editör programıyla düzenlemeye koyuluyorsunuz. Aşağıda index.html dosyasının bir bölümü anlatılmıştır.

<div id="thumbsWrapper">
<div id="content" >
<img src="thumbs/1.jpg" alt="images/1.jpg" title="Nuria_01"/>
<img src="thumbs/2.jpg" alt="images/2.jpg" title="Nuria_09 "/>
<img src="thumbs/3.jpg" alt="images/3.jpg" title="Nuria_08 "/>
<img src="thumbs/1.jpg" alt="images/1.jpg" title="Nuria_01"/>
<img src="thumbs/2.jpg" alt="images/2.jpg" title="Nuria_09 "/>
<img src="thumbs/3.jpg" alt="images/3.jpg" title="Nuria_08 "/>
<img src="thumbs/1.jpg" alt="images/1.jpg" title="Nuria_01"/>
<img src="thumbs/2.jpg" alt="images/2.jpg" title="Nuria_09 "/>
<img src="thumbs/3.jpg" alt="images/3.jpg" title="Nuria_08 "/>

.

.

Yukarıdaki html kodlarını değiştirerek resimlerinizi görüntüleyebilirsiniz. Yukarıda bahsettiğimiz gibi resimleri belirtilen klasörlerin içine attıktan sonra resim isimlerini index.html dosyasından düzenlemekle olacaktır. Yukarıdaki title kısmı ise o resmin altında görünen yazıdır.

Örneğin; omerveyegeni.jpg dosyasını şu şekilde düzenliyorsunuz.

<img src="thumbs/omerveyegeni.jpg" alt="images/omerveyegeni.jpg" title="Yeğenimle birlikte"/>

bu şekilde istediğiniz kadar resmi albüme koyabilirsiniz. Kolay gelsin.

 

 

DemoButton
hemen-indir-butonu

(397)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(9)

  1. hocam teşekkürler elinize emeğinize sağlık olmuş gerçi siz yaparsınız da olmaz mı 🙂
    not: sizi takip deyim

  2. Ellerinize sağlık hocam .Bu işe merek Saldım Sizin yardımlarınızla inşallah güzel işler ortaya koyacam.

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.