CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

henrik_r Nybegynder

15. december 2005 - 12:38 Der er 20 kommentarer og
1 løsning

Næste billede ved tryk på space

Hej.

Jeg har en hjemmeside der viser billeder fra fester m.m.

Har lige set på tv2's hjemmeside, at når de viser billeder, kan man trykke space for at se næste billede.

Synes det er en rigtig nice feature - men kan ikke finde noget om det nogen steder på nettet.

Nogen herinde der ved hvad jeg evt. skal lede efter?

Mvh.
Henrik

Synes godt om

thesurfer Nybegynder

15. december 2005 - 12:51 #1

Skriv link til TV2's hjemmeside, der viser billederne.

/theSurfer

Synes godt om

henrik_r Nybegynder

15. december 2005 - 13:15 #2

Eks. på disse gallerier:

http://gossip.tv2.dk/gallery/

Synes godt om

thesurfer Nybegynder

15. december 2005 - 13:48 #3

De bruger koden ( fra http://galleri.tv2.dk/js/vars.js ):

function processkey(e) {
e = (e)? e : ((event)? event : null);
if (e) {
var charCode = (e.charCode || e.charCode == 0)? e.charCode : ((e.keyCode)? e.keyCode : e.which);
if (charCode==32) {
document.location.href = (slidemode ? slideurl : nexturl);
}
if (charCode==115) {
document.location.href = (slidemode ? nexturl : slideurl);
}
}
}

function init() {
if (document.addEventListener) {
document.addEventListener('keypress', processkey, false);
} else {
document.onkeypress = processkey;
}
}

Det kræver at man bruger <body onload="init();">

..sammen med nogle variabler (der indeholder forrige/næste adresse)

/theSurfer

Synes godt om

henrik_r Nybegynder

15. december 2005 - 13:53 #4

Ok - er det svært at lave et eksempel?
Kunne godt lige bruge et :)

Har ikke leget så meget med javascript. Mest php..
Men synes det er en meget fed funktion.

Henrik

Synes godt om

thesurfer Nybegynder

15. december 2005 - 13:59 #5

De har lavet det på en dårlig måde.. hele siden reloades..
Jeg ville foretrække, hvis det kun er billedet reloade/loader en ny..

/theSurfer

Synes godt om

henrik_r Nybegynder

15. december 2005 - 14:04 #6

Ok - vil det kunne laves?

Synes godt om

thesurfer Nybegynder

15. december 2005 - 14:13 #7

Mange ting kan laves.. og det er et af dem.. :-)
Kigger lige på det om lidt..

/theSurfer

Synes godt om

henrik_r Nybegynder

15. december 2005 - 14:20 #8

Mange tak..
Kunne være total nice :)

Synes godt om

fidusen Nybegynder

15. december 2005 - 14:38 #9

Er med på en lytter...

Synes godt om

thesurfer Nybegynder

15. december 2005 - 14:56 #10

henrik_r> Jeg har lige afsluttet et andet spm.. og kigger nu på dit script..

fidusen> Der er ingen grund til at fortælle os, at du er der.. for at abonnere på spm'et, klikker du bare på Send, uden at skrive en besked.

Læs venligst http://expfaq.1go.dk

/theSurfer

Synes godt om

thesurfer Nybegynder

15. december 2005 - 15:22 #11

Sådan:

<html>
<title>billeder</title>
<script type="text/JavaScript">
// denne kode kommer fra http://galleri.tv2.dk/js/vars.js

antal_billeder = 5; // antallet af billeder
c = 1; // counter (tæller)

function processkey(e) {
e = (e)? e : ((event)? event : null);
if (e) {
var charCode = (e.charCode || e.charCode == 0)? e.charCode : ((e.keyCode)? e.keyCode : e.which);
if (charCode==32) {
if (c == antal_billeder + 1) c = 1;
img.src = c + ".jpeg"; // filnavnen kommer til at være: 1.jpeg, 2.jpeg, osv..
c++;
}
}
}

function init() {
if (document.addEventListener) {
document.addEventListener('keypress', processkey, false);
} else {
document.onkeypress = processkey;
}
img = document.getElementById("billede");
}
</script>
</head>
<body onload="init();">

<img src="1.jpeg" id="billede">

</body>
</html>

/theSurfer

Synes godt om

henrik_r Nybegynder

15. december 2005 - 16:54 #12

Mange tak for hjælpen..

Nu har jeg lavet sådan det virker perfekt.. Det er rigtig nice!

