17 Aralık 2012 Pazartesi

Minimal Yatay Slayt Eklentisi

40 yorum

Görüntüsü ve işlevselliği ile blogunuza renk katacağını düşündüğüm bir galeri eklentisini paylaşmak istiyorum.

 

yatay-minimal-foto-galeri-eklentisi

Bu fotoğraf galerisi eklentisi Jquery kullanılarak oluşturulmuş ve minimal bir tasarıma sahip. Yatay bir eklenti olduğu için ben blogun en altında eklenmesini uygun gördüm ama siz isterseniz ana sayfada veya diğer sayfalarda istediğiniz başka bir yere de ekleyebilirsiniz.

 

Galerinin sağında ve solunda bulunan navigasyon okları sayesinde resimler arasında geçiş yapabiliyorsunuz. Bu da galeriye onlarca resim ekleyebileceğiniz anlamına gelir. 5 resimlik yere onlarca hatta yüzlerce resim ekleyebilme imkanı sunduğu için oldukça kullanışlı bir eklenti. Nasıl çalıştığını görmek için aşağıdaki videoyu izleyebilirsiniz.

 

 

Blogunuza eklemek için Şablon > HTML’yi Düzenle > Devam Et yolunu izleyin ve Ctrl + F tuş kombinasyonunun yardımıyla  </head> kodunu bulun. Hemen üzerine şu kodları ekleyin.

 

<link href='https://drive.google.com/file/d/0BxxMpDce-fNUWE9QbU16SEw5dk0' rel='stylesheet' type='text/css'/>
        <script src='http://yourjavascript.com/51634122329/modernizr-custom-17475.js'/>

 

