Basit JQuery Slider (Responsive)

JQuery ile basit bir slider çalışması yaptım. Bu çalışmamda birbiri üstüne absolute konumlu dizilen a ve img elemanları sırayla kullanıcılara gösteriliyor. Geçiş efekti olarak JQuery'nin fadeIn ve fadeOut fonksiyonlarını kullandım. 

Sayfanın yüklenme anında resimKut id'li div elemanının içindeki a elemanlarını saydırıyor ve sırasıyla fadeIn-fadeOut efektlerini elemanlara uygulatarak slaytlar arasında geçişi sağlıyorum. a ve img elemanlarına sahip oldukları CSS'ler yine sayfanın yüklenme anında JQuery'nin css() fonksiyonuyla veriliyor. Böylece sliderı düzenlerken stil kodlarıyla uğraşmak zorunda kalmıyorsunuz.

Slider'ı responsive olacak şekilde kodladım. Slider görselleri içinde bulundukları elemanın genişliğine göre otomatik olarak boyutlandırılıyor. Yine çalışma anında slider'da bulunan a'ların yükseklik değerini alıyor ve bunu resimKut id'li elemana atıyorum. Bunu yapma sebebim resimKut elamanını position değerinin relative, içindeki a ve img elemanlarının absolute olmasıdır. Bu durumda içteki elemanları resimKutid'li elemanlardan boyutça bağımsız olacağından sayfa içine doğru yerleşemez, sayfada içeriğinin üstünde çıkar ve sayfa içeriğinin bir kısmının görünmesine engel olur. resimKut id'li dive yüksekli değeri vererek içerikteki diğer elemanları yükseklik kadar kaydırmış oluyorum.

Yükseklik hesaplaması sayfa boyutundaki değişmelere duyarlıdır ve sayfa genişliği değiştikçe otomatik olarak yeniden ayarlanır. Bu özellikle kullanıcılar tablet, telefon gibi cihazları dikey - yatay döndürdükçe sliderın konumlandırma ve boyutlandırma işlemlerinin doğru bir şekilde yapılması için gereklidir. 

Son olarak bu kadar zahmete neden katlandım diye sorarsanız sırf standart ul-li yapısını kullanmamak için. Bu yapıyı tinyMCE editör gibi kodlama kısıtlaması olan editörler kullanırken site içeriğine rahatça slider eklenebilmesi için tasarladım

<div id="resimKut" style="position: relative; display: block; width: 100%; height: 400px;">
  <a href="#1"><img src="tugla-duvar.jpg"/></a>
  <a href="#2"><img src="bugday-tarlasi.jpg" /></a>
  <a href="#3"><img src="flamanli-ampul.jpg" /></a>
  <a href="#4"><img src="soru-isaretleri.jpg" /></a>
  <a href="#5"><img src="baykus-resmi.jpg"  /></a>
