No one really makes anything that simple these days. I had a fairly simple one that I just stripped down and tweaked to meet those requirements. I left most of its extended capabilities as options*, which they already were but in the demo for the un-tweaked code each option had an example, any questions - let me know. Demo:
http://home.comcast.net/~jscheuer1/s...ideshow2jq.htm
Code:
<!DOCTYPE html>
<html>
<head>
<title>Deceptively Simple Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://home.comcast.net/~jscheuer1/favicon.ico" />
<style type="text/css">
body {
background-color: black;
}
#slideshow { /* set dimensions to width or wider of the widest image, height or higher of the highest image */
width: 280px;
height: 450px;
border: 3px solid blue; /* optional */
position: relative; /* required */
}
#slideshow > * {
display: none; /* required */
position: absolute; /* required */
top: 50%; /* required */
left: 50%; /* required */
transform: translate(-50%, -50%); /* required */
}
#slideshow img {
position: absolute; /* required */
top: 50%; /* required */
left: 50%; /* required */
transform: translate(-50%, -50%); /* required */
}
#preload {
visibility: hidden; /* required */
position: absolute; /* required */
}
/* optional div mask or masks may be devised for images that are smaller than others
so that the previous image will not bleed through or for any other desired reasons */
.mask { /* will inherit the required #slideshow > * styles */
width: 140px;
height: 225px;
background-color: white;
padding-top: 1px;
}
.slidecaption { /* optional span elements to go within links and/or masks may also be devised */
position:absolute;
bottom: 0;
text-decoration: underline;
font: normal 90% verdana, arial, san-serif;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
// Simple Fade to Black Script (c)2015 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
jQuery.fn.ftbdsss = function(cfg){
var $ = jQuery;
var defaults = {howlong: 3000, fadeoutdur: 1200, fadeindur: 300, preloads: $('#preload')};
cfg = $.extend({}, defaults, cfg);
var ssdiv = this.attr('id') && !this.children().length? this : $('#slideshow');
function rotateimages(){
var preloads = cfg.preloads.children();
var theimages = ssdiv.children();
var theimage = preloads.get(0) || theimages.get(theimages.length - 1);
ssdiv.prepend(theimage);
if(ssdiv.children().length > 1){
$(theimage.nextSibling).fadeOut(cfg.fadeoutdur, function(){$(theimage).fadeIn(cfg.fadeindur);});
} else {$(theimage).fadeIn(Math.min (cfg.howlong, cfg.fadeoutdur));}
}
rotateimages();
setInterval(rotateimages, cfg.howlong);
return ssdiv;
};
jQuery(function($){
$('#slideshow').ftbdsss();// optional config object may be placed inside ftbdss() -> {howlong: 5000, fadeoutdur: 2000, fadeindur: 800}
});
</script>
</head>
<body>
<div id="preload"> <!-- Markup for the slides goes here, images may be linked and/or have masks, captions, etc. -->
<img src="photo1.jpg" alt="original image" title="">
<img src="photo2.jpg" alt="original image" title="">
<img src="photo3.jpg" alt="original image" title="">
<img src="photo4.jpg" alt="original image" title="">
<img src="1_side.jpg" alt="original image" title="">
</div>
<div id="slideshow">
</div>
</body>
</html>
One thing though, It requires a modern browser. IE 9 or later or any other common browser.
*unused options - configuration of one or more of the various timed events as to how long each lasts - one or more slides can be linked - one or more slides can have captions with or without links - masks can be added to one or more slides for colored background mattes of any desired color or dimensions even a background image could be used as part of one or more mattes.
fade to black slideshow.
Reply With Quote
only thing i need to try now is work out a way around
Bookmarks