1
Behöver akut hjälp med ett bildspel javascript
Postat av agli den 12 Augusti 2015, 23:24
3 kommentarer · 428 träffar
Hej,
Jag håller på med en hemsida där jag har ett bildgalleri med massa små bilder och när man klickar upp dem så öppnas en vit ruta på samma sida och resterande sida blir svart/transparent. I den här vita rutan är alltså tanken att bilden man har tryckt på ska öppnas upp större och sedan ska man kunna bläddra mellan bilderna. Jag har fått till själva bildspelsfunktionen men vet inte hur jag ska få in det i den vita pop up rutan... Hela den funktionen är ju enbart gjord i html och inte js, kanske borde jag göra om det och lägga det som en riktig funktion för att kunna placera något i den? Nu är det ju egentligen bara en class som heter white_content. Är det någon som kan hjälpa mig?
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>A</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">X</a>
</div>
<div id="fade" class="black_overlay"></div>
<div id="header">
<br><a href="HTML-3.html"><img src="pics/logo.jpg" width="380" height="62" alt="logo"></a>
</div>
<div id="body">
<ul id="navbar">
<li><a href="contact.htm">CONTACT</a>
<li><a href="instagram.htm">SOCIAL MEDIA</a>
<ul>
<li><a href="instagram.htm">Instagram</a></li>
<li><a href="pinterest.htm">Pinterest</a></li>
</ul>
</li>
<li><a href="inspiration.htm">INSPIRATION</a>
<ul>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Sketches</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</li>
<li><a href="portfolio.htm">PORTFOLIO</a>
<ul>
<li><a href="#">All</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">Interior</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Illustration</a></li>
</ul>
<li><a href="about.htm">ABOUT</a>
</ul>
<div id="image_box">
<img alt src="pics/1gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/2gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/3gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/5gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/1gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/4gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
</div>
<div class="white_content">
<div class="image-slider-wrapper">
<ul id="image_slider">
<li><img alt src="pics/1gif.jpg"></li>
<li><img alt src="pics/2gif.jpg"></li>
<li><img alt src="pics/3gif.jpg"></li>
<li><img alt src="pics/5gif.jpg"></li>
<li><img alt src="pics/1gif.jpg"></li>
</ul>
</div>
</div>
</div>
</div>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
</body>
</html>[/code]
CSS:
[code]#header {padding: 4px; width: 400px; height: 60px; background: #FFFFFF; font-size: 50px;}
body {
min-width: 870px;
max-width: 870px;
margin-left: 50px;
margin-top: -20px;
padding: 0px;
}
#container {
min-height:100%;
position:relative;
}
#body {
padding:10px;
padding-bottom:60px;
}
/*#image_box
{
width: 600px;
height: 1000px;
}*/
#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-top: 12px;
padding: 0px;
left: 0px;
height:80px; }
#navbar li {
list-style: none;
float: right; } /*Place the menu to the right*/
#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; :'Catamaran', 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;
}
#white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid black;
background: transparent;
z-index:1002;
overflow: auto;
}
.textright {
float: right;
color: #AAAAAA;
}
/*.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;
}*/
.container{
width:800px;
height:400px;
padding:20px;
border:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: transparent;
}
.image-slider-wrapper{
overflow: hidden;
position: relative;
height:280px;
top:auto;
}
#image_slider{
position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
padding:0px;
margin:0px;
}
#image_slider li{
max-width: 100%;
float:left;
list-style: none;
position: relative;
}
.photo{
width: 20%;
height: 20%;
margin: 2px;
display: inline-block;
}
.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;
}
#wrapper{
width:400px;
margin: auto;
height: 600px;
padding: 0px;
text-align: center;
}
#footer {
position:absolute;
bottom:0;
height:60px;
background:transparent;
text-align: center;
min-width:870px;
max-widht:870px;
}
h1 {font-family: link href="'http://fonts.googleapis.com/css?family=Catamaran:100'"; text-decoration: underline; text-align: center; font-size: 50px;}
[/code]
JS:
[code]//1. set ul width
//2. image when click prev/next button
var ul;
var liItems;
var imageNumber;
var imageWidth;
var prev, next;
var currentPostion = 0;
var currentImage = 0;
function init(){
toggleImage()
ul = document.getElementById('image_slider');
liItems = ul.children;
imageNumber = liItems.length;
imageWidth = liItems[0].children[0].offsetWidth;
prev.onclick = function(){ onClickPrev();};
next.onclick = function(){ onClickNext();};
}
function slider(ul){
animate({
delay:17,
duration: 3000,
delta:function(p){return Math.max(0, -1 + 2 * p)},
step:function(delta){
ul.style.left = ‘-’ + parseInt(currentImage * imageWidth + delta * imageWidth) + ‘px’;
},
callback:function(){
currentImage++;
if(currentImage < imageNumber-1){
slider(ul);
}
else{
var leftPosition = (imageNumber - 1) * imageWidth;
}
}
});
}
function slideTo(imageToGo){
var direction;
var numOfImageToGo = Math.abs(imageToGo - currentImage);
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;
}
}
window.onload = init;
[/code]
Jag håller på med en hemsida där jag har ett bildgalleri med massa små bilder och när man klickar upp dem så öppnas en vit ruta på samma sida och resterande sida blir svart/transparent. I den här vita rutan är alltså tanken att bilden man har tryckt på ska öppnas upp större och sedan ska man kunna bläddra mellan bilderna. Jag har fått till själva bildspelsfunktionen men vet inte hur jag ska få in det i den vita pop up rutan... Hela den funktionen är ju enbart gjord i html och inte js, kanske borde jag göra om det och lägga det som en riktig funktion för att kunna placera något i den? Nu är det ju egentligen bara en class som heter white_content. Är det någon som kan hjälpa mig?
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>A</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">X</a>
</div>
<div id="fade" class="black_overlay"></div>
<div id="header">
<br><a href="HTML-3.html"><img src="pics/logo.jpg" width="380" height="62" alt="logo"></a>
</div>
<div id="body">
<ul id="navbar">
<li><a href="contact.htm">CONTACT</a>
<li><a href="instagram.htm">SOCIAL MEDIA</a>
<ul>
<li><a href="instagram.htm">Instagram</a></li>
<li><a href="pinterest.htm">Pinterest</a></li>
</ul>
</li>
<li><a href="inspiration.htm">INSPIRATION</a>
<ul>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Sketches</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</li>
<li><a href="portfolio.htm">PORTFOLIO</a>
<ul>
<li><a href="#">All</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">Interior</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Illustration</a></li>
</ul>
<li><a href="about.htm">ABOUT</a>
</ul>
<div id="image_box">
<img alt src="pics/1gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/2gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/3gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/5gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/1gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt src="pics/4gif.jpg" class='photo' onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
</div>
<div class="white_content">
<div class="image-slider-wrapper">
<ul id="image_slider">
<li><img alt src="pics/1gif.jpg"></li>
<li><img alt src="pics/2gif.jpg"></li>
<li><img alt src="pics/3gif.jpg"></li>
<li><img alt src="pics/5gif.jpg"></li>
<li><img alt src="pics/1gif.jpg"></li>
</ul>
</div>
</div>
</div>
</div>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
</body>
</html>[/code]
CSS:
[code]#header {padding: 4px; width: 400px; height: 60px; background: #FFFFFF; font-size: 50px;}
body {
min-width: 870px;
max-width: 870px;
margin-left: 50px;
margin-top: -20px;
padding: 0px;
}
#container {
min-height:100%;
position:relative;
}
#body {
padding:10px;
padding-bottom:60px;
}
/*#image_box
{
width: 600px;
height: 1000px;
}*/
#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-top: 12px;
padding: 0px;
left: 0px;
height:80px; }
#navbar li {
list-style: none;
float: right; } /*Place the menu to the right*/
#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; :'Catamaran', 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;
}
#white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid black;
background: transparent;
z-index:1002;
overflow: auto;
}
.textright {
float: right;
color: #AAAAAA;
}
/*.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;
}*/
.container{
width:800px;
height:400px;
padding:20px;
border:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: transparent;
}
.image-slider-wrapper{
overflow: hidden;
position: relative;
height:280px;
top:auto;
}
#image_slider{
position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
padding:0px;
margin:0px;
}
#image_slider li{
max-width: 100%;
float:left;
list-style: none;
position: relative;
}
.photo{
width: 20%;
height: 20%;
margin: 2px;
display: inline-block;
}
.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;
}
#wrapper{
width:400px;
margin: auto;
height: 600px;
padding: 0px;
text-align: center;
}
#footer {
position:absolute;
bottom:0;
height:60px;
background:transparent;
text-align: center;
min-width:870px;
max-widht:870px;
}
h1 {font-family: link href="'http://fonts.googleapis.com/css?family=Catamaran:100'"; text-decoration: underline; text-align: center; font-size: 50px;}
[/code]
JS:
[code]//1. set ul width
//2. image when click prev/next button
var ul;
var liItems;
var imageNumber;
var imageWidth;
var prev, next;
var currentPostion = 0;
var currentImage = 0;
function init(){
toggleImage()
ul = document.getElementById('image_slider');
liItems = ul.children;
imageNumber = liItems.length;
imageWidth = liItems[0].children[0].offsetWidth;
prev.onclick = function(){ onClickPrev();};
next.onclick = function(){ onClickNext();};
}
function slider(ul){
animate({
delay:17,
duration: 3000,
delta:function(p){return Math.max(0, -1 + 2 * p)},
step:function(delta){
ul.style.left = ‘-’ + parseInt(currentImage * imageWidth + delta * imageWidth) + ‘px’;
},
callback:function(){
currentImage++;
if(currentImage < imageNumber-1){
slider(ul);
}
else{
var leftPosition = (imageNumber - 1) * imageWidth;
}
}
});
}
function slideTo(imageToGo){
var direction;
var numOfImageToGo = Math.abs(imageToGo - currentImage);
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;
}
}
window.onload = init;
[/code]
