Bu yazımda jquery kullanarak basit bir "news slider" ın nasıl yapılacağını anlatacağım. Ama önce, "news slider" nedir bunu açıklamak daha güzel olacak sanırım. :)
Resim, yazı vb. öğelerin hareketli olarak değişerek web sayfalarında gösterilmesi durumuna, ki bu kullanım genelde haber sitelerinde haber başlıklarını göstermek için tercih edilir, news slider adını verebiliriz.
Jquery, javascript ile yapılabilecek çalışmaları daha kolay ve daha düzenli bir şekilde yapmayı sağlayan bir javascript kütüphanesidir. "Write Less, Do More" sloganıyla tasarlanan Jquery, basit bir "news slider" yaparken bize yardımcı olacak. Öncelikle aşağıdaki iki javascript komut dosyasını indirmemiz gerekiyor. Öğelerin hareketli geçişlerini bu dosyalar ile gerçekleştireceğiz.
jquery.scrollTo.js (7,53 kb)
jquery-1.3.1.min.js (53,98 kb)
Örnek web uygulaması için 3 adet resmimiz ve 3 açıklama yazımız bulunsun.
Resimlerin isimleri :
ve
Resimlerin açıklama yazıları:
1 : Resim1 - Mavi renk
2 : Resim2 - Gri renk
3 : Resim3 - Beyaz renk
olsun.
Örnek web uygulamamızı tamamladığımızda bu 3 resim açıklamaları ile birlikte sırasıyla görüntülenecek.
Şimdi kod kısmına geçelim.
1- Öncelikle kullanacağımız javascript komut dosyalarını tanımlayacağız.
Tanımlama işlemini <head></head> içinde yapmamız gerekiyor.
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
Javascript komut dosyalarımız artık kullanılabilir halde.
2- Yine <head></head> tagleri içine başka bir kod bloğunu yazmamız gerekiyor. Bu javascript kod bloğu; slaytın geçişlerini ve geçiş hızını, yükseklik-genişlik ayarlarını, görünümleri vb. kontrol etmemiz için gerekli.
<script type="text/javascript">
$(document).ready(function() {
//Speed of the slideshow
var speed = 6000;
//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
//Assign a timer, so it will run periodically
var run = setInterval('newsslider(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
//Continue the slideshow with setInterval
$('#btn-play').click(function () {
run = setInterval('newsslider(0)', speed);
return false;
});
//Next Slide by calling the function
$('#btn-next').click(function () {
newsslider(0);
return false;
});
//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsslider(1);
return false;
});
//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsslider(0)', speed);
}
);
//Put this inside $(document).ready()
//For link/number button
$('#links a').click(function () {
//stop the slide show
clearInterval(run);
//go to the item
goto($(this).attr('rel'));
//resume the slideshow
run = setInterval('newsscoller(0)', speed);
return false;
});
});
function newsslider(prev) {
//Get the current selected item (with selected class), if none was found, get the first item
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
//if prev is set to 1 (previous item)
if (prev) {
//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
//if prev is set to 0 (next item)
} else {
//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
//clear the selected class
$('#excerpt li, #gallery li').removeClass('selected');
//reassign the selected class to current items
next_image.addClass('selected');
next_excerpt.addClass('selected');
//Scroll the items
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800);
}
//Add this function after newslider function
function goto(item) {
$('#mask-gallery').scrollTo(item, 800);
$('#mask-excerpt').scrollTo(item, 800);
$(item).addClass('selected');
}
</script>
3- "News slider" ımızda görüntülenecek resim ve açıklamalar için ilgili tanımlayıcı kod bloğumuzu yazacağız. Bu kod bloğunu <body></body> tagleri içinde yazmalıyız.
<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li class="item1">
<img src="newsslider1.jpg" width="300" height="150" alt="" /></li>
<li class="item2">
<img src="newsslider2.jpg" width="300" height="150" alt="" /></li>
<li class="item3">
<img src="newsslider3.jpg" width="300" height="150" alt="" /></li>
</ul>
</div>
<div id="mask-excerpt">
<ul id="excerpt">
<li class="item1">Resim1 - Mavi renk</li>
<li class="item2">Resim2 - Gri renk</li>
<li class="item3">Resim3 - Beyaz renk</li>
</ul>
</div>
</div>
<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-play">play</a>
<a href="#" id="btn-next">next</a>
</div>
<div class="clear">
</div>
Bu kod bloğu sayesinde hangi resimlerin kullanılacağını ve hangi resim için hangi açıklamanın geleceğini belirtmiş olduk. Hem de, slayt ekranının alt kısmına oynat-duraklat-ileri-geri tuşları ve resimler için numaralandırma koyduk.
4- Son olarak bir .css dosyası yaratmamız gerekiyor. Bu stil dosyası "news slider" ile ilgili görsel anlamda her şeyi tanımlamamız için gerekli, aksi takdirde üstteki kod bloklarının hiç bir önemi olmayacak.
Kullanacağımız .css dosyasını tanımlama işlemini yine <head></head> içinde yapmamız gerekiyor. Örnek uygulamada newssliderstyle.css isminde bir stil dosyası kullanalım.
<link rel="stylesheet" href="newssliderstyle.css" type="text/css" />
Tanımladığımız newssliderstyle.css stil dosyasını ile ilgili kod bloğu ise şöyle olacak:
#slider
{
/* You MUST specify the width and height */
width:300px;
height:150px;
position:relative;
overflow:hidden;
}
#mask-gallery
{
overflow:hidden;
}
#gallery
{
/* Clear the list style */
list-style:none;
margin:0;
padding:0;
z-index:0;
/* width = total items multiply with #mask gallery width */
width:900px;
overflow:hidden;
}
#gallery li
{
/* float left, so that the items are arrangged horizontally */
float:left;
}
#mask-excerpt
{
/* Set the position */
position:absolute;
top:0;
left:0;
z-index:500px;
/* width should be lesser than #slider width */
width:300px;
overflow:hidden;
margin-top: 100px;
}
#excerpt
{
/* Opacity setting for different browsers */
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
/* Clear the list style */
list-style:none;
padding:0;
/* Set the position */
z-index:10;
position:absolute;
left:0;
/* Set the style */
width:300px;
overflow:hidden;
background-color: #000;
font-family:Trebuchet MS;
font-size:10px;
color:#fff;
}
#excerpt li
{
padding:5px;
}
.clear
{
clear:both;
}
Örnek "news slider" web uygulamamız için gerekli adımları tamamladıktan sonra örneği görmek için http://arinckokturk.com/newssliderexample/newsslider.aspx linkine tıklamanız yeterli olacaktır.
Ayrıca Arınç Köktürk | Görsel Çalışmalar bölümünü de aynı yapı ile tasarladım. Gözatmak isterseniz http://www.arinckokturk.com/arinckokturkdesign.aspx linkini ziyaret edebilirsiniz.
Not: Belirtilen kodlar örnek uygulamamız için kullanılan kodlardır. Resim-açıklama yazısı ile ilgili ya da slayt özellikleri ile ilgili değişiklikler yapmak için ilgili bölümlerdeki kodları incelemeniz gerekmektedir.