New Topic/Question
Reply
It also uses the jQuery library.
Have I used anything that could be considered bad practice?
Have I done something in a particularly long winded way?
What are the drawbacks of the method I've used (I've noticed the fading isn't exactly perfect every time)?
Those sorts of things.
So first of all, I had to get all the images (unknown number and unknown name), so I used PHP to fetch them and create a javascript array.
<?php
$directory = "images/featured/";
$images = glob($directory . "*.*");
$i = 0;
echo "<script>\nvar imgArr = new Array();\n";
foreach($images as $image)
{
$i++;
echo "imgArr[".$i."] = new Image();\nimgArr[".$i."].src = '".$image."';\n";
}
echo "var totimg = ".$i.";\n</script>";
?>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="slide.js"></script>
</head>
<body>
<div id="bkgr"><img src="images/featured/ex01.jpg" alt="Turn It Up background"></div>
</body>
</html>
Then in slide.js I have:
var strt = Math.floor(Math.random()*totimg);
var playSlide = function(){
$("#bkgr img").fadeOut("1000", function() {
$("#bkgr img").attr("src",imgArr[strt].src).fadeIn("3000");
if (strt < totimg)
{
strt++;
}
else
{
strt = 1;
}
imgSize();
});
};
$(window).load(function(){
imgSize();
setInterval("playSlide()", 5000);
});
(NOTE: imgSize() refers to my first script the one that is resizing the images to fill the element).
And that's it.
The css is pretty much irrelevant but here it is anyway:
#bkgr {
background: #000;
margin: 0 auto;
padding: 0;
height: 100%;
width: 80%;
position: fixed; top: 0; left: 20%;
z-index: -100;
}
#bkgr img
{
position: relative;
border: 0;
}
If you're wandering about the positioning and size of the container, it's built around the rest of the website, I've just posted the relevant bits of code here.
What other methods for an image slider would people recommend?
I had an idea about stacking all the images on top of each other, and then just fading them out one by one revealing the next img behind it until you get to the bottom and then it would start again (would have to work out how to make the nice fade effect in on the last one to the first one again).
Thanks in advance,
JD
MultiQuote
| 