Jquery

Önizlemeli jquery resim slideshow

3 dakika okuma süresi
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=’https://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=”https://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
4 Yorum
To Top
Paylaşım

Lütfen AdBlock'u Kapatır Mısın?

Unutma! Reklam gelirleri olduğu sürece bu ve benzeri bloglar varlığını sürdürebilecek ve sizlere daha kaliteli içerikler sunabilecektir.