Nivo slider siteye ekleme


Deprecated: Function create_function() is deprecated in /var/www/vhosts/digitaldunyam.net/coder.digitaldunyam.net/wp-content/plugins/codecolorer/lib/geshi.php on line 4698

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.
[viral-lock][wpdm_file id=1][/viral-lock]

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/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…

Basit JavaScript örnekleri

JavaScripte yeni başlayanlar için basit bir kaç örnek sunmak istiyorum. Rastgele sıralanmış düzeyde javascript örnekleri.

JavaScript diziler;

1
2
3
4
5
6
7
dizi = new Array();

                document.write(dizi[0]);
                dizi[0] =  5;
                document.write(dizi[0]);
                dizi[0] = " kalem";
                document.write(dizi[0]);

bir başka dizi örneği

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        a = new Array(5);
                a[0] = 1;
                a[1] = 2;
                a[2] = 3;
                a[3] = 4;
                a[4] = 5;
                a[5] = 6;

                alert(a.length);
                i = 0;
                while (i < a.length) {
                    document.write(a[i] + "<br>");
                    i++;
                }

switch case örneği

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
         a = 2;
                switch (a) {

                    case 0:
                        document.write("0" + "<br>");
                        break;

                    case 1:
                        document.write("1" + "<br>");
                        break;

                    case 2:
                        document.write("2" + "<br>");
                        break;
                    case 3:
                        document.write("3" + "<br>");
                        break;


                    default: document.write("4" + "<br>");
               
                }

while;

1
2
3
4
5
6
                i = 0;
                while (i < 10) {
                document.write(i + "<br>")
                    i++;
       
                }

for;

1
2
3
        for (i = 0; i < 10; i++) {
                    document.write("Sayımız :" + i + "<br>");
                }

dizi ve for örneği

1
2
3
4
5
6
7
8
9
          sirket = new Array();
                sirket[0] = "ayakkabıcı<br>";
                sirket[1] = "gözlükçü<br>";
                sirket[2] = "fırıncı<br>";
                sirket[3] = "telefoncu<br>";

                for (i in sirket) {
                    document.write(sirket[i]);
                }

function ile iki sayıyı toplama;

1
2
3
4
5
6
7
         function topla(a, b) {

                    document.write(a + " ve " + b + " sayisinin toplamı :"+ (a + b));

                }

                topla(23, 10);

function ile mod alma;

1
2
3
4
5
6
7
8
        function mod(a, b) {

                    return a % b;
                   
                }

                sonuc = mod(23, 5);
                document.write(sonuc);

1’de 100’e kadar olan sayıları toplama;

1
2
3
4
5
6
7
8
9
10
11
      var toplam=0;

                function islem() {
                    for(i = 1; i<=100; i++)
                    {
                        toplam=toplam+i;
                    }

             document.write("sonuc : " + toplam + "<br>");
               
                }

Javascript if ile gün saati uygulaması

JavaScript : Netscape Navigator 2.0 ile birlikte Brendan Eich tarafından geliştirilen ve önceleri Mocha daha sonra LiveScript olarak adlandırılan ve en sonunda şu anki adını alan JavaScript dili başlangıçta sadece istemci taraflı (client-side) yorumlanan bir betik programlama dilidir.(Kaynak :http://tr.wikipedia.org/wiki/JavaScript)

Javascript de sık kullanılan if yapısı ile gün içi uygulamamızı yapalım. Uygulamamızda; linke tıkladığımızda gün içindeki zamana göre selam vermesi istersek;

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
 <script language="javascript" type="text/javascript">
function ifuygulama() {
            var tarih = new Date();
            var saat = tarih.getHours();

            if (Saat >= 6 && Saat < 12) {
                alert("Günaydın");
            }
            else if (Saat >= 12 && Saat < 14) {
                alert("Tünaydın");
            }
            else if (Saat >= 14 && Saat < 18) {
                alert("İyi Günler");
            }
            else if (Saat >= 18 && Saat < 22) {
                alert("İyi Akşamlar");
            }
            else {
                alert("İyi Geceler");
            }
        }
 </script>

<body>
<a href="javascript:ifuygulama()">Selam ver</a><br />
 </body>

Buradaki işlem; yeni tarih tanımlayıp istenilen zaman değerlerine şart koyarak alert ile mesaj verdirmek.