Just nu i M3-nätverket
Gå till innehåll
agli

Bildgalleri med slideshow som öppnas i överlappande popup

Startad av agli, i Webbutveckling

Rekommendera Poster

agli    0

agli
Postad

Hej,

 

Jag sitter med en hemsida och har helt kört fast på flera punkter. Tanken är att startsidan ska bestå av ett bildgalleri med flera småbilder som helst av allt är storleksanpassade till varandra så att det blir ett slags "tegelstensmönster", t ex som det ser ut på Pinterest. När man för musen över bilderna ska de bli lite transparenta och när man klickar på dem ska de komma upp ett popup fönster på samma sida där då resterande bakgrund blir mörkare så att själva popupfönstret med bildspelet hamnar i fokus. 

 

Jag har en kod för bildspelet, galleriet, popup funktionen, och mycket mer men det är som de inte samarbetar, som att jag inte har kopplat ihop dem. Till saken hör väl också att jag är en supernybörjare och därmed är det nog med all säkerhet en hel del andra oklarheter så all hjälp uppskattas verkligen!

 

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></title>
</head>

 <body onload="SetThumbs();">
    <div id="background"> Oskarpt område
        
<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>
    
   

       <ul>
         <div id="gallery">
	<img src="pics/1gif.jpg"  onmouseover="this.style.cursor='hand';" onclick="Popup(this);">
	<img src="pics/2gif.jpg"  onmouseover="this.style.cursor='hand';" onclick="Popup(this);">
	<img src="pics/3gif.jpg"  onmouseover="this.style.cursor='hand';" onclick="Popup(this);">
</div>

		</ul>
       <div id="popup"> Klart område   
        
        <div class="container">
	<div class="slider_wrapper">
	<ul id="image_slider">
	    
		<span class="nvgt" id="prev"></span>
		<span class="nvgt" id="next"></span>
                    </div>    
</div>
	</div>
     </div>
</body>
</html>

JS:

//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(){
	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 Popup(img) {
	strSrc=img.src;
	arrDim=GetDimensions(img);
	var oWin=window.open(strSrc,'','menubar=no,resizable=no,scrollbars=no,titlebar=no,toolbar=no,width='+arrDim[0]*ImgScale+',height='+arrDim[1]*ImgScale); 
}
function GetDimensions(img) {
	strSrc=img.src;
	idx1=strSrc.indexOf('_');
	idx2=strSrc.indexOf('.',idx1);
	return(strSrc.substring(idx1+1,idx2).split("x"));
}
function SetThumbs() {
        oGallery=document.getElementById("gallery");
        for (node in oGallery.childNodes) {
            el=oGallery.childNodes[node];
            if (el.tagName=='IMG') {
        arrDim=GetDimensions(el);
        w=arrDim[0]*ThumbScale;
        h=arrDim[1]*ThumbScale;
        el.style.width=w;
        el.style.height=h;
}
}	
oGallery.style.visibility='visible';
}

/*function largeImage(obj,src){
	
 if (largeImage.lst&&largeImage.lst[0]!=obj){
  largeImage.lst[0].src=largeImage.lst[1];
 }
 largeImage.lst=[obj,obj.src];
 var path=obj.src.substring(0,obj.src.lastIndexOf("/")+1);
 obj.src=path+src;
}*/
	


function animate(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;}	
	};
	animate(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:

#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*/

.gallery{
visibility:hidden;
width:800px;
height:400px;
}

.background {
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: fixed;
background: rgba(0,0,0,.5);
}
#popup {
z-index: 10;
width: auto;
height: auto;
background: black;
color: white;
padding: 1em;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.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;
	
}
/*.pic1{
width:30%;
height:30%;
border:10px white;
opacity:1;
display: inline-block;
filter:alpha(opacity=100);
}
.pic1:hover
{
width:30%;
height:30%;
border:10px white;
opacity:0.5;
display: inline-block;
filter:alpha(opacity=50);
}*/
	
	
	
.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;
}

Dela detta inlägg

Länk till inlägg
Dela på andra webbplatser

agli    0

agli
Postad

Nu har jag fått till funktionen där bilderna blir transparenta när man för musen över men när man klickar på dem kommer de ju upp i ett nytt fönster istället för i pop-up fönstret på samma sida. Någon som vet hur man kan lösa det?

<div id="gallery">
	<img src="pics/1gif.jpg"  onclick="Popup(this);" onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);">
	<img src="pics/2gif.jpg"  onclick="Popup(this);" onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);">
	<img src="pics/3gif.jpg"  onclick="Popup(this);" onmouseover="toggleImage(this, 0);" onmouseout="toggleImage(this, 1);">
</div>

Dela detta inlägg

Länk till inlägg
Dela på andra webbplatser

Jonas__B    244

Jonas__B
Postad

Om du döper fönstret kan du återanvända det:

var oWin=window.open(strSrc,'img_popup','menubar=no,resizable=no,scrollbars=no,titlebar=no,toolbar=no,width='+arrDimeight='+arrDim[1]*ImgScale);

Dela detta inlägg

Länk till inlägg
Dela på andra webbplatser

agli    0

agli
Postad

 

Om du döper fönstret kan du återanvända det:

var oWin=window.open(strSrc,'img_popup','menubar=no,resizable=no,scrollbars=no,titlebar=no,toolbar=no,width='+arrDimeight='+arrDim[1]*ImgScale);

Tack för svar! Jag vill ju dock helst få upp bildspelet i det här överlappande fönstret istället för att det öppnas ett nytt, förstår du hur jag menar? Har du något tips på hur man kan lösa det?

Tack!

Dela detta inlägg

Länk till inlägg
Dela på andra webbplatser

Jonas__B    244

Jonas__B
Postad

Jag skulle titta på att implementera lightbox, med eller utan jQuery.

 

Den kod du har nu är rätt rörig och validerar inte korrekt (man ska ha LI i UL men där inte ha DIV, t ex)

 

Titta på denna: http://jsfiddle.net/XStbA/78/

Gör sedan om det till en egen funktion (du kan använda din befintliga Popup-funktion).

Dela detta inlägg

Länk till inlägg
Dela på andra webbplatser

agli    0

agli
Postad

Jag skulle titta på att implementera lightbox, med eller utan jQuery.

 

Den kod du har nu är rätt rörig och validerar inte korrekt (man ska ha LI i UL men där inte ha DIV, t ex)

 

Titta på denna: http://jsfiddle.net/XStbA/78/

Gör sedan om det till en egen funktion (du kan använda din befintliga Popup-funktion).

Stort tack!!!! Nu är jag lite jobbig men jag lyckas inte riktigt få in bildspelet i den nya rutan dock, har du något tips på hur jag kan göra det? Jag fick inte heller till min förra popUp funktion så jag skippade den helt och körde på scriptet på länken så nu är det alltså ingen funktion i JS utan allt står i HTML. Hur gör jag då för att anropa bildspelsfunktionen? Stort tack igen!

Dela detta inlägg

Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu
Gå till ämneslista


×
×
  • Skapa nytt...