PDA

View Full Version : Fullscreen Random Image?



B3N
04-28-2011, 12:20 AM
Hi,

I want to create a fullscreen image that stretches to fill the browser window. I don't want to stretch the image proportionally, but neither do I want to ever see any background color inside the browser. The jQuery script "Supersized" does exactly what I want.

The problem is that "Supersized" doesn't support random images, and I need a randomized image, chosen from a set of high resolution photos I have.

I found a good old thread on here about random images, and also one on full screen. The random feature works great, but I get what looks like margins and blank space, and the window isn't resizing properly. Being a serious newbie I can't tell if the problem is in the javascript or the CSS. Serious love to anyone who can help. Here is what I have cobbled together:

The script in the <head>



<script type="text/javascript">
//<![CDATA[

var images=new Array();
images[0]="images/image1.jpg";
images[1]="images/image2.jpg";
images[2]="images/image3.jpg";
images[3]="images/image4.jpg";

var i=Math.floor(Math.random()*images.length);

function randomImage() {

var elem=document.createElement("img");
elem.src = images[i];
elem.title = images[i];
elem.style.height = '100%';
elem.style.width = 'auto';

document.getElementById("column_1").appendChild(elem);

}

onload=randomImage;

//]]>
</script>


The body code:



<div id="column_1">
<noscript>
<img alt="default image" src="image_1.jpg" />
</noscript>
</div>


and some CSS:



html {
margin: 0;
padding: 0;
}

img {
border: 0px;
display: block;
padding: 0;
margin: 0;
}

body {
overflow: hidden;
}

#column1 {
width:100&;
height:100%;
margin: auto;
padding: 0;
border: none;
}

coothead
04-28-2011, 07:46 AM
Hi there B3N,

and a warm welcome to these forums. ;)

The following example will work in modern browsers...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>full size background image</title>

<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
body {
background-image:url(images/image1.jpg);
background-size:100% 100%;
-webkit-background-size:100% 100%; /* Safari */
-khtml-background-size:100% 100%; /* Konqueror */
-moz-background-size:100% 100%; /* Firefox */
overflow:hidden;
}
#container {
height:100%;
overflow:auto;
}
</style>

<script type="text/javascript">
function init(){
var pics=[
'images/image1.jpg',
'images/image2.jpg',
'images/image3.jpg',
'images/image4.jpg' /* no comma after final array element */
];

document.body.style.backgroundImage=
'url('+pics[Math.floor(Math.random()*pics.length)]+')';
}

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>

<div id="container">
</div>

</body>
</html>

coothead

B3N
04-29-2011, 07:18 PM
First, let me say that I wasn't completely clear. I want something that will expand images to fill the window in all cases, without distorting the x:y ratio. So any resizing should be proportional. The images are photographs, and they need to read properly, although cropping is of course okay, by necessity.

Here are some issues with the code you gave me:

1) In Safari, the window loads perfectly at first, and the image resizes with the viewport, but proportionality is no preserved (ie the picture gets squeezed).

2) In Camino, the image is not resized properly at first for the viewport. Additionally, when I drag the browser window far to the right, the image repeats in a second tile. Not quite what I want.

This seems like such a basic design task. I'm surprised there is no standard cross-browser solution yet!

Perhaps the problem needs to be approached this way:

1) detecting the viewport dimensions
2) comparing the x dimensions of the image and the viewport to create a ratio.
3) comparing the y dimensions of the image and the viewport to create a ratio.
4) choosing the large of the two ratios
5) applying that ratio to the image.

any other thoughts out there?

coothead
04-29-2011, 10:59 PM
Hi there B3N,

does this example help...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>big picture</title>

<style type="text/css">
html,body {
height:100%;
padding:0;
margin:0;
}
#holder {
height:100%;
overflow:hidden; /* change this value to auto if preferred */
}
#myImage {
display:block;
}
</style>

<script type="text/javascript">

