-
fade to black slideshow.
when someone asked me if i could replicate a website. Looking at it i thought it would be the simplest thing i'd ever do..its been a nightmare lol..its the simplest of design yet without being able to code. but you think thered be snippets of code around but there doesnt seem to be any so thought i'd ask here..
heres the site http://www.steffenallen.com/
now after looking for a snippet for the slide menu i couldn't find anything that would let me specify a background image so created my own slider with css animation with mouseovers but as the blocks went over the text no text linking so i scrapped that idea. ended up with just 2 layers. one colapsed and one expanded with text links and hide 1 layer and produce the other with mouseovers..crude but works.. find it hard to believe theres no slide menu snippets out there that let you specify a background..anyway as thats sorted the next thing is what i'm struggling with now..
I have been searching high and wide for a simple slideshow and when i mean simple i mean 1 to the next..no navigation, no links, to text overlays pure and simple 1 image to the next. my only requirement is the slideshow fade to black and then come back. i could again crudely do it by having a black image between each but to me it seems strange as surely there is a snippet of code or java script that has a fade to black option.
Now if possible but not nescesary if the slideshow had php/sql support or flickr integration that would be very good also allowing different dimensions but keeping aspect ratio and using a background colour to fill in the gaps the dimensions leave..
i will leave it in your capable hands lol
-
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.
-
thanks..its kind of what i was looking for..its a great start anyway :D only thing i need to try now is work out a way around
Code:
#slideshow { /* set dimensions to width or wider of the widest image, height or higher of the highest image */
bit. as theres hundreds of images and they are 2000px and over so will need to resize them all. but i did say a simple fade in and out and thats exactly what i got so thank you very very much. thought i was going to have to go down the flash route..i am still looking for a self resize and pulled dynamic images from rss/flickr/photobucket/php. anything to make life easier lol if anyone knows anything
-
well after hours and hours of searching and modifying it so it works for me i finaly found what i need :D
if anyone is interested i used http://www.pikachoose.com/
and modified the free jquery plugin..just removed all the guff and captions etc.. it actualy has a fade in and out as well as cross fade..was about the 30th java/jquery/flash/html plugin i tried.. phew
-
Well you should be able to use css to add max-height and max-width properties for the #slideshow img selector. Then just make sure that the dimensions set for the #slideshow are the same or larger than those. Like add the highlighted to the stylesheet for #slideshow img:
Code:
#slideshow img {
position: absolute; /* required */
top: 50%; /* required */
left: 50%; /* required */
transform: translate(-50%, -50%); /* required */
max-width: 500px;
max-height: 500px;
}
Now all images should fit into that box and you can set the style here to those or larger (for example):
Code:
#slideshow { /* set dimensions to width or wider of the widest image, height or higher of the highest image */
width: 510px;
height: 510px;
border: 3px solid blue; /* optional */
position: relative; /* required */
}
But, if, as you seem to say, some images are as large as 2000px and over, it would probably be best to optimize and resize them before serving them. This can be done in an image editing program or (not as well but adequately) by the server using GD and Image Functions in PHP or similar utilities. Otherwise the page will take a long time to load on all but the fastest connections, maybe even on those.
-
I had a slightly different version of this prepared for a future blog post, but I adapted it to include the fade-to-black and pull images from a folder with PHP.
Small vanilla JS snippet - no dependencies, and responsive (note the padding-top calculation for #slideshow:after in the CSS, which is very simply: img px height / img px width x 100)
Hope it helps: http://fofwebdesign.co.uk/template/_...ideshow-js.php
-
thanks to both of you..i thought max height width would crop them and as they are large it would show only say 25% of a corner lol..will try it out and thanks beverley with a silent h. i was looking for something so i could upload new images to a folder and slideshow would pull them so thanks again
-
Applied to the images, not to the slideshow div, max-height and max-width will not crop the images but resize them to fit the box. However, as I said, huge images will take some time to load. So, if at all possible, you are going to want to actually resize them before serving them. Preferably no later than when they are uploaded to the server.