ikinci olarak yine şablondan </body> kodunu bulun ve hemen üzerine şu kodları ekleyin.

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/45266829114/jquerypp-custom.js' type='text/javascript'/>
<script src='http://yourjavascript.com/31490241631/jquery-elastislide.js' type='text/javascript'/>
<script type='text/javascript'>
           
            $( &#39;#carousel&#39; ).elastislide();
           
        </script>

 

Somn olarak Yerleşim sekmesini açın ve burada Blog Kayıtlarının altındaki yatay Gadget ekleme yerine HTML/JavaScript olarak şu kodları ekleyin.

 

<!-- Blog Hocam Minimal Yatay Foto Galeri Eklentisi -->
                <ul id="carousel" class="elastislide-list">
                    <li><a href="#"><img src="https://lh4.googleusercontent.com/-C9sahF3BfuE/VCUfznuMoPI/AAAAAAAALGg/gqPoDy5_IG8/s160/1.jpg" alt="image01" /></a></li>
                    <li><a href="#"><img src="https://lh4.googleusercontent.com/-UkXLzAHXHMo/VCUfzwyL_GI/AAAAAAAALFs/kIE_8CZFfb8/s160/2.jpg" alt="image02" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-uwlbIeI1Stk/VCUfz3jgrsI/AAAAAAAALGY/RIjxaIs1oDM/s160/3.jpg" alt="image03" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-aoo41PfIWh4/VCUf0P-vZ7I/AAAAAAAALGk/cc8Faeuc5J8/s160/4.jpg" alt="image04" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-JntslJpTBvg/VCUf0rCPwnI/AAAAAAAALGU/w-HdEQWzMms/s160/5.jpg" alt="image05" /></a></li>
                    <li><a href="#"><img src="https://lh4.googleusercontent.com/-VCoexcTxofk/VCUf0nXYaII/AAAAAAAALF8/zKkQKmHVoeE/s160/6.jpg" alt="image06" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-v0SLLHKw6W8/VCUf1BulSMI/AAAAAAAALGI/UIi1tjNBKXc/s160/7.jpg" alt="image07" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-B7KY_6Qasn4/VCUf1KdzQ2I/AAAAAAAALGM/lrIU4DH2FRU/s160/8.jpg" alt="image08" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-ulL8EzC2geM/VCUf1fUCoxI/AAAAAAAALGQ/aemUga40dTo/s160/9.jpg" alt="image09" /></a></li>
                    <li><a href="#"><img src="https://lh4.googleusercontent.com/-MSaruWqOepQ/VCUhfKqacbI/AAAAAAAALH4/bPbcJ7EobpM/s160/10.jpg" alt="image10" /></a></li>
                    <li><a href="#"><img src="https://lh6.googleusercontent.com/-WQVtJIPWqT4/VCUhfIg0EzI/AAAAAAAALHw/E0iv6TLI7uY/s160/11.jpg" alt="image11" /></a></li>
                    <li><a href="#"><img src="https://lh6.googleusercontent.com/-PHM6gP17UHw/VCUhfG9ovMI/AAAAAAAALHs/keJMRtQLLZQ/s160/12.jpg" alt="image12" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-8n_21E8-gig/VCUhfjt_i3I/AAAAAAAALHo/zrkMc7qxoDg/s160/13.jpg" alt="image13" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-KtUaV_vvm2s/VCUhf4UEF2I/AAAAAAAALHk/BmWuWyTHwvc/s160/14.jpg" alt="image14" /></a></li>
                    <li><a href="#"><img src="https://lh4.googleusercontent.com/-pdZhjFnvTEk/VCUhgDtiLrI/AAAAAAAALHg/NULU7B5BPog/s160/15.jpg" alt="image15" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-AAAvTTfk6ZY/VCUhgewglPI/AAAAAAAALHI/0tGFindDNJQ/s160/16.jpg" alt="image16" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-WShE-Q4qL78/VCUhgpSxzSI/AAAAAAAALHU/Zj5k0wyz0iM/s160/17.jpg" alt="image17" /></a></li>
                    <li><a href="#"><img src="https://lh4.googleusercontent.com/-ZpAJ0zW9IIc/VCUhg97nFZI/AAAAAAAALHY/5aXLdpoL5tc/s160/18.jpg" alt="image18" /></a></li>
                    <li><a href="#"><img src="https://lh6.googleusercontent.com/-nfFkqfqOV8w/VCUhhGLQaEI/AAAAAAAALHc/PKJTQhqzWgY/s160/19.jpg" alt="image19" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-zjEu7mQf9kg/VCUiv4nM8wI/AAAAAAAALIE/M25B62sz3Ns/s160/20.jpg" alt="image20" /></a></li>
                </ul>
                <!-- Blog Hocam Minimal Yatay Foto Galeri Eklentisi -->

 

  • Galeride göstermek istediğiniz resimlerin URL’lerini benim yazdığım .jpg uzantılı URL’lerle değiştirin.
  • Resme tıklayınca açılmasını istediğiniz sayfaları # işaretinin olduğu yerlere yazacaksınız.
  • alt="image01-20” olarak gördüğünüz yerlere ise resim hakkında bir tanım metni yazın.

 

Eklentiyi eklerken takıldığınız bir yer olursa yorum bölümünden sorabilirsiniz. Blogunuzun kenar çubuğunda kullanmanız için bu eklentinin dikey versiyonunu da yakında paylaşacağım.

40 yorum:

  1. bunu soldan sağa otomatik nasıl kaydırabiliriz?

    YanıtlaSil
  2. @Bahadır Çelik
    Twitter akışında kullandığımız jquery marquee scriptiyle bunu entegre ederek yapabilirsin.

    YanıtlaSil
  3. teşekkürler ekledim ama rersimler küçük kaldı ve boyutları farklı oldu ne yapmalıyım
    http://kucukmutluluklardukkani.blogspot.com/

    YanıtlaSil
  4. @başak pdr
    Resimleri eklemeden önce boyutlandırmak gerektiğini yazmayı unutmuşum :)

    YanıtlaSil
  5. kayıt eklerken boyutlandırıyoruz geniş orjinal diye oradan mı yok sa bir resim düzenleme sitesinden mi yapmalıyım

    YanıtlaSil
  6. Hayır, öncelikle resimlerinizi Gimp, Photoshop veya Picmonkey gibi bir düzenleme aracıyla boyutlandırın. Daha sonra Picasa veya başka bir depolama alanına upload edin. Upload ettiğiniz resimlerin URL'sini benimkilerle değiştirin.

    YanıtlaSil
  7. hocam çalışan örneği bu sayfada neden göremiyoruz?

    YanıtlaSil
  8. @ihtiyar
    Ben bloguma eklemediğim için göremiyorsunuz.

    YanıtlaSil
  9. Hocam ellerine sağlık. Çok güzel oldu. Amma fakat lakin alt="image01-20” kısmına resim için yazdığım tanımlar gözükmemekte. okuduğum yorumlardan anlaşılıyor ki bu sorunu yaşayan sadece benim.

    Bu konuda bi fikriniz veyahut bir öneriniz olabilecek mi şahsıma... Teşekkürler...

    YanıtlaSil
  10. hocam resim url si dediğinizi nereden bulabilirim.

    YanıtlaSil
  11. hocam dropbox yükledim oradan resim bilgisinden url buldum.fakat blogumda arka fon siyah çıktı neden olabilir

    YanıtlaSil
  12. @Caramba CARAMBİTA
    lt kısmına yazdığınız tanım resmin bir yerinde gözükmez. Arama motorlarına resmin ne hakkında olduğunu bildirmek için kullanılır. Böylece görsel aramalarda resminiz gözükür.

    @annelikokulum
    Resim URL'si olarak ne yazdığınızı söylerseniz yardımcı olmaya çalışacağım.

    YanıtlaSil
  13. hocam bir de bu uygulamadan sonra sağ üstteki açılır kapanır face-twit-google tuşlarım çalışmaz oldu.

    YanıtlaSil
  14. https://photos-2.dropbox.com/t/0/AACNHNNeqenBWvkxCEuJX_xrWZ7aBULFuBZn9MJ767sw6Q/10/129636692/jpeg/320x320/1/_/0/4/yilbasi-susu-plastik-kapak-ile-%20%281%29.jpg/gm1uwq2g1ne7j70/IZ8rLwsWCg/yilbasi-susu-plastik-kapak-ile-%20%281%29.jpg

    YanıtlaSil
  15. Birden fazla jquery uygulaması eklemek eklentilerde çakışmalara yol açabilir. Şu koddan 2 tane olmuştur, birini kaldırmayı deneyin

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

    YanıtlaSil
  16. hocam şablondan hepsini kaldırdım yeniden yapacağım bakalım.

    YanıtlaSil
  17. işte bu süper bir paylaşım çok tşk ederim

    YanıtlaSil
  18. boyutları ayarlana bilseydi iyi olurdu aslında birde slayt alanı olan bir temaya eklenince diğer slayt resimleri iptal oluyor gözükmü yor neden

    YanıtlaSil
  19. @ibrahim firat
    Jquery scriptler çakıştığı için çalışmayabilir. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> kodunu kaldırmayı dene.

    YanıtlaSil
  20. evet hocam büyük ihtimal çakışmalar yüzünden deniyeceğim birde boyutları ayarlanabilse çok ii olurdu biraz kaba gibi geldi bana

    YanıtlaSil
  21. bu sefer oldu ama kodu kaldırınca ama slayt hareket etmiyor simdi de

    YanıtlaSil
  22. bu sitede denedim ama dediğim gibi slyat alanı hareket etmiyor o kodu kaldırdım yardımcı olursanız sevinirm http://world34.blogspot.com/

    YanıtlaSil
  23. anlatmıssında kodları nere eklencenden bahsetmemissin o kodlar nere eklencek

    YanıtlaSil
  24. Güzel eklenti ve hiç kasmadan çalışıyor.
    Lakin arka plandan dolayı hiçbirşey seçilmiyor. İleri geri butonları zor seçiliyor hatta hiç gözükmüyor. Resimlerin dışındaki alan, yani o beyaz çerçeve transparan olsa belki daha hoş görünecek.

    Admin bununla ilgili yardımcı olabilir misin?

    YanıtlaSil
  25. Teşekkürler paylaşım için.

    YanıtlaSil
  26. bu kodları uygulayınca 7 resim çıktı. kaydırma tuşuna basınca kaydı fakat resimler görülmedi. resim url lerrini değiştirdim fakat yine olmadı.

    http://japonca-deneme01.blogspot.com

    doğru yaptığımı düşünüyorum dünden beri bir çok defa denedim ama olmadı.

    yapanlar nasıl yaptı? allah rızası için bi açıklama:)

    YanıtlaSil
  27. Merhaba, slide'a eklediğim fotoğrafların orjinal boyutları büyük olmasına rağmen, blogumun altındaki fotolar küçük boyutta. Boyutları nasıl ayarlayabilirim?
    Teşekkürler

    YanıtlaSil
  28. @Cangumus
    Slidera sığması için fotoğraflar otomatik boyutlandırılıyor script tarafından.

    YanıtlaSil
  29. Merhaba,

    Güzel paylaşım için teşekkürler. Bu slaytı sadece ana sayfada göstermek mümkün müdür hocam?

    YanıtlaSil
  30. @burak özyürek
    Evet mümkün. Slaytın HTML kodlarının başına şu kodu:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

    sonuna ise şu kodu eleyin.

    </b:if>

    YanıtlaSil
  31. Hocam bir sorum daha olacak...

    Bunu otomatik hale getirebilir miyiz? Yani fotoğraflar, manşet eklentileri gibi hareket edebilir mi?

    YanıtlaSil
  32. Jquery marquee scripti ekleyerek yapılabilir.

    YanıtlaSil
  33. kodlardaki linkler ölü gibi hocam ama genede çalışır mı acaba

    YanıtlaSil
  34. @Öncü Hafriyat
    Ölü derken? Dosyaların hepsi kendi dropbox hesabımda. Ben silmediğim sürece silinmez.

    YanıtlaSil
  35. Merhabalar,öncelikle teşekkürler çok güzel bir bilgi.Ben Yaptım ama Resimler alt alta oldu onları yan yana ve otomatik şeklinde geçiş için ne yapabilirim.teşekkürler

    YanıtlaSil
  36. Bu bilgi için çok teşekkür ederim öncelikle. Az önce dediklerinizi yaptım ancak yatay yerine dikey oldu. Nerede yanlışlık yapmış olabilirim. Bir de ekranı kaplıyor ve ekranı aşağıya indirsem bile hala ekranda kalıyor. Yardımcı olursanız çokmutlu olurum ?

    YanıtlaSil

Picardes

LİNKLER