Home JQuery JQuery Slider Resim Galerisi Örneği
JQuery Slider Resim Galerisi Örneği

JQuery Slider Resim Galerisi Örneği

274
13

Yine sitenizde kullanabileceğiniz çok güzel bir paylaşımı yapacağım. İnternette sizler için araştırıp bulduğum bir çalışma. istediğiniz  gibi kullanabilirsiniz. Hiçbir ücret ödemeden çalışmasını  aşağıdaki linkten indirebilirsiniz. 

Biraz çalışmasını şeklini ve nasıl resim ekleyeceğinizi anlatayım.

Yapmanız gereken slides klasörü içinde yer alan resimleri değiştirip yerine yenilerini koyduktan sonra. Galeri.html dosyasını Dreamweaver veya not defteri ile açıp aşağıdaki satırları yeni koyduğunuz resim adlarıyla değiştirmeniz gerekiyor.

<div id="gallery">
<img src="slides/BarbedWire.jpg" alt="Barbed Wire" />
<img src="slides/Feather.jpg" alt="Feather" />
<img src="slides/DriftStuff.jpg" alt="Drift Stuff" />
<img src="slides/Driftwood.jpg" alt="Driftwood" />
<img src="slides/DriftwoodGuy.jpg" alt="Driftwood and Guy" />
<img src="slides/GrassLight.jpg" alt="Grass and Light" />
<img src="slides/PebbleAndShells.jpg" alt="Pebble and Shells" />
<img src="slides/StickSea.jpg" alt="Stick and Sea" />
<img src="slides/SeaweedGasmask.jpg" alt="Seaweed Gasmask" />
<img src="slides/Surfers.jpg" alt="Surfers" />
</div>

Yukarıdaki kırmızı ile olan kısımlara resimlerin adlarını uzantılarıyla birlikte yazarak değiştiriyorsunuz. Mavi kısımlar ise mouse resmin üzerine geldiğinde resmin altında çıkan açıklama satırıdır. Orayı da istediğiniz şekilde değiştirebilirsiniz. Çok basit ve kullanışlı bir jquery resim galeri çalışmasıdır. İnşallah beğenirsiniz. Kolay gelsin.

DemoButton
hemen-indir-butonu

(274)

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(13)

  1. slm slider güzel olmuş elinize sağlık. bende kendime göre düzenledim ama bunu siteye nasıl monte edeceğim konusunda yardımcı olur musun? tşkler

  2. bunu kendi web sayfamda kullansam demo olduqu için ilerde herhanqi bi sorun olusuyormu ?

  3. Merhaba , teşekkürler güzel paylaşımlarınız için . Benim bu konularda pek bilgim yok . Deneme yanılma yolu ile çözüme ulaşmaya çalışıyorum . Yukarıda dediklerini uyguladım hatta resimleri değiştirmedim bile siteye code alanına koydum . Siteye giriş yaptığımda sadece siyah ekran yükleniyor yazısı çıkıyor . Nerede sıkıntı var ? orj. resimler görünmüyor .

    1. Furkan arkadaşım, Hiç değişiklik yapmadan buradakini çalıştırdığında nasıl oluyor. Buradaki dahi çalışmıyor mu yani? eğer çalışıyorsa, resim uzantılarını koymuyor veya resim uzantılarını yazmıyor olabilirsin.

      1. Dosyayı masaüstüne koydum . sonra siteye ekledim hiçbirşey değiştirmeden sadece yükleniyor yazısı çıkıyor . Çağrışımını masaütüne göre nasıl değiştirebilirim sıkıntı orada sanırım .
        burada slides dosyasında görünüyor . yola Desktop\jquery-slider-resim-galerisi\slides\ ekledim çıkmıyor . Ne yapmamı önerirsiniz ? kesin yanlış veya eksik yapıyorum dur .

        1. Ben birde sadece dosya içindeki galerinin içerside ki scripti alıyorum jquery.jswipe-0.1.2 bunu hiç ellemiyorum birleştirmem mi gerekiyor acaba 🙂

  4. Tamamdır şuanda bilgisayarımın içindekini değil yanlız bir sitedeki .jpg uzantısı ile resim koyduğumda çalışır duruma geldi

    1. Furkan arkadaşım eğer burdaki senin bilgisayarında çalışıyorsa, demek ki sorun senin yaptığın işlemlerde değil mi 🙂 ? yani bu şekilde çözmen lazım.

      1. Aynen ,omerbozalan sıkıntımı çözdüm . teşekkür ederim ilgilendiğin için 🙂
        Siteni takip ediyorum ..

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.