</div>
<script>
  // <![CDATA[
  var i = 1;
  var baslatici;
  var ici = $('#resimKut a');
  var k = 0;
  window.onload = function() {
    $('#resimKut').height(ici.height());
    baslat();
  }

  function baslat() {
    for (j = ici.length; j >= 0; j--) {
      $('#resimKut a:nth-child(' + j + ')').css({
        'z-index': k,
        'display': 'block',
        'width': '100%',
        'height': 'auto',
        'position': 'absolute',
        'top': '0px'
      });
      $('#resimKut img:nth-child(' + j + ')').css({
        'z-index': k,
        'display': 'block',
        'width': '100%',
        'height': 'auto',
        'position': 'absolute',
        'top': '0px'
      });
      k++;
    }
    setInterval(cevir, 3000);
  }
  $(window).on('resize', function() {
    $('#resimKut').height(ici.height());
  });

  function cevir() {
    $('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
    i < ici.length ? i++ : i = 1;
    $('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
  }
  // ]]>
</script>
  // <![CDATA[
  var i = 1;
  var baslatici;
  var ici = $('#resimKut a');
  var k = 0;
  window.onload = function() {
    $('#resimKut').height(ici.height());
    baslat();
  }

  function baslat() {
    for (j = ici.length; j >= 0; j--) {
      $('#resimKut a:nth-child(' + j + ')').css({
        'z-index': k,
        'display': 'block',
        'width': '100%',
        'height': 'auto',
        'position': 'absolute',
        'top': '0px'
      });
      $('#resimKut img:nth-child(' + j + ')').css({
        'z-index': k,
        'display': 'block',
        'width': '100%',
        'height': 'auto',
        'position': 'absolute',
        'top': '0px'
      });
      k++;
    }
    setInterval(cevir, 3000);
  }
  $(window).on('resize', function() {
    $('#resimKut').height(ici.height());
  });

  function cevir() {
    $('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
    i < ici.length ? i++ : i = 1;
    $('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
  }
  // ]]>
</script>

Responsive JQuery Sliderımızın kodlarının canlı hali,

See the Pen Basit Responsive JQuery Slider Örneği by Turgut Arslan (@draguth) on CodePen.

Turgut Arslan

Javascript JSON Parsing Örnek 1

Javascript ile JSON formatında gelen verileri kolaylıkla parse edip bir tabloda okunaklı veriler haline getirebilirsiniz..

Örnek Kod

<!DOCTYPE html>
<html>
<body>
    <style>
        .musteriTablo th, .musteriTablo tr, .musteriTablo td
        {
            padding: 5px;
            border: solid 1px #f00;
            color: #717171;
            text-align: center;
        }
    </style>
    <table id="tabloIcerik" class="musteriTablo" style="max-width: 800px; height: auto;
        border: solid 1px #f00;" cellspacing="0" cellpadding="0">
        <tr>
            <th>
                Sipariş No
            </th>
            <th>
                Müşteri Adı Soyadı
            </th>
            <th>
                Sipariş Toplamı
            </th>
        </tr>
    </table>
    <script>
        var musteriler = '[{"no":"125212", "musteriAd":"Selami Parmak", "toplam":"1700 TL"},{"no":"125234", "musteriAd":"Fatih Sila", "toplam":"1800 TL"},{"no":"125365", "musteriAd":"Fethi Arsen", "toplam":"1700 TL"},{"no":"125324", "musteriAd":"Turgut Arslan", "toplam":"1900 TL"}]';
        var obj = JSON.parse(musteriler);
        var icerik = "";
        for (i = 0; i < obj.length; i++) {
            icerik += "<tr><td> " + obj[i].no + " </td><td> " + obj[i].musteriAd + " </td><td> " + obj[i].toplam + " </td></tr>";
        }
        document.getElementById("tabloIcerik").innerHTML += icerik;

    </script>
</body>
</html>

Kodları Çalıştırdığınız Zaman;

See the Pen Basit Bir JSON Parsing Örneği by Turgut Arslan (@draguth) on CodePen.

Saygılarımla... Turgut Arslan

Javascript Büyüteç Uygulaması

Saf Javascript ve CSS kullanarak basit bir büyüteç programı yazdım.

Javascript Büyüteç Kodları:

HTML Kodu;

<div id="resimKabi">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg" />
  <div id="buyutec"></div>
</div>

CSS Kodu;

#resimKabi {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  overflow: hidden;
}
#resimKabi img {
  display: block;
  width: 100%;
  height: auto;
}
#buyutec {
  width: 100px;
  height: 100px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg);
  background-repeat: no-repeat;
  border-radius: 50%;
  border: solid 2px #fff;
  position: absolute;
}

Javascript Kodu 

window.onload = function () {

        boyutla();

        takipEt();

        var eni, boyu, kutuEn, kutuBoy, hesEn, hesBoy;

        var buyutec = document.getElementById('buyutec');

        var rsmKap = document.getElementById('resimKabi');

        window.addEventListener("resize", boyutla);

        buyutec.style.backgroundSize = '3000% 3000%';

        function boyutla() {

            var kutum = document.getElementById('resimKabi');

            var urlAdr = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg';

            var resm = new Image();

            resm.src = urlAdr;

            eni = resm.width;

            boyu = resm.height;

            kutuEn = kutum.offsetWidth;

            kutuBoy = kutum.offsetHeight;

            hesEn = (eni / kutuEn) * 2.2;

            hesBoy = (boyu / kutuBoy) * 3.5;

        }

        function takipEt() {

            var x = null;

            var y = null;

            document.getElementById('resimKabi').addEventListener('mousemove', onMouseUpdate, false);

            document.getElementById('resimKabi').addEventListener('mouseenter', onMouseUpdate, false);

            function onMouseUpdate(e) {

                var konumu = rsmKap.getBoundingClientRect();

                x = e.clientX - konumu.left;

                y = e.clientY - konumu.top;

                buyutec.style.left = (x - 55) + 'px';

                buyutec.style.top = (y - 55) + 'px';

                buyutec.style.backgroundPosition = (-x * hesEn) + 'px ' + (-y * hesBoy) + 'px';

            }

        }

    }

Bu kodların sonucu;

Kodlar Üzerinde Oynama Yapmak İsterseniz Buraya Bakabilirsiniz

See the Pen Javascript Büyüteç Uygulaması (JS Magnifier) by Turgut Arslan (@draguth) on CodePen.

Saygılarımla...
Turgut Arslan