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.
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>
