jQuery Başlıklı Resim Galerisi – Haber Manşetleri 0

Bu jQuery uygulaması benim çok hoşuma gitti. Zaten çok tercih edilen ve fazla temaları bulunan en önemli jquery slider’lerden bir tanesi. Şimdi bu jQuery Slider uygulamasını inceleyeceğiz.

https://4.bp.blogspot.com/-JDhQp0zo0hw/TzBfP-tqySI/AAAAAAAAD9I/x4Cz7VOCgzo/s1600/jquery+haber+man%25C5%259Fetleri.JPG

Galleria jQuery Slider

Öncelikle söylemem gereken bir şey var bu jQuery Galleria para ile satılıyor ancak yapımcısı ücretsiz versiyonunuda yapıp yayınlamış. Yani paralı sanıp ücretsizi unutmayın.

Flickr, Picasa ve kendi uploadlarınız olarak 3 farklı eklenti seçeneği sunulmuş. Ben herkez gibi Flickr tavsiye ediceğim. 🙂

classic-demo.html dosyası


Galleria Classic Theme

<!-- load jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- load Galleria --><script type="text/javascript" src="../../galleria-1.2.6.min.js"></script></pre>
<div>
<h1>Galleria Classic Theme</h1>
Demonstrating a basic gallery example.

<!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->
<div id="galleria"><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/800px-Locomotives-Roundhouse2.jpg">
<img title="Locomotives Roundhouse" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/100px-Locomotives-Roundhouse2.jpg" alt="Steam locomotives of the Chicago & North Western Railway." />
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Icebergs_in_the_High_Arctic_-_20050907.jpg/1000px-Icebergs_in_the_High_Arctic_-_20050907.jpg">
<img title="Icebergs in the High Arctic" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Icebergs_in_the_High_Arctic_-_20050907.jpg/100px-Icebergs_in_the_High_Arctic_-_20050907.jpg" alt="”The debris loading isn't particularly extensive, but the color is usual.”" />
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg/1000px-Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg">
<img title="Araña" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg/100px-Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg" alt="Xysticus cristatus, A Estrada, Galicia, Spain" />
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg/1000px-9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg">
<img title="Museo storia naturale" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg/100px-9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg" alt="" />
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.jpg/1000px-Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.jpg">
<img title="Grjótagjá caves in summer 2009" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.jpg/100px-Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.jpg" alt="" />
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg/1000px-20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg">
<img title="Thermes" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg/100px-20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg" alt="Xanthi hot-spa springs, Xanthi Prefecture, Greece" />
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Polish_Army_Ko%C5%82obrzeg_077.JPG/1024px-Polish_Army_Ko%C5%82obrzeg_077.JPG">
<img title="Polish Army Kołobrzeg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Polish_Army_Ko%C5%82obrzeg_077.JPG/100px-Polish_Army_Ko%C5%82obrzeg_077.JPG" alt="A display of the Polish Army. Both the soldier, and the vehicle belong to the 7th Pomeranian Coastal Defence Brigade, a part of the Szczecin-based 12th Mechanized Division ”Bolesław Krzywousty”" />
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/20100213_Zlatograd_Bulgaria_3.jpg/1024px-20100213_Zlatograd_Bulgaria_3.jpg">
<img title="Zlatograd Bulgaria" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/20100213_Zlatograd_Bulgaria_3.jpg/100px-20100213_Zlatograd_Bulgaria_3.jpg" alt="" />
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg/1024px-FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg">
<img title="09-28-2001 in New York City" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg/100px-FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg" alt="New York, NY, September 28, 2001 -- Debris on surrounding roofs at the site of the World Trade Center. Photo by Andrea Booher/ FEMA News Photo" />
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Antennae%2C_Hubble_images.jpg/1024px-Antennae%2C_Hubble_images.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Antennae%2C_Hubble_images.jpg/100px-Antennae%2C_Hubble_images.jpg" alt="" />
</a></div>
Made by <a href="http://galleria.aino.se">Galleria</a>.</div>
<pre>
<script type="text/javascript">// <![CDATA[
// Load the classic theme
Galleria.loadTheme('galleria.classic.min.js');

// Initialize Galleria
$('#galleria').galleria();
// ]]></script>

Yukarıdaki kodlara göre resimler şu şekilde listeleniyor;

<div id="galleria"><a href="Resime tıklandığında giriceği URL">
<img title="resim başlığı" src="Resim linki" alt="Resimin adı" />
</a></div>

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

ClassySocial: jQuery Harika Sosyal Profil eklentisi 0

jQuery ile yapılmış gerçekten harika bir sosyal profil eklentisi. Çok şık düşünülmüş şahsen kendi profil sitemi açarsam böyle bir plugin kullanabilirim. Bunun gibi daha önceden görmüştüm ancak ücretliydi bu ücretsiz.

https://2.bp.blogspot.com/-wyLrG7Df6r0/UV8kmi8oQ_I/AAAAAAAAQ5s/b8LBZJmcdSY/s1600/jquery-sosyal-profil.png

ClassySocial Demo

ClassySocial Kullanımı

