NOTLARIMDAN...

22 Ekim 2010 Cuma

En basit haliyle javascript slideshow


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #divCerceve
        {
            background-color:#e2e2e2;
            z-index:-8;
            overflow:hidden;
            position:relative;
            height:302px;
            width:452px;
            }
        .divAna
        {
            width: 450px;
            height: 300px;
            overflow: hidden;
            border: 1px solid red;
            position: absolute;
            top: 0;
            left: 0;
            background-color:transparent;
            z-index: 0;
        }
        .divSol
        {
            width: 200px;
            height: 250px;
            overflow: hidden;
            padding: 5px;
            border: 1px solid green;
            float: left;
            margin: 5px;
        }
        .divSag
        {
            width: 200px;
            height: 250px;
            overflow: hidden;
            padding: 5px;
            border: 1px solid aqua;
            float: left;
            margin: 5px;
            background-color:White;
        }
    </style>
    <style type="text/css">
        #divVideoNavigasyon
        {
        }
        #divVideoNavigasyon li
        {
            padding: 2px 0 0 0px;
            float: left;
            background: url("1.png") no-repeat scroll -6px -51px transparent;
            font-size: 0.938em;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            width: 17px;
            color: white;
            cursor: pointer;
            list-style-type: none;
        }
        #divVideoNavigasyon .prev
        {
            background-position: -15px -373px;
            width: 0px;
        }
        #divVideoNavigasyon .next
        {
            background-position: -15px -346px;
            background-position: -15px -346px;
            width: 0px;
        }
        
        #divVideoNavigasyon li.selected
        {
            background-position: -6px -83px;
            color: black;
            width: 18px;
        }
        #divVideoNavigasyon li.pause
        {
            background-position: -6px -424px;
            margin-left: 15px;
        }
        #divVideoNavigasyon li.play
        {
            background-position: -6px -444px;
            margin-left: 15px;
            display: none;
        }
        .hiddenText
        {
            text-indent: -9999px;
        }
    </style>
    <script type="text/javascript" src="1_jquery-1.4.2.js"></script>
    <script type="text/javascript" src="jquery.tmpl.js"></script>
</head>
<body>
    <script type="text/html" id="tmpl">
        <div class="divAna" id="div_${videoId}"> 
            <div class="divSol">
                <img src="${imgSrc}" /> 
            </div>
            <div class="divSag">
                <h2> </h2>
                <h3>${baslik}</h3>
                <span class="spnOzet">${ozet}</span>
            </div>
        </div>
    </script>
    <div id="divCerceve">
        <h2 style="z-index: 3; position: absolute; top: 20px; left: 230px;">
            En Son Eklenenler
        </h2>
        <div id="divVideoNavigasyon" style="z-index: 3; position: absolute; top: 200px; left: 180px;">
            <ul class="nav dl_navigation">
                <li class="prev"></li>
                <li class="">1</li>
                <li class="">2</li>
                <li class="">3</li>
                <li class="">4</li>
                <li class="">5</li>
                <li class="">6</li>
                <li class="pause"></li>
                <li class="play"></li>
                <li class="next"></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var arr = [{ "videoId": 104, "baslik": "Bu 1 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://hof.povray.org/images/bigthumb/guardian.jpg" },
                   { "videoId": 202, "baslik": "Bu 2 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://www.dynamicdrive.com/dynamicindex4/lightbox2/flower.jpg" },
                   { "videoId": 301, "baslik": "Bu 3 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://hof.povray.org/images/bigthumb/pebbles.jpg" },
                   { "videoId": 407, "baslik": "Bu 4 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://c.asstatic.com/images/Noormahl-9875-Fantastic-Images-fantastic-pics4177-ppt-powerpoint-118_88.jpg" },
                   { "videoId": 505, "baslik": "Bu 5 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://img185.imageshack.us/img185/8862/slim6pn6.jpg" },
                   { "videoId": 706, "baslik": "Bu 6 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://img98.imageshack.us/img98/6842/girl4nn8.jpg" }
                  ];
        $("#tmpl").tmpl(arr).appendTo("#divCerceve");
    </script>

    <script type="text/javascript">
        var liRakamlar = $("#divVideoNavigasyon ul").find("li[class!='prev'][class!='next'][class!='pause'][class!='play']");
        var iCrnt = arr.length - 1;
        var iNxt = 0;
        var iPrv = 0;
        var dur = false;

        function nextPhoto(pNo) {
            if (!(dur == false ^ pNo == undefined)) {
                f_Sonraki(pNo);

                $("#divVideoNavigasyon ul").find("li.selected").removeClass("selected");
                $(liRakamlar).eq(iCrnt).addClass("selected"); ;

                $("#div_" + arr[iNxt].videoId).fadeIn('slow');
                $("#div_" + arr[iPrv].videoId).fadeOut('slow', function () {
                    $(this).hide();
                });
            }
        }

        function f_Sonraki(pNo) {
            if (pNo != undefined) {
                iPrv = iCrnt;
                iCrnt = iNxt = pNo;
            } else {
                if (iCrnt == arr.length - 1) {
                    iPrv = arr.length - 1;
                    iCrnt = iNxt = 0;
                } else {
                    iPrv = iCrnt;
                    iNxt = ++iCrnt;
                }
            }
        }

        function f_Pause(liItem) {
            dur = true;
            $("#divVideoNavigasyon ul").find("li.play").show();
            $("#divVideoNavigasyon ul").find("li.pause").hide();
        }

        function f_Play(liItem) {
            dur = false;
            $("#divVideoNavigasyon ul").find("li.pause").show();
            $("#divVideoNavigasyon ul").find("li.play").hide();
        }




        $(function () {
            $(liRakamlar).each(function (idx, li) {
                // VideoId bilgisini title içine yazalım (gösterilecek dive ulaşmada kullanacağız).
                $(li).attr("id", "li_" + arr[idx].videoId);
                $(li).attr("title", arr[idx].videoId);
                $("#div_" + arr[idx].videoId).hide();

                // x inci videoyu görmek için LI lerin 
                // üzerine gelirsek slideshow dursun,
                // üzerindem çıkarsak slideshow devam etsin
                $(li).hover(function () { dur = true; }, function () { dur = false; });


                // LI ye tıkladığımızda o video ön izlemesi görünsün.
                $(li).click(function () {
                    dur = true;

                    $("#divVideoNavigasyon ul").find("li.selected").removeClass("selected");
                    $(this).addClass("selected");

                    nextPhoto(idx);
                });
            });

            $("#divVideoNavigasyon ul").find("li.pause").click(f_Pause);
            $("#divVideoNavigasyon ul").find("li.play").click(f_Play);
            setInterval(function () { nextPhoto(); }, 2000);
        });
        
    </script>
</body>
</html>
Aklımda Kalası Kelimeler

22 Ekim 2010 Cuma

En basit haliyle javascript slideshow