var preloads=[];

function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}

preload('blood.jpg','dog.jpg','banana.jpg','aaa.jpg','buddha.jpg','apple.jpg','girl.jpg','grap.jpg');

function init(){

var n=Math.floor(Math.random()*preloads.length);
var s=preloads[n].src;

var pic=document.createElement('img');
pic.setAttribute('id','myImage');
pic.setAttribute('src',s);
pic.setAttribute('title',s.substring(s.lastIndexOf('/')+1,s.length));
pic.setAttribute('alt',s.substring(s.lastIndexOf('/')+1,s.length));

document.getElementById('holder').appendChild(pic);

resizeImage(n);

window.onresize=function() {
resizeImage(n);
}
}

function resizeImage(n) {

var r1=preloads[n].width/preloads[n].height;
var r2=document.body.offsetWidth/document.body.offsetHeight;
var obj=document.getElementById('myImage');

if(r1>=r2){
obj.style.height='100%';
obj.style.width=obj.offsetHeight*r1+'px';
}
else {
obj.style.width='100%';
obj.style.height=obj.offsetWidth*(1/r1)+'px';
}
}

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>

</head>
<body>

<div id="holder">
<noscript>
<div>
<img src="images/blood.jpg" alt="">
</div>
</noscript>
</div>

</body>
</html>

coothead

raveyourmind
01-31-2012, 08:50 PM
coothead,

thank you very much. your latest code works just perfect.
but i have a problem, since i'm begginer web developer.

i need to put a logo and some text ON my fullscreen background (it should be vertical centered, and horizontal left).

can you help me out?

thanks

coothead
01-31-2012, 09:55 PM
Hi there raveyourmind,

and a warm welcome to these forums. ;)

do you want something like this...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
html,body {
height:100%;
margin:0;
}
body {
background-image:url(blood.jpg);
background-size:100% 100%;
background-attachment:fixed;
}
#vertical {
float:left;
width:100%;
height:50%;
margin-top:-156px;
}
#box {
clear:both;
width:760px;
height:280px;
padding:20px 20px 10px;
border:1px solid #300;
margin:auto;
background-color:rgba(204,204,255,0.7);
box-shadow:#000 10px 10px 20px;
overflow:auto;
}
#box img {
float:left;
border:1px solid #003;
margin:0 20px 0 0;
box-shadow:#000 4px 4px 8px;
}
#box p {
margin:0;
padding-bottom:10px;
}
</style>

</head>
<body>

<div id="vertical"></div>

<div id="box">
<img src="girl.jpg" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus
ac quam pellentesque lacinia quis sit amet augue. Fusce eu
euismod urna. Nunc volutpat scelerisque tempus.
</p>
</div>

</body>
</html>

coothead

raveyourmind
02-01-2012, 04:23 PM
thanks for code, but this code is just something different. it puts my web content into a small frame, and the "lorem ipsum" comes up below my image.

your previous code was perfect, and i think i just need to add some <div> or <p> somewhere...

i just need some text over my background picture. something like here: http://www.kavoir.com/2009/02/css-text-over-image.html

coothead
02-01-2012, 09:02 PM
Hi there raveyourmind,

how about like this then....


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>big picture</title>

<style type="text/css">
html,body {
height:100%;
padding:0;
margin:0;
background-color:#f0f0f0;
}
#holder {
position:relative;
}
#myImage {
position:fixed;
top:0;
display:block;
}
#container {
position:relative;
z-index:1;
width:760px;
padding:20px;
border:1px solid #000;
margin:auto;
background-color:rgba(255,255,255,0.5);
box-shadow:#000 10px 10px 20px,#000 -10px -10px 20px;
}
noscript, #noscript{background:#000;height:100%; position:relative;top:0}
</style>

<script type="text/javascript">

var preloads=[];

function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}

