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

Sök

Visar resultat för taggar 'bildspel'.

  • Sök efter taggar

    Skriv taggar separerade med kommatecken.
  • Sök efter författare

Innehållstyp


Forum

  • Datorhårdvara
    • Bildskärmar
    • Bärbara datorer
    • Grafikkort
    • Hårddiskar & Lagringsmedia
    • Ljudkort
    • Mac-hårdvara
    • Processorer, moderkort & minnen
    • Retro - datornostalgi
    • Skrivare
    • TV-kort
    • Hårdvara – övrigt
    • Arkiverat
  • Film, foto & bilder
    • Bildredigering
    • Film- och Videoredigering
    • Kameror
    • Mediaspelare – Media Player m fl
  • Internet & nätverk
    • Chattprogram - ICQ, MSN m fl
    • Driftstörningar hos operatörer, internet etc
    • Epostprogram
    • Internetuppkoppling
    • IP-telefoni
    • Nätverket - hårdvara
    • Nätverket - programvara
    • Surftips
    • Webbläsare
    • Internet – övrigt
  • Ljud och Musik
    • Ljudformat (mp3, aac, ogg m fl)
    • Musikskapande på datorn
    • Ljud & Musik – övrigt
  • Operativsystem
    • Windows 95/98/ME/NT/2000
    • Windows XP
    • Windows Vista
    • Windows 7
    • Windows 8 & 8.1
    • Windows 10
    • Windows Server
    • Linux & Unix
    • Mac OS X & Classic
    • Operativsystem - övriga
    • Arkiverade Windows-trådar
  • Program
    • CD/DVD-bränning
    • Kalkylprogram - Excel m fl
    • Mac-program
    • Ordbehandling - Word m fl
    • Presentation – PowerPoint m fl
    • Print - om trycksaker
    • Program - övriga
  • Spel
    • Datorspel
    • Konsoler & konsolspel
  • Säkerhet
    • Brandväggar
    • Skräppost
    • Virus, skadliga program & botemedel
    • Säkerhet - övrigt
  • Hemelektronik
    • DVD & Blu-ray
    • Hemmabio/HTPC
    • El & övrig hemelektronik
  • Mobilt
    • Surfplattor
    • Mobiltelefoner
    • Bärbart Ljud/Mp3-spelare
    • GPS
    • Handdatorer
    • Mobilt – övrigt
  • Tips inför köpet
    • Köpa/Bygga dator
    • Köpa datortillbehör och komponenter
    • Köpa kamera
    • Köpa gps
    • Köpa internetabonnemang
    • Köpa IP-telefoni och fast telefoni
    • Köpa mobila enheter
    • Köpa nätverksutrustning
    • Köpa/Bestämma program
    • Köpa tv, hemmabio och mediacenter
  • System- och webbutveckling
    • Databaser
    • Systemutveckling
    • Webbutveckling
  • Eforum
    • Diskutera Eforum
    • Buggrapporter och önskemål om Eforum
    • PC för Alla
    • Arkiverat: Smart-forumet
  • Övrigt

Hitta resultat i...

Hitta resultat som...


Datum skapat

  • Start

    Slut


Senast uppdaterad

  • Start

    Slut


Filtrera efter antalet...

Gick med

  • Start

    Slut


Grupp


Facebook


Linkedin


Hemsida


Twitter


MSN


ICQ


Yahoo


Jabber


Skype


AIM


Ort


Intressen


Min dator


IT-kunskaper

Hittade 2 resultat

  1. 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; }
  2. Jag vill kunna presentera bildspel (oftast med stillbilder men kanske också någon videosnutt) med hjälp av laserpekare. Alltså själv bestämma hur länge bilden visas medan jag berättar, kunna backa i bildserien osv. Redigering i Adobe Premier Elements eller Windows Movie Maker med texter och ljud är godtagbart. Men hur sparar jag "filmen"? i Adobe Photoshop Elements (ver. 9 för Windows Vista) fanns tidigare en möjlighet att spara som PDF, men det är borttaget i versionen för Windows 8. I Adobe Lightroom finns en export till PDF, men redigeringsalternativen för bildspel är där helt otillräckliga.
×
×
  • Skapa nytt...