Hello! I am trying to use this simple javascript/css gallery for my photography portfolio: (www.ilkkakarhu.com - under development, btw. gallery names are in finnish, but just click a random word…)
- Original gallery source : http://www.websitecodetutorials.com/code/photo-galleries/css-body-scroller-demo.php
It is otherwise great and works fine, but - If I display large images and browse with a small screen like macbook air "11 or ipad, the gallery doesn’t auto scale to the screen size. This kind of ruins the whole concept and just looks plainly bad.
I am hoping that someone has a simple solution for this problem. I want the gallery to show images in their actual pixel size (666 px height), but in case of smaller screens or browser windows, they should scale to fit window. Also I am curious, if there is a way to load the images in bacground somehow, so that the gallery is usable immediately, now there is an irritating 2-3 sec “load time”, before the gallery is usable. Also ruining the concept a bit.
-If I don’t get this to work fluently, I guess I must go back using simpleviewer, which has always proven good looking and fast loading…though this time it is not what I really want… I want a side scrolling gallery which can be used with mousewheel also.
I have tried playing a lot with the styles etc. but I am too beginner for this stuff and I alway end up messing the whole layout somehow.
p.s. I am displaying the gallery in an iFrame… could I somehow apply these auto-scale properties to the iframe (a simple solution) ??
Thank you!
here is the code:
<!DOCTYPE HTML><html><head><meta charset=“UTF-8”>
<title>Body Scroller Demo</title>
<style type=“text/css”>
- {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#scroll {
float:left;
margin-right:-999em;
list-style:none;
clear:both;
padding:15px 0;
}
#scroll li {
margin:0 15px;
text-align:center;
float:left;
display:inline;
position:relative;
border:5px solid #333;
}
#scroll img {
display:block;
border:0;
}
#scroll a {
text-decoration:none;
cursor:default;
}
#scroll span {
position:absolute;
bottom:0;left:0;
background:#333;
color:#fff;
padding:20px 0;
width:100%;
opacity:.5;
-ms-filter:“alpha(opacity=50)”;
filter:alpha(opacity=50);
}
#scroll a:hover span, #scroll a:focus span, #scroll a:active span {
opacity:.80;
-ms-filter:“alpha(opacity=80)”;
filter:alpha(opacity=80);
font-weight:bold;
}
#vert { /* vertically center photos /
float:left;
height:50%;
width:100%;
margin-top:-283px; / img height (525px) + li borders (10px) + ul padding (30px) = 565px ÷ 2 = 283px */
}
#left-arrow {
position:fixed;
top:50%;left:15px;
height:60px;width:60px;
margin-top:-30px;
background:url(…/images/left-arrow.png);
outline:0;
}
#right-arrow {
position:fixed;
top:50%;right:15px;
height:60px;width:60px;
margin-top:-30px;
background:url(…/images/right-arrow.png);
outline:0;
}
</style>
<!–[if IE 6]>
<style type=“text/css”>
#scroll{padding-right:999em;}
#scroll span{bottom:-1px;}
</style>
<![endif]–>
</head>
<body>
<h1 style=“position:absolute;”>Body Scroller Demo</h1>
<p id=“breadcrumb”>
<a href=“/”>home</a> » <a href=“/code/”>code</a> » <a href=“/code/photo-galleries/”>photo galleries</a> » css body scroller demo</p><div id=“vert”></div>
<ul id=“scroll”>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
<li><a href=“#”><img src=“…/images/dunes.jpg” alt=“”><span>Image Name</span></a></li>
</ul>
<script type=“text/javascript” src=“css-body-scroller.js”></script>
</body>
</html>