HTML sayfama öncelikle Google CDN jQuery 1.8.3’ü çağırıyorum gel diyorum oraya yerleş.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Daha sonra eklentinin css ve js dosyalarını çağırıyoruz gel diyoruz buraya kodları yükle.

<script src="js/jquery.classysocial.js"></script>
<link rel="stylesheet" href="css/jquery.classysocial.css" />

Sonra div’imizi oluşturuyoruz alttaki gibi;

<div class="classysocial bubble" style="float:left" data-orientation="line" data-image-type="facebook" data-facebook-handle="picozu" data-socl-handle="marius-stanciu" data-twitter-handle="picozu_editor" data-email-handle="office@picozu.net" data-pinterest-handle="picozu" data-picture="picozu" data-instagram-handle="picozu" data-networks="socl,facebook,twitter,instagram,pinterest,email"><a class="main" title="Find Me Here" alt="Find Me Here"><img src="https://graph.facebook.com/picozu/picture?type=large" title="Find Me Here" alt="Find Me Here"></a><div class="network_holder"><a class="network_button socl" target="_blank" href="http://www.so.cl/#/profile/marius-stanciu" data-network="socl" style="display: block; left: 13px; top: 13px;">Socl</a><a class="network_button facebook" target="_blank" href="http://www.facebook.com/picozu" data-network="facebook" style="display: block; left: 13px; top: 13px;">Facebook</a><a class="network_button twitter" target="_blank" href="https://twitter.com/picozu_editor" data-network="twitter" style="display: block; left: 13px; top: 13px;">Twitter</a><a class="network_button instagram" target="_blank" href="http://instagram.com/picozu" data-network="instagram" style="display: block; left: 13px; top: 13px;">Instagram</a><a class="network_button pinterest" target="_blank" href="http://pinterest.com/picozu" data-network="pinterest" style="display: block; left: 13px; top: 13px;">Pinterest</a><a class="network_button email" target="_blank" href="mailto:office@picozu.net" data-network="email" style="display: block; left: 13px; top: 13px;">Email</a></div></div>

<div class="classysocial bubble" style="float:right" data-arc-length="360" data-image-type="facebook" data-picture="picozu" data-facebook-handle="picozu" data-google-handle="100585828531806464438" data-linkedin-handle="173413024" data-socl-handle="marius-stanciu" data-twitter-handle="picozu_editor" data-pinterest-handle="picozu" data-networks="socl,facebook,twitter,pinterest,linkedin,google"><a class="main" title="Find Me Here" alt="Find Me Here"><img src="https://graph.facebook.com/picozu/picture?type=large" title="Find Me Here" alt="Find Me Here"></a><div class="network_holder"><a class="network_button socl" target="_blank" href="http://www.so.cl/#/profile/marius-stanciu" data-network="socl" style="display: block; left: 13px; top: 13px;">Socl</a><a class="network_button facebook" target="_blank" href="http://www.facebook.com/picozu" data-network="facebook" style="display: block; left: 13px; top: 13px;">Facebook</a><a class="network_button twitter" target="_blank" href="https://twitter.com/picozu_editor" data-network="twitter" style="display: block; left: 13px; top: 13px;">Twitter</a><a class="network_button pinterest" target="_blank" href="http://pinterest.com/picozu" data-network="pinterest" style="display: block; left: 13px; top: 13px;">Pinterest</a><a class="network_button linkedin" target="_blank" href="http://www.linkedin.com/profile/view?id=173413024" data-network="linkedin" style="display: block; left: 13px; top: 13px;">LinkedIn</a><a class="network_button google" target="_blank" href="https://plus.google.com/100585828531806464438" data-network="google" style="display: block; left: 13px; top: 13px;">Google Plus</a></div></div>

E birde div’in hemen altına fonksiyonumuzu çalıştırmak için kodumuzu ekliyoruz.

$(".classysocial").each(function() {
    new ClassySocial(this);
});

Tüm tarayıcılarla uyumlu olmasıda cabası…

ClassySocial jQuery Plugin Download

Eklenti sahibi: ClassySocial

jQuery Eklentisi WordPress Arşiv Listesi 0

WordPress’in bir çok eklentisi var aralarından güzellerini buldukça sizlerle paylaşıyorum. Bu seferki eklentim jQuery ile yapılmış WordPress arşiv eklentisi. Bu eklenti bileşen olarak geliyor yani yan menünüzde güzel bir şekilde listeletebilirsiniz.

https://2.bp.blogspot.com/-zWwMfw67YiY/UVCUrudhZDI/AAAAAAAAQjg/OZNLrm1BClY/s1600/jQuery+Archive+List+Widget+(1).png

Kurulumu kolay bir eklenti. Yönetim panelinden eklentiyi arayabilir veya buradan indirdikten sonra ftp plugins klasörüne yükleyerek yapabilirsiniz. Eklentiyi aktifleştirdikten sonra bileşenler kısmına tıklayın ve bileşen olarak web sitenize ekleyin.

jQuery Archive List Widget

Most Popular Topics

Editor Picks