BAĞLANTILARIM

Takip Edin:

0

Fancybox eklentili kullanışlı bir thumbnail galeri

Cuma, Ekim 24, 2014 / /

Fancybox eklentili kullanışlı bir Jquery thumbnail galeri


<script src="js/jquery.js"></script>
<script src="js/fancybox/jquery.fancybox.js?v=2.1.4" type="text/javascript"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<link href="js/fancybox/jquery.fancybox.css?v=2.1.4"" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
//imajGaleri
$(".gorsel").click(function () {
var secilenGorsel = $(this).attr("href");
$('#gorselIzle').hide();
$('#gorselIzle').show();
$("a[rel]").attr('rel', 'galeri');
$("a[href='" + secilenGorsel + "']").attr('rel', '');
$('#gorselIzle').html('<a href="' + secilenGorsel + '" rel="galeri" class="fancybox" title=""><img src="' + secilenGorsel + '" alt=""/></a>');
return false;
});
var galeriIlkGorsel = $('#gorselIzle img').attr('src');
$("a[href='" + galeriIlkGorsel + "']").addClass("aktif"); //ilk görsele aktif classı ekle. Galeride iki kez görünmesin.
$(".gorsel").not(".aktif").attr('rel', 'galeri'); //aktif classı dışındakileri galeriye dahil et.

//imajGaleriye fancybox
$('.fancybox').fancybox();
});
</script>

<div id="gorselIzle">
<a href="images/upload/1.png" rel="galeri" class="fancybox" title=""><img src="images/upload/1.png" alt="" /></a>
</div>
<a href="images/upload/1.png" rel="" class="gorsel fancybox"><img src="images/upload/1.png" class="thumb" border="0"/></a>
<a href="images/upload/2.png" rel="" class="gorsel fancybox"><img src="images/upload/2.png" class="thumb" border="0"/></a>

0 yorum

SON YORUMLAR