preload('blood.jpg','dog.jpg','banana.jpg','aaa.jpg','buddha.jpg','apple.jpg','girl.jpg','grap.jpg');

function init(){

var n=Math.floor(Math.random()*preloads.length);
var s=preloads[n].src;

var pic=document.createElement('img');
pic.setAttribute('id','myImage');
pic.setAttribute('src',s);
pic.setAttribute('title',s.substring(s.lastIndexOf('/')+1,s.length));
pic.setAttribute('alt',s.substring(s.lastIndexOf('/')+1,s.length));

document.getElementById('holder').appendChild(pic);

resizeImage(n);

window.onresize=function() {
resizeImage(n);
}
}

function resizeImage(n) {

var r1=preloads[n].width/preloads[n].height;
var r2=document.body.offsetWidth/document.body.offsetHeight;
var obj=document.getElementById('myImage');

if(r1>=r2){
obj.style.height='100%';
obj.style.width=obj.offsetHeight*r1+'px';
}
else {
obj.style.width='100%';
obj.style.height=obj.offsetWidth*(1/r1)+'px';
}
}

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>

</head>
<body>

<div id="holder">

<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus
ac quam pellentesque lacinia quis sit amet augue. Fusce eu
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu
et mauris scelerisque tristique. Donec fringilla mauris dolor,
sit amet vulputate lacus. Nulla feugiat mattis nulla non
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis
nisi eget neque tempus facilisis eu quis sapien.
</p><p>
Ut et metus a massa rhoncus cursus. Integer luctus luctus enim,
tristique rhoncus enim feugiat eu. Etiam porttitor volutpat
massa sed congue. Sed eros nisl, volutpat ac dapibus quis,
ultricies id diam. Mauris at elit eget quam ullamcorper sagittis
ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit.
Proin viverra, neque non eleifend vehicula, nulla augue gravida
felis, non fermentum lorem odio ac nunc. Aliquam pretium
scelerisque consectetur. Proin ultrices urna non magna interdum
a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu
sodales cursus. Maecenas bibendum neque vitae orci mollis ac
vulputate ante auctor. Sed sodales odio id ante sagittis
faucibus.
</p><p>
Curabitur gravida, neque id volutpat tincidunt, justo eros
interdum dui, nec mattis eros nunc a ipsum. Aenean in orci id
turpis luctus interdum nec ut est. Nunc lacinia sagittis nibh
vitae bibendum. Cras malesuada, felis vitae egestas aliquet,
mauris diam vehicula quam, eget scelerisque felis nulla id
tellus. Curabitur non laoreet dolor. Vestibulum sodales
hendrerit elit vitae eleifend. Praesent faucibus mauris sed erat
accumsan ac cursus lacus molestie. Donec a nisi a risus malesuada
molestie nec at odio. Maecenas eleifend tincidunt lacus nec
vulputate. Vestibulum eleifend pulvinar sem, sit amet auctor eros
pellentesque quis. Sed et nulla non eros auctor malesuada.
Vestibulum erat arcu, hendrerit vel cursus nec, sagittis vitae
sapien. Nulla facilisi. Sed nec molestie mauris. Donec non dui
urna.
</p><p>
Aenean vel velit vel metus congue ultrices non ut lorem. Sed
viverra quam sit amet libero vestibulum eget porta sem mattis.
Pellentesque tincidunt convallis justo eu iaculis. Suspendisse
ut dui ante, et malesuada nisi. Praesent aliquet congue nulla
volutpat posuere. Curabitur orci magna, egestas nec mollis nec,
dapibus in erat. Vestibulum cursus est mauris, non gravida elit.
Curabitur at diam nisi.
</p>
</div>

</div>

</body>
</html>

coothead

raveyourmind
02-02-2012, 05:40 PM
perfect. many thanks for support, coothead!

coothead
02-02-2012, 05:48 PM
No problem, you're very welcome. ;)
coothead

