portfolio image navigation

Bir sitemde beğenerek  kulandığım Codrops ekibinin hazırladığı Portfolio Image Navigation with jQuery fotograf galerisini daha rahat bir şekilde kullanama fikriyle  kodlamaya başladığım foto galeri uygulamasını sizlerle paylaşmak istedim .

Orijinal  versiyon demo:http://tympanus.net/Tutorials/PortfolioImageNavigation/

Normal şartlarda bu galeriyi kendi sitenizde kullanmak istediğinizde resimleri uygun boyutlara getirmeniz, resimleri sitenize ftp ile yüklemeniz ve fotogaleri index sayfasının html kodlarını düzenlemeniz gerekmekte.Bu işlerde bilgisi az olan biri için yeteri kadar zor ve uğraştırıcı bir durum.

Yazdığım uygulama ile bu galeriyi kullanmak gayet kolay bir hale geliyor.Kurulumu ile anlatmaya başlıyayım.

[box type="download"]FotoGaleri[/box]

Yukarıdaki  linkten fofoGaleri dosyasını indirin.indirdiğiniz zip dosyasının içindeki tüm dosyaları sitenizde foto galerinin gözükmesini istediğiniz yere yükleyin.www.siteniz.com/galeri şeklinde gözükmesi için sitenizin ana dizininde galeri isminde bir klasör açın ve dosyaları o klasöre yükleyin.

Burada önemli olan şey foto galeriyi  yüklediğiniz dizinin sahibi ve grubu için yazma  iznine sahip olması gerekiyor bunun için dosya izinlerini 0775 şeklinde ayarlayabilirsiniz.(Nasıl yapılacağına dair bu yazımı inceleyebilirsiniz.).Kurulum işlemi  bu  kadar.

Şimdi  galerinin ayarlarını yapmak ve resim yüklemek için sitenizde galeriyi yüklediğiniz dizini açın(www.siteniz.com/galeri).İlk açılışta karşınıza şeyle bir ekran gelecek:

Şifre olarak  123456 yazıp Doğrula dediğinize karşınıza galerinin ayar sayfası gelecek ilk  seferde şifre değiştirmeniz gerekmektedir.

Yeni şifre belirledikten sonra artık fotoğraf yükleme işlemine gelebiliriz.

Fotoğraf yüklemek çok basit üstteki resimde gördüğünüz  gibi ekle butonuna tıklayıp resminizi seçmek dışında uğraşmanız gereken herhangi bir şey yok.Fotoğrafınız yüklenip otomatik olarak boyutlandırılacak ve galerinizdeki yerini alacak. Bu şekilde yan yana 10 tane fotoğraf ekleyebilirsiniz.

Eklediğiniz bir resmi silmek yada bir başka bir fotoğrafla değiştirmek için yapmanız gereken sadece değiştirmek yada silmek istediğiniz fotoğrafın üstüne gelip uygun butona basmanız.

[box type="info"]İlgilenenler için github linki: https://github.com/sametatabasch/Foto-galeri [/box]

Karşılaştığınız hataları bana bildirmekten çekinmeyin 🙂

Devam