Du kan se det her hvis du vil: http://www.partypics.dk/index.php?type=gallery&mggal=10&mgid=1&easymode=true&start=0

Synes godt om

henrik_r Nybegynder

15. december 2005 - 17:14 #13

Kan man evt. lave sådan, at shift virker som tilbage?

Synes godt om

henrik_r Nybegynder

15. december 2005 - 17:15 #14

Og evt. lave sådan, at både mellemrum og pil højre virker som frem, og shift og pilvenstre virker som tilbage?

Synes godt om

henrik_r Nybegynder

15. december 2005 - 17:23 #15

Har ellers fundet sådan en keycode liste og prøvet med dem..
Men det virker ikke..

http://www.js-examples.com/syntax/key_codes.php

Synes godt om

henrik_r Nybegynder

15. december 2005 - 19:09 #16

Hm.. Kunne ikke få piletasterne til at virke - men fik det til at virke med bogstaver.. Lukker tråden her.. Slut

Synes godt om

dotcom1 Nybegynder

15. december 2005 - 21:09 #17

Må vi ikke se dit endelige resultat med bogstaver? :)

Synes godt om

henrik_r Nybegynder

15. december 2005 - 21:16 #18

jo self. 2 min.

Synes godt om

henrik_r Nybegynder

15. december 2005 - 21:22 #19

Hmm.. Det er rigtig svært at poste noget, som kan bruges til ret meget, medmindre man kører med mit billedgalleri.

Men prøv evt. at kigge på

http://www.partypics.dk/index.php?type=gallery&mggal=8&mgid=1&easymode=true&start=0

og så kig på kildekoden.. Tror det er den nemmeste måde at kigge på det på..

Håber det er ok..

Mvh Henrik

Synes godt om

roenving Novice

16. december 2005 - 00:28 #20

>>henrik_r

-- et link er den _perfekte_ måde at vise kode på !-)

Synes godt om

henrik_r Nybegynder

16. december 2005 - 09:28 #21

Her kommer min kode - noget af det hænger sammen med mit billedgalleri. Men man kan godt se meningen med det..

Mvh Henrik

----------------------------------------

if (!isset($_REQUEST['mgid'])) $id=0;
else $id=$_REQUEST['mgid'];

echo "<div style='color: #888888; font-weight: bold; font-size: 14px; text-transform:uppercase; margin-bottom: 10px; text-align: center;'>";
echo "<a href='index.php?type=gallery&mggal=$_REQUEST[mggal]' style='text-decoration: none; color: #888888; font-weight: bold; font-size: 14px; text-transform:uppercase;'>";
echo stripslashes($galleries[$gal][1]);
echo "</a>";
echo "</div>";

$numpics = count($pictures);
$counter = 0;
echo "
<script type=\"text/JavaScript\">
antal_billeder = $numpics; // antallet af billeder
c = 1; // counter (tæller)
";

echo "var mypics=new Array()";

foreach($pictures as $pic) {
echo "\nmypics[$counter] = \"" . $pic['pic'] . "\"";
$counter++;
}

echo "
function processkey(e) {
e = (e)? e : ((event)? event : null);
if (e) {
var charCode = (e.charCode || e.charCode == 0)? e.charCode : ((e.keyCode)? e.keyCode : e.which);

if (charCode==32 || charCode==100) {
if (c == antal_billeder) {c = 0;}
img.src = mypics[c];
c++;
}

if (charCode==97) {
if(c == 1) {
img.src = mypics[antal_billeder-1];
c--;
}
else {
if(c == 0) {
img.src = mypics[antal_billeder-2];
c=antal_billeder-1;
}
else {
img.src = mypics[c-2];
c--;
}
}
}
}
}

function init() {
if (document.addEventListener) {
document.addEventListener('keypress', processkey, false);
} else {
document.onkeypress = processkey;
}
img = document.getElementById(\"billede\");
}

</script>

";

echo "<div style='text-align: center;'><img src=\"".$pictures[$_REQUEST['start']]['pic']."\" style='margin-left: auto; margin-right: auto; border: solid 3px #888888;' id=\"billede\"></div>";

echo "<div style='color: #888888; font-weight: bold; font-size: 10px; text-transform:uppercase; margin-bottom: 10px; text-align: center;'>TRYK \"MELLEMRUM\" FOR AT SE NÆSTE BILLEDE<br /><br />ELLER BRUG 'a' og 'd' som frem og tilbage</div>";

}

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS