Forum Mjukvara Programmering och digitalt skapande Tråd

Behöver akut hjälp med bildspel! JS, Html, CSS - uppdaterad kod

1
Skriv svar
Permalänk
Medlem
●

Behöver akut hjälp med bildspel! JS, Html, CSS - uppdaterad kod

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 där vita rutan... Just nu är det alltså bara en vit tom ruta (class white_content) som visas när jag trycker på en bild. Är det någon som kan hjälpa mig?

HTML:

<!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>

JS:

//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;

CSS:

#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;}
Senast redigerat Uppdaterad kod
Redigera
Citera flera Citera
Permalänk
Medlem
●

Här kommer hemsidan på jsfiddle så blir det lite lättare att förstå vad jag menar: https://jsfiddle.net/69hsxeh7/

Redigera
Citera flera Citera
1
Skriv svar