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

agli

Medlem
  • Antal inlägg

    4
  • Gick med

  • Senaste besök

  1. 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!
  2. 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!
  3. 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>
  4. 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; }
×