Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 6, 2010 13:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/567032 to your computer and use it in GitHub Desktop.
Save anonymous/567032 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>S3 Slider</title>
<link href="s3-slider.css" media="screen" rel="stylesheet" type="text/css" />
<link href="demo/page.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="shadow">
<div id="content">
<div class="example">
<h2>What is it?</h2>
<p>
S3 Slider is a simple slideshow that displays images with their description.<br/>
This is an complete rewrite to make it smaller / simpler / more elegant.
</p>
<p>
It is simple to use, very small(~1kb for js+css) and elegant!
<a href="http://www.serie3.info/s3slider/demonstration.html">Demo(older version, new looks similar)</a> or <a
href="http://rathershort.com">Live demo</a>
<br/><br/>
<a href="http://www.serie3.info/s3slider/index.php">Original license</a> is for free private/commercial use.
</p>
</div>
<div class="example">
<h2>Download</h2>
<p>Requires <a href="http://jquery.com">jQuery >= 1.3</a>.</p>
<p>
You need s3-slider.js and s3-slider.css
</p>
<p>Works in IE6 + the rest.</p>
</div>
<div class="example">
<h2>Demo</h2>
<p> Simple images with some misc text.</p>
<p> At the start IE6 will see an instant fade from blank->image0, if you do not like this make the first slide visible
(display:block). </p>
<p> Naturally the timeout should never be smaller then 2 * fadeTime... </p>
<div id="slider">
<div class="slide first">
<img src="demo/1.jpg"/>
<span><b>A Tile is good</b><br/> Some text long or short text should be placed here to inform customers of your great
products...</span>
</div>
<div class="slide">
<img src="demo/2.jpg"/>
<span> Another text long or short text should be placed here to inform customers of your great products, next slide has no
text...</span>
</div>
<div class="slide">
<img src="demo/3.jpg"/>
<!--same as: <span> </span> -->
</div>
<div class="slide">
<img src="demo/4.jpg"/>
<span> Finally a short text...</span>
</div>
</div>
<a href="#" class="btn" alt="0">
<img src="demo/1.jpg" width="30" height="30"/>
1...
</a>
<a href="#" class="btn" alt="1">
<img src="demo/2.jpg" width="30" height="30"/>
2...
</a>
<a href="#" class="btn" alt="1">
<img class="btn" alt="2" src="demo/3.jpg" width="30" height="30"/>
3...
</a>
<a href="#" class="btn" alt="3">
<img src="demo/4.jpg" width="30" height="30"/>
4...
</a>
<div class="code">
<h3>The Code</h3>
<code><textarea>
<div id="slider">
<div class="slide first">
<img src="demo/1.jpg"/>
<span> <b>A Tile is good</b><br/>Some text long or short text should be placed here to inform customers of your great
products...</span>
</div>
<div class="slide">
<img src="demo/2.jpg"/>
<span> Another text long or short text should be placed here to inform customers of your great products...</span>
</div>
<div class="slide">
<img src="demo/3.jpg"/>
<span><b>But titles are not necessary</b><br/> And even more text long or short text should be placed here to inform customers of your
great products...</span>
</div>
<div class="slide">
<img src="demo/4.jpg"/>
<span> Finally a short text...</span>
</div>
</div>
<script>
jQuery(function($){
$('#slider').s3Slider({timeout:1000,fadeTime:1000});
});
</script>
</textarea></code>
</div>
</div>
</div>
</div>
<div id="footer">
This page layout and styles are taken from defunks facebox (<a href="http://github.com/defunkt/facebox/tree/master">original</a> / <a
href="http://github.com/grosser/facebox/tree/master">my fork</a>)
<br/>
Demo pictures are taken from <a href="http://www.flickr.com/explore">Flickr - explore</a>.
</div>
</div>
<!-- yes, javascript should always be down here! -->
<script src="demo/jquery.js" type="text/javascript"></script>
<script src="s3-slider.js" type="text/javascript"></script>
<script>
jQuery(function($){
$('#slider').s3Slider({timeout:1000, fadeTime:1000});
});
</script>
</body>
</html>
Raw
s3-slider.js
/* ------------------------------------------------------------------------
s3Slider
Current version:
Michael Grosser -> http://pragmatig.wordpress.com
Original:
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Copyright: Redistribute, but keep infos at the top.
------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
vars = vars || {};
var $slider = $(this);
var timeout = vars.timeout || vars.timeOut || 1000;//timeOut is deprecated...
var fadeTime = vars.fadeTime || 1000;
var current = 0;
var mouseOver = false;
var mouseOverBtn= false;
var items = $(".slide", $slider);
var button = $(this).parent().find(".btn");
var spanOpacity = vars.spanOpacity || 0.7;
//Track mouseover
$slider.mouseover(function() {
mouseOver = true;
});
$slider.mouseout(function() {
mouseOver = false;
});
$(button).mouseover(function() {
current = $(this).attr('alt');
item = $(items[current]);
span = $('span', item);
fadeIn(item,span);
mouseOver = true;
});
$(button).mouseout(function() {
mouseOver = false;
//alert(mouseOver);
});
function visible(item){
return $(item).css('display')!='none'
}
function slide(){
var item = $(items[current]);
var span = $('span',item);
var span_is_blank = !span.html() || /^\s*$/.test(span.html());
if(span_is_blank){span.hide();span = $('<span>')};//fade this null-element in case no span was found
if(visible(item)) {
fadeOut(item,span);
current = (current + 1) % items.length;
} else {
span.hide();
fadeIn(item,span);
}
}
function setSlideTimeout(time) {
setTimeout(trySlide, time);
}
//if user blocks, then try again in a bit...
function trySlide(){
if(mouseOver){
setSlideTimeout(fadeTime)
} else {
slide();
}
}
function fadeIn(item,span){
item.fadeIn(fadeTime, function() {
//normally fadeIn would be sufficient, but IEs need explicit opacity value [mcritchlow]
span.css("opacity",0).show().fadeTo(fadeTime,spanOpacity,function(){
setSlideTimeout(timeout)//=> wait ...
})
})
}
function fadeOut(item,span){
span.fadeOut('slow',function(){
item.fadeOut(fadeTime,function(){
slide()//=> fadeIn
})
})
}
//GO!
$('span',items[0]).css('opacity',spanOpacity); //set initial opacity
setSlideTimeout(visible(items[0]) ? timeout : 0); //start sliding
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment