Created
September 6, 2010 13:23
-
-
Save anonymous/567032 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ------------------------------------------------------------------------ | |
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