Umut Keskin Yazdım, çizdim, paylaştım (:

17Oca/108

jQuery İle Göz Kırpan (Zoom özellikli) Resimler

Merhaba. jQuery ile kalp atışı şeklinde resim slayt gösterimi yapalım.

Öncelikle malzemelerimizi listeleyelim

Kullanım Şekli :
Önce stil dosyamızı oluşturalım

<style type="text/css">
#kalpatisi img{ display:none;}
#yeniresim{ margin:0}</style>

CSS stillerinde ikinci satır isteğe bağlı. Ben jQuery ile oluşturacağım resmin çevresine olan mesafesini sıfırlamak istedim, siz ister kullanırsınız ister kenarlık vs. eklersiniz, isterseniz silersiniz.
Sayfamızın <head> .. </head> etiketleri arasına yazacağımız JS koduna gelince:

<script src="http://blog.adressiz.net/jquery/jquery.kalpatisi.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#kalpatisi").ResimKalp({wd: '198'});
  });</script>

Yukarıdaki satırlarda wd: resimlerimizin genel genişliğini (enini) simgeliyor. "Width" attribute karşılığı yani.
Dikkat edilecek iki husus, tek tırnak içinde yazılması ve px eklenmemesidir. Sadece sayısal değerdir.

HTML kodlarınız da şu şekilde olabilir:

<div id="kalpatisi">
<img src="logo/01.png" alt="1.logo" width="198" height="120" />
<img src="logo/02.png" alt="2.logo" width="198" height="120" />
<img src="logo/03.png" alt="üç" width="198" height="120" />
<img src="logo/04.png" alt="four" width="198" height="120" />
<img src="logo/05.png" alt="hede" width="198" height="120" />
<img src="logo/05.png" alt="hede" width="198" height="120" />
<img src="logo/06.png" alt="hödö" width="198" height="120" />
<img src="logo/05.png" alt="hede" width="198" height="120" />
<!-- İstediğiniz kadar arttırabilirsiniz --></div>

Resimler için verdiğim boyutların sabit oluşu sizi yanıltmasın. Böyle bir zorunluluk yoktur.
Çalışan örnek:

1.logo2.logoüçfourhedehedehödöhede

Bu yazıyı beğendiniz mi?

RSS Kaynağımıza abone olun!

Hakkında Umut Keskin

Açıklama yok. Lütfen profilinizi tamamlayın.
Etiketler: , , , , , , , Yorum gönder.
Yorumlar (8) Geri izlemeler (0)
  1. codernemesis
    17 Şubat 2010, 01:35

    kardes yazılarının devamını beklıyoruz calısmalarında basarılar cok tesekkurler

  2. Umut Keskin
    03 Mart 2010, 07:34

    Rica ederim @codernemesis. İlgin için ben teşekkür ederim :)

  3. volkan
    07 Mayıs 2010, 19:10

    küzel çalışma olmuş eline sağlık ama ben uygulayamadım, yazdıkların dışınjda ekstra yapmammız gerekn bişler varmı??

  4. Umut Keskin
    08 Mayıs 2010, 14:15

    @volkan yazılanlar dışında başka yapılması gereken birşey yok. Uygulamada hangi noktada sıkıntı yaşadığınızı söylerseniz yardımcı olurum. Firefox’da deniyorsanız, hata konsolundan karşılaştığınız bir hata var mı diye kontrol edin. Varsa o hatayı giderelim. Şuan 2 sitede (buradaki açıklamaların aynısını kodlara döküp) kullanıyorum, sorun ile karşılaşmadım.

    <script src="http://blog.adressiz.net/jquery/jquery.kalpatisi.js"></script>

    bu satırın üzerinde jquery’yi çağırıyorsunuz değil mi?

  5. volkan
    09 Mayıs 2010, 01:51

    bi yerde bişileri eksik yapıyorum sanırım, ekrana hiç bi şeklide görüntü gelmiyor sanırm jquery’yi çağırmada bi sorun var.
    bu iki dosya değilmi yanlış mı indirdimacaba??

  6. volkan
    09 Mayıs 2010, 02:01

    kod gönderiminde bi karışıklık oldu sanırm
    kod:
    “js/cloud-carousel.1.0.1.js”
    “js/cloud-carousel.1.0.1.min.js”

  7. Umut Keskin
    10 Mayıs 2010, 00:03

    cloud-carousel modulünün bu kodlarla bir ilgisi yoktur.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://blog.adressiz.net/jquery/jquery.kalpatisi.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#kalpatisi").ResimKalp({wd: '198'});
  });</script>

    Bu kodlar head etiketleri arasına yazılacak. Body etiketleri arasına da;

    <div id="kalpatisi">
<img src="logo/01.png" alt="1.logo" width="198" height="120" />
<img src="logo/02.png" alt="2.logo" width="198" height="120" />
<img src="logo/03.png" alt="üç" width="198" height="120" />
</div>

    şeklinde kodlarınızı resim yollarını düzenleyerek yazacaksınız hepsi bu…

  8. volkan
    10 Mayıs 2010, 09:20

    pardon hocam yaa o gece bi kaç siteden araştırıyordumda dalgınlığa gelmiş sanırım doğru ilgisiz bi kod.


Yorum gönder.


Spam Protection by WP-SpamFree Plugin

Geri izleme yok.

Farmville Sihirli Araçlar – Farmville Magic Tools »

Yazara Katkı

Paylaş

Paylaş

En Çok Rağbet Görenler

Etiketler

attr fadeIn fadeOut farmville cheat farmville hileleri heartbeat image jQuery kalp atışı otomatik ekme resim slayt slide slideshow speedhack speedhacks farmville tab tabs