Jquery

Önizlemeli jquery resim slideshow

ELASTIC IMAGE SLIDESHOW WITH THUMBNAIL PREVIEW

ELASTIC IMAGE SLIDESHOW WITH THUMBNAIL PREVIEW

Alışılagelmiş slayt scriptlerinden biraz daha farklı bir slayt resim scripti. Minik önizleme ile zenginleştirilmiş hoş bir görünüme kazanan bu scripti aşağıdan inceleyebilir ve indirebilirsiniz.

Scriptin çalışan örneği:
Demo

Scripti indir:
Download

[php] <!DOCTYPE html>
<html lang=”en”>
<head>
<title>AhmetCetintas &raquo Elastik Resim Slayt</title>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”description” content=”Elastic Image Slideshow with Thumbnail Preview” />
<meta name=”keywords” content=”jquery, css3, responsive, image, slider, slideshow, thumbnails, preview, elastic” />
<meta name=”author” content=”Codrops” />
<link rel=”shortcut icon” href=”../favicon.ico”>
<link rel=”stylesheet” type=”text/css” href=”css/demo.css” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
<link href=’http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic’ rel=’stylesheet’ type=’text/css’ />
<noscript>
<link rel=”stylesheet” type=”text/css” href=”css/noscript.css” />
</noscript>
</head>
<body>
<div class=”container”>

<h1>AhmetCetintas.Com Elastik Resim Slayt Script</h1>
<div class=”wrapper”>
<div id=”ei-slider” class=”ei-slider”>
<ul class=”ei-slider-large”>
<li>
<img src=”images/large/1.jpg” alt=”image01″ />
<div class=”ei-title”>
<h2>Creative</h2>
<h3>Geek</h3>
</div>
</li>
<li>
<img src=”images/large/2.jpg” alt=”image02″ />
<div class=”ei-title”>
<h2>Friendly</h2>
<h3>Devil</h3>
</div>
</li>
<li>
<img src=”images/large/3.jpg” alt=”image03″/>
<div class=”ei-title”>
<h2>Tranquilent</h2>
<h3>Compatriot</h3>
</div>
</li>
<li>
<img src=”images/large/4.jpg” alt=”image04″/>
<div class=”ei-title”>
<h2>Insecure</h2>
<h3>Hussler</h3>
</div>
</li>
<li>
<img src=”images/large/5.jpg” alt=”image05″/>
<div class=”ei-title”>
<h2>Loving</h2>
<h3>Rebel</h3>
</div>
</li>
<li>
<img src=”images/large/6.jpg” alt=”image06″/>
<div class=”ei-title”>
<h2>Passionate</h2>
<h3>Seeker</h3>
</div>
</li>
<li>
<img src=”images/large/7.jpg” alt=”image07″/>
<div class=”ei-title”>
<h2>Photography by</h2>
<h3>Bartek Lurka</h3>
</div>
</li>
</ul><!– ei-slider-large –>
<ul class=”ei-slider-thumbs”>
<li class=”ei-slider-element”>Current</li>
<li><a href=”#”>Slide 1</a><img src=”images/thumbs/1.jpg” alt=”thumb01″ /></li>
<li><a href=”#”>Slide 2</a><img src=”images/thumbs/2.jpg” alt=”thumb02″ /></li>
<li><a href=”#”>Slide 3</a><img src=”images/thumbs/3.jpg” alt=”thumb03″ /></li>
<li><a href=”#”>Slide 4</a><img src=”images/thumbs/4.jpg” alt=”thumb04″ /></li>
<li><a href=”#”>Slide 5</a><img src=”images/thumbs/5.jpg” alt=”thumb05″ /></li>
<li><a href=”#”>Slide 6</a><img src=”images/thumbs/6.jpg” alt=”thumb06″ /></li>
<li><a href=”#”>Slide 7</a><img src=”images/thumbs/7.jpg” alt=”thumb07″ /></li>
</ul><!– ei-slider-thumbs –>
</div><!– ei-slider –>
<div class=”reference”>
<p class=”demos”><span>Demo 1<span> | <a href=”index2.html”>Demo 2 (otomatik baslar)</a></p>

</div>
</div><!– wrapper –>
</div>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.eislideshow.js”></script>
<script type=”text/javascript” src=”js/jquery.easing.1.3.js”></script>
<script type=”text/javascript”>
$(function() {
$(‘#ei-slider’).eislideshow({
easing : ‘easeOutExpo’,
titleeasing : ‘easeOutExpo’,
titlespeed : 1200
});
});
</script>
</body>
</html> [/php]

Oyunuz kaydedildi! Şimdi paylaşabilirsiniz!


Ne Düşünüyorsun?

  • Beğen
  • Hahaha
  • Sevimli
  • İnanılmaz
  • Üzgün
  • Sinirli

İlginizi Çekebilecek Benzer Yazılar


Düşüncelerini bizimle paylaşır mısın?

Bu Konuda 4 Yorum Yapıldı. Sen de Bu Konudaki Yorumunu Bizimle Paylaşır Mısın?

  1. Gürkay

    09 Şubat 2012 at 16:55

    Türkçe karakter sorununu da çözerseniz çok güzel olur.. 

    • Ahmet Çetintaş

      09 Şubat 2012 at 19:12

      Türkçe karakter sorunu scriptin kullandığı font kaynaklı. Bu sebeple rar dosyası içindeki demo.css de font seçimini değiştirip Arial yaptım. İstersen yeniden indirebilirsin. Ayrıca eğer sen farklı bir font kullanmak istersen şu kodlarla bu işlemi gerçekleştirebilirsin.

      @font-face {
      font-family: seçtiğinfontadı;
      src: url(seçtiğinfontdosyaadresi);
      }

      daha sonra Arial olan kısmı seçtiğin font adıyla değiştir. Hepsi bu 😉

  2. colasan

    10 Kasım 2012 at 21:14

    aynı slaytı video için de kullanabilir miyiz?

    • Ahmet Çetintaş

      10 Kasım 2012 at 21:34

      Düzenlemeyle neden olmasın

Düşüncelerinizi bizimle paylaşır mısınız?

To Top
Paylaşım

Ayıp Ama!

Lütfen AdBlock eklentisini sitemiz için devredışı bırakınız!