Menu
Hi,
I’m trying to create a website with a gallery with lots of small images next to each other (such as Pinterest) and when you click on the images a new overlay window will pop up with a slideshow. I have LOTS of problems and I would really appreciate some help:
1.
How should I create a gallery? At the moment my images are just below each other and in their original sizes. What I’m looking for is to create small images which will expand when you click on them. To do this I guess I’ll need to use thumbnails but I can’t seem to find any instructions how to do it.
I’ve created the function (or well, not a real function in JS, just in the html code) where a new overlay window opens when you click on an image but at the moment it’s just a white box appearing. How should I do to get the slideshow in there?
HTML:
[code]
<!DOCTYPE HTML>
<html>
<head>
<link href=”‘http://fonts.googleapis.com/css?family=Montserrat’ rel=stylesheet’ type=’text/css’>”
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script type=”text/javascript” src=”JavaScript-2.js”></script>
<link rel=”stylesheet” type=”text/css” href=”CSS-2.css”>
<title></title>
</head>
<body>
<a href=”javascript:void(0)” onclick=”document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block'”></a>
<div id=”light” class=”white_content”>
<a href=”javascript:void(0)” onclick=”document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none'” class=”textright”>Close</a>
</div>
<div id=”fade” class=”black_overlay”></div>
<div id=”sidhuvud”>
<br><a href=”HTML-3.html”><img src=”logo.jpg” width=”380″ height=”62″ alt=”logo”></a>
</div>
<ul id=”navbar”>
<li><a href=”about.htm”>CONTACT</a>
<ul>
<li><a href=”#”>Underrubrik</a></li>
<li><a href=”#”>Underrubrik</a></li>
<li><a href=”#”>Underrubrik</a></li>
<li><a href=”#”>Underrubrik</a></li>
</ul>
</li>
<li><a href=”inspiration.htm”>INSPIRATION</a>
<ul>
<li><a href=”#”>Underrubrik</a></li>
<li><a href=”#”>Underrubrik</a></li>
<li><a href=”#”>Underrubrik</a></li>
<li><a href=”#”>Underrubrik</a></li>
</ul>
</li>
<li><a href=”art.htm”>PORTFOLIO</a>
<ul>
<li><a href=”#”>Underrubrik</a></li>
</ul>
<li><a href=”press.htm”>HEJ</a>
<ul>
<li><a href=”#”>Underrubrik</a></li>
<li><a href=”#”>Underrubrik</a></li>
</ul>
<li><a href=”contact.htm”>ABOUT</a>
<ul>
<li><a href=”#”>Underrubrik</a></li>
<li><a href=”#”>Underrubrik</a></li>
</ul>
</ul>
</div>
<div class=”container”>
<div class=”slider_wrapper”>
<ul id=”image_slider”>
<ul>
<img li src=”pics/1gif.jpg” onmouseover=”toggleImage(this, 0);” onmouseout=”toggleImage(this, 1);” a href=”javascript:void(0)” onclick=”document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block'”></a>
<img li src=”pics/2gif.jpg” onmouseover=”toggleImage(this, 0);” onmouseout=”toggleImage(this, 1);” a href=”javascript:void(0)” onclick=”document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block'”></a>
<img li src=”pics/3gif.jpg” onmouseover=”toggleImage(this, 0);” onmouseout=”toggleImage(this, 1);” a href=”javascript:void(0)” onclick=”document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block'”></a>
</ul></li>
<span class=”nvgt” id=”prev”></span>
<span class=”nvgt” id=”next”></span>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
[code]//1. set ul width
//2. image when click prev/next button
var ul;
var li_items;
var imageNumber;
var imageWidth;
var prev, next;
var currentPostion = 0;
var currentImage = 0;
var ThumbScale=0.2;
var ImgScale=1.05;
function init(){
slideShow()
slideShow = document.getElementById(“white_content”);
onclick = slideShow;
toggleImage()
ul = document.getElementById(‘image_slider’);
li_items = ul.children;
imageNumber = li_items.length;
imageWidth = li_items[0].children[0].clientWidth;
ul.style.width = parseInt(imageWidth * imageNumber) + ‘px’;
prev = document.getElementById(“prev”);
next = document.getElementById(“next”);
//.onclick = slide(-1) will be fired when onload;
/*
prev.onclick = function(){slide(-1);};
next.onclick = function(){slide(1);};*/
prev.onclick = function(){ onClickPrev();};
next.onclick = function(){ onClickNext();};
}
window.onload = init;
function slideShow(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date – start;
var progress = timePassed / opts.duration;
if (progress > 1){
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1){
clearInterval(id);
opts.callback();
}
}, opts.delay || 17);
//return id;
}
function slideTo(imageToGo){
var direction;
var numOfImageToGo = Math.abs(imageToGo – currentImage);
// slide toward left
direction = currentImage > imageToGo ? 1 : -1;
currentPostion = -1 * currentImage * imageWidth;
var opts = {
duration:1000,
delta:function(p){return p;},
step:function(delta){
ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + ‘px’;
},
callback:function(){currentImage = imageToGo;}
};
slideShow(opts);
}
function onClickPrev(){
if (currentImage == 0){
slideTo(imageNumber – 1);
}
else{
slideTo(currentImage – 1);
}
}
function onClickNext(){
if (currentImage == imageNumber – 1){
slideTo(0);
}
else{
slideTo(currentImage + 1);
}
}
function toggleImage(imageElement, sel){
if(sel == 0){
imageElement.style.opacity = 0.7;
imageElement.filters.alpha.opacity = 100;
}else{
imageElement.style.opacity = 1;
imageElement.filters.alpha.opacity = 40;
}
}
CSS:
[code]#sidhuvud {padding: 4px; width: 400px; height: 60px; background: #FFFFFF; font-size: 50px;}
body {
min-width: 870px;
max-width: 870px;
margin: 0;
padding: 0;
}
#box1 {
background: #000000;
height: 470px;
width: 500px;
padding: 20px;
margin: 0 auto 0 auto;
}
#box {
width: auto;
background: #FFFFFF;
float: left;
}
#box2 {
width: 450px;
float: left;
padding: 50px;
}
#box3 {
width: 200px;
float: left;
padding: 30px;
font-size: small;
font-family: helvetica;
}
#navbar {
margin: 0px;
padding: 0px;
left: 0px;
height:80px; }
#navbar li {
list-style: none;
float: right; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding: 7px 21px 10px 10px;
background-color: #ffffff; /*Ändra färgen på menyflikarna här*/
color: #000000; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: ‘Montserrat’, sans-serif;
font-size: 12px; } /*Ändra storleken på texten här*/
#navbar li ul {
display: none;
width: 8em; /* Ändra bredden på undermenyn här */
background-color: #cccccc;
/* opacitet for IE */
/* opacity: 0.80; filter: alpha(opacity=80); */
/* opacitet CSS3 standard */
opacity:0.80;
/* opacitet for Mozilla */
-moz-opacity:0.80;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #ffffff; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #000000; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
background-color: #ffffff;
color: #cccccc;
} /*Ändra färgen när man håller musen över undermenyn*/
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid black;
background: white;
z-index:1002;
overflow: auto;
}
.textright {
float: right;
}
.container{
width:800px;
height:400px;
padding:20px;
border:0px transparent;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
background: transparent;
}
.photo{
width:30%;
height:30%;
border:10px white;
display: inline-block
}
.slider_wrapper{
overflow: hidden;
position:relative;
height:relative;
top:auto;
}
#image_slider{
position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
/*Chrom default padding for ul is 40px */
padding:0px;
margin:0px;
}
#image_slider li{
position: relative;
float: left;
}
.nvgt{
position: absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url(‘https://dl.dropboxusercontent.com/u/65639888/image/prev.png’) no-repeat center;
left: 0px;
}
#next{
background: #000 url(‘https://dl.dropboxusercontent.com/u/65639888/image/next.png’) no-repeat center;
right: 0px;
}