Nivo slider siteye ekleme

Bir önceki yazımda hazırladığım basit css ana sayfa üzerinden devam ediyorum. Yazıyı buradan görebilirsiniz. Önceki tasarıma göre yeni eklenen görseller; site logosu, basit menü ve konumu olan slider.

Başlamadan önce slider eklenmiş hazır tasarıma ve slider dosyalarını alttaki linkten indirebilirsiniz.

Like or Tweet this page to reveal the content.

Büyük resim olarak bıraktığım alana slider(otomatik değişen resimler, geçişli resimler) ekleyeceğiz. Bunun için öncelikle sayfamda kullandığım Nivo slider kodlarını nivo.dev7studios.com, dosyalarını(jquery, css) bilgisayarınıza indirmeniz gerekmekte.

İndirdiğiniz anasayfa tasarımının ekran görüntüsü

Dosyaları veya yukarıda paylaştığım bitmiş tasarımı indir diğinizi varsayarak başlamak istiyorum.

Nivo slider’in çalışması için gerekli dosyaları Head etiketi arasına css js dosyaların yerlerini belirterek yapıştırın. Kodlar içinde dikkat edilmesi gereken noktalar; css ve js ek olan dosyaların doğru yolunun verilmesi, jquery.nivo.slider.pack.js dosya ekinin hemen altına koddaki gibi sliderın çalışması için gerekli script dosyalarının hemen altında olması (javascript i başka yere yazıldığın da çalışmıyor! ).

Bir diğer dikkat edilmesi gereken husus, $(‘#buyukresim’).nivoSlider( daha önceki örnekte oluşturduğum #buyukresim id’li sınıfı javascript içinde belirtmem olması. Yukarıda paylaştığım bitmiş olan tasarımı indirip bakarsanız ne göstermek istediğimi daha iyi anlarsınız.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <link href="slider/themes/default/default.css" rel="stylesheet" media="screen" type="text/css" />   <link href="slider/nivo-slider.css" rel="stylesheet" media="screen" type="text/css" />

    <link href="style.css" rel="stylesheet" media="screen" type="text/css" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">// <![CDATA[
   $(window).load(function() {
       $('#buyukresim').nivoSlider(
            {
            animSpeed: 500,
            }
            );
   });

// ]]></script>

Sliderın çalışması için gerekli dosyaları ekledikten sonra sıra geldi gösterilecek olan resimlere.

1
2
3
4
5
6
7
8
9
<div class="slider-wrapper theme-default">
<div class="nivoSlider" id="buyukresim">

<img alt="" src="resimler/resim1.jpg" width="960" height="360" />
<img alt="" src="resimler/resim2.jpg" width="960" height="360" />
<img alt="" src="resimler/resim3.jpg" width="960" height="360" />

</div>
</div>

Bir sonraki yazılarda bu ana sayfa tasarım uygulamasının devamında görüşmek üzere…

Jquery scrollbar yapımı

Halk dili ile sağ sürükleme çubuğu olarak da geçen, demosunu bu adresten bulabileceğiniz jquery scrollbar web siteleri için olmazsa olmazlardandır. jscrollpane.kelvinluck.com adresinden de ulaşabileceğiniz Jquery scrollbar farklı türlerine de rastlayabilirsiniz.(inceledim hepsi birbirine benzer şekilde oluşturulmuş).

Gerekli stil ve jquery referans dosyalarını buradan indirerek operasyona başlayabiliriz. Bu klasörleri indirdikten sonra head etiketleri arasına sürükleyin. Uygulamayı Asp.net(php vs. fark etmez benzer şekilde uygularsanız bu scrollbar zamazingosu her yerde çalışır) ile yaptığımı hatırlatarak gerekli referansları ve javascript kodları nereye ekleneceğini alt tarafta bulabilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
   
   
    <link href="jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
        <style type="text/css" id="page-css">
            .scroll-pane
            {
                width: 100%; /* Genişlik buradan */
                height: 400px; /* Yüksekliği, metin vs. içeriğinin yüksekliğine göre ayarlamalısnız  */
                overflow: auto;
            }
            .horizontal-only
            {
                height: auto;
                max-height: 200px;
            }
            </style>


    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="jquery.mousewheel.js" type="text/javascript"></script>
    <script src="jquery.jscrollpane.min.js" type="text/javascript"></script>
               
         
        <script type="text/javascript" id="sourcecode">
            $(function () {
                $('.scroll-pane').jScrollPane();
            });
        </script>
</asp:Content>

head aralığına yukarıdaki gibi gereken javascript ve css kodlarını da ekleyerek, referans edilen 4 dosyayı(1 css 3 js) da ekleyip scrollbar için gereken işlemleri tamamlamış olursunuz. Gereken bir kaç açıklamayı kod içinde bulabilirsiniz. Rengini jquery.jscrollpane.css dosyasından değiştirebilirsiniz.

Ardından scrollbar içine koyacağınız metin, görsel, form vs. ilgili class içine almak kalıyor. Alltaki kısımda ne demek istediğimi anlayabilirsiniz;

1
 <div class="scroll-pane"> metin görsel form vs içeriği buraya giriyoruz....</div>

Bu scrollbar sayesinde uzunca yazıları, formları yüksekliği belli site içinde konumlandırmanıza yardımcı oluyor.

Jquery Türkçe e-kitap


JQuery genel olarak; JavaScript, Ajax, ve efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006′nın Ocak ayında bir javaScript gurusu olan John Resig tarafından geliştirilmiştir. Javascript bilgisi ile kolaylıkla öğrenilebilir.

Musa Çavuş’un türkçe yazılım dünyaına katkıda bulunmak amacıyla yazmış olduğu, genel olarak örnekler ile anlatıma sunduğu ücretsiz dağıttığı Türkçe e-kitabı bu adresten indirebilir siniz.

E-kitap içeriğinde anlatılan örnekleri de bu adresten indirebilir siniz.

Daha fazla bilgi www.musa-cavus.com