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

Bildgalleri med slideshow som öppnas i överlappande popup


agli

Rekommendera Poster

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;
}
Länk till kommentar
Dela på andra webbplatser

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>
Länk till kommentar
Dela på andra webbplatser

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);
Länk till kommentar
Dela på andra webbplatser

 

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!

Länk till kommentar
Dela på andra webbplatser

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).

Länk till kommentar
Dela på andra webbplatser

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!

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.



×
×
  • Skapa nytt...