Aklımda Kalası Kelimeler

* давайте работать вместе
* Zarf ve Mazruf, Zerafet(xHoyratlık) ile aynı kökten(za-ra-fe) gelir
* Bedesten
* Suç subuta ermiştir - Suç sabit olmuştur
JQUERY TEMPLATE etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
JQUERY TEMPLATE etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

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>