raveyourmind
02-02-2012, 07:04 PM
There's one more thing I believe you can help me out.

As I said I need to align my content (lets say its "lorem ipsum" given in your latest code) VERTICALLY centered, horizontally left. ''vertical-align:middle;'' in "#container" doesnt work, tried lots of over ways, just doesnt work.

Would be super glad if you can help me.

coothead
02-02-2012, 09:24 PM
I there raveyourmind,

I am sorry, but I cannot visualize your requirement, in relation to the code that I supplied. :o

Can you put your a page on your sever, so that I can see your problem?

It may help me to help you with your problem. ;)

coothead

raveyourmind
02-04-2012, 09:18 AM
the site is http://paulius.eu/AK/

i need the menu to put vertically in the middle of the site

coothead
02-04-2012, 12:00 PM
Hi there raveyourmind,

perhaps this may meet your requirements. ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://paulius.eu/AK/intro/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Agne Kuzmickaite</title>

<style type="text/css">
html,body {
height:100%;
padding:0;
margin:0;
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#holder {
position:relative;
}
#myImage {
position:fixed;
top:0;
display:block;
}
#vertical {
float:left;
width:100%;
height:50%;
margin-top:-121px;
}
#container {
clear:both;
position:relative;
z-index:1;
/*width:760px;*/width:282px;
height:200px;
padding:20px;
border-radius:15px;
/*margin:auto;*/margin-left:20px;
background-color:rgba(0,0,0,0.5);
box-shadow:#000 10px 10px 20px;
}
#logo {
display:block;
margin-bottom:20px;
}
#nav {
padding:0;
margin:0;
list-style-type:none;
line-height:18px;
}
#nav #spacing {
margin-top:20px;
}
#nav a {
color: #fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}
</style>

<script type="text/javascript">

var preloads=[];

function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}

preload('1.jpg','2.jpg','3.jpg','4.jpg');

function init(){

var n=Math.floor(Math.random()*preloads.length);
var s=preloads[n].src;

var pic=document.createElement('img');
pic.setAttribute('id','myImage');
pic.setAttribute('src',s);
pic.setAttribute('alt',s.substring(s.lastIndexOf('/')+1,s.length));

document.getElementById('holder').appendChild(pic);

resizeImage(n);

window.onresize=function() {
resizeImage(n);
}
}

function resizeImage(n) {

var r1=preloads[n].width/preloads[n].height;
var r2=document.body.offsetWidth/document.body.offsetHeight;
var obj=document.getElementById('myImage');

if(r1>=r2){
obj.style.height='100%';
obj.style.width=obj.offsetHeight*r1+'px';
}
else {
obj.style.width='100%';
obj.style.height=obj.offsetWidth*(1/r1)+'px';
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>

</head>
<body>

<div id="holder"></div>

<div id="vertical"></div>

<div id="container">

<img id="logo" src="../pics/logo_transp.png" alt="logo">

<ul id="nav">
<li><a href="#">biografija</a></li>
<li><a href="#">kolekcijos</a></li>
<li><a href="#">spektakliai</a></li>
<li><a href="#">spauda</a></li>
<li><a href="#">el. parduotuve</a></li>
<li><a href="#">kontaktai</a></li>
<li id="spacing"><a href="#">EN</a></li>
</ul>

</div><!-- end #container -->

</body>
</html>

coothead

raveyourmind
02-05-2012, 04:01 PM
coothead, you are wonderful. thanks again!

coothead
02-05-2012, 05:37 PM
Hi there raveyourmind,

I am a little confused. :confused:

I need the menu to [be] put vertically in the middle of the site
So I coded for that. ;)

But you, in your infinite wisdom, added fourteen br tags to the code and messed it up.

Also with the removal of background-color:rgba(0,0,0,0.5) from the #container attributes, your
logo image and the white text is almost impossible to see on some of your background images. :eek:

But, of course, it's your site and you must do what you must do. :D

coothead