New Topic/Question
Reply
Okay, so I have a function that resizes an image to fill the screen (only landscape images and landscape browser).
I also have a function that uses setInterval() to change the image (automatic slideshow - no controls).
They work beautifully separately.
But when I put them together I get a weird bug... the first couple of times around the images aren't resizing properly. After one or two times round it resizes perfectly. Because it works after a couple of times, my best guess is that it has something to do with the image loading? But I'm not sure.
So here it is.
index2.php
<!DOCTYPE html> <head> <title>Turn It Up Photography</title> <meta name="keywords" content="Photography, Music, Turn It Up"> <meta name="description" content="Music Photography Agency"> <meta http-equiv="charset" content="iso-8859-1"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <?php include 'functions.php'; ?> <div id="bkgr"><img src="images/featured/ex17.jpg"></div> <div id="sidebar"> <ul> <li><a href="/">Home</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> <div id="footer">Turn It Up © 2013.<br>All rights reserved.<br>Privacy policy.<br></div> </div> </body> </html>
functions.php
<?php
$directory = "images/featured/";
$images = glob($directory . "*.*");
?>
<script>
var playSlide = function(){
var imgArr = <?= json_encode($images) ?>;
var len = imgArr.length-1;
var strt = Math.floor(Math.random()*len);
$("#bkgr img").attr("src",imgArr[strt]);
strt++;
setInterval(function(){
$("#bkgr img").attr("src",imgArr[strt]);
if (strt < len)
{
strt++;
}
else
{
strt = 0;
}
imgSize();
}, 3000);
};
var imgSize = function(){
var theimg = new Image();
theimg.src = $("#bkgr img:first").attr("src");
var imgrat = theimg.width/theimg.height;
var elmw = $("#bkgr").width();
var elmh = $("#bkgr").height();
var elmrat = elmw/elmh;
if (imgrat<elmrat)
{
$("#bkgr img").css({"width":"100%","height":"auto"});
}
else
{
$("#bkgr img").css({"height":"100%","width":"auto"});
}
//Centering
$("#bkgr img").css('left', (elmw - $("#bkgr img").width())/2);
$("#bkgr img").css('top', (elmh - $("#bkgr img").height())/2);
};
$(window).load(function(){
imgSize();
playSlide();
});
$(window).resize(function(){
imgSize();
});
</script>
style.css:
html, body {
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
}
img {
margin: 0 auto;
padding: 0;
}
body {
font-family: Helvetica, Verdana, Sans-Serif;
text-align: center;
font-size: 16px;
}
a {
text-decoration: none;
color: #e6e6e6;
}
#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;
}
#sidebar {
background: #000;
margin: 0;
padding: 2.5%;
position: fixed; top: 0; left: 0;
width: 15%;
height: 100%;
font-size: 1em;
color: #e6e6e6;
}
#sidebar img {
width: 100%;
}
#sidebar ul, #sidebar li {
text-align: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
border: 0;
}
#sidebar li {
border-bottom: 1px dashed #fff;
margin-bottom: 1em
}
#footer {
position: fixed; left: 0; bottom: 0;
width: 20%;
font-size: 0.75em;
padding: 0;
margin: 0 auto;
margin-bottom: 0.5em
}
(The stylesheet has been whipped together pretty quickly, but it shouldn't be causing any issues.)
And to see it: EXAMPLE
Okay, so there are 6 (maybe 7?) images in the folder, the first one or two times around, they don't resize properly (resizing the browser resizes the image properly), but after that they start resizing absolutely fine.
Anybody know why?
Thanks,
JD.
MultiQuote
| 