Forrige/neste bilde ved å klikke på nåværende bilde

[Spenis]

Hei, jeg har en hjemmeside som jeg betaler for. Der har jeg en del bilder, men det som er litt iriterende er jo at man må bla for og se alle bildene mine, så jeg lurer på hvordan jeg kan få d til slik som facebook og nettby har det, at når du klikker på bildet så byter det til et nytt bilde....

 

Takk på forhond

Endret 13. april 2010 av Spenis

[Reached]

Ved å bruke javascript får du til dette på en enkel måte. her en ganske grei tutorial du kan følge for å få det til:

http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

 

håper det hjelper.

Endret 13. april 2010 av Reached

[Spenis]

Ved å bruke javascript får du til dette på en enkel måte. her en ganske grei tutorial du kan følge for å få det til:

http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

 

håper det hjelper.

 

D gikk ikke

[Skagen]

Hvis du har en masse bilder som heter noe slikt som:

 

image0000.jpg

image0001.jpg

image0002.jpg

osv.

 

Så er det veldig enkelt å lage et skript som sjekker om neste bilde finnes på serveren, og i så fall henter neste bilde når du klikker på de. Eksempel: http://skagen.cc/gallery/

JavaScript-koden finner du her: http://skagen.cc/gallery/gallery.js

 

Merk at det er en del problemer med en slik løsning:

 

• Regn med brukere uten JavaScript, så ha en "gammeldags" løsning med "Neste bilde"-knapp i tillegg.
  
• Bildene må ha én bestemt notasjon for å fungere (i mitt skript valgte jeg: prefiks + nummer + suffiks) og ha samme filetternavn, med mindre du modifiserer skriptet og gjør nødvendige endringer for å tillate eksempelvis blandede filtyper.
  
• Brukere kan ikke linke direkte til enkeltbilder via nettsidens URL, men må istedet høyreklikke og hente URLen direkte til bildet om de vil dele det med andre.

[Spenis]

Hvis du har en masse bilder som heter noe slikt som:

 

image0000.jpg

image0001.jpg

image0002.jpg

osv.

 

Så er det veldig enkelt å lage et skript som sjekker om neste bilde finnes på serveren, og i så fall henter neste bilde når du klikker på de. Eksempel: http://skagen.cc/gallery/

JavaScript-koden finner du her: http://skagen.cc/gallery/gallery.js

 

Merk at det er en del problemer med en slik løsning:

 

• Regn med brukere uten JavaScript, så ha en "gammeldags" løsning med "Neste bilde"-knapp i tillegg.
  
• Bildene må ha én bestemt notasjon for å fungere (i mitt skript valgte jeg: prefiks + nummer + suffiks) og ha samme filetternavn, med mindre du modifiserer skriptet og gjør nødvendige endringer for å tillate eksempelvis blandede filtyper.
  
• Brukere kan ikke linke direkte til enkeltbilder via nettsidens URL, men må istedet høyreklikke og hente URLen direkte til bildet om de vil dele det med andre.

 

 

Den koden du gidde link til går ikke an og åpne!

[Skagen]

Åpnes fint i Firefoxen min. Hvis du ikke får åpne direktelenken til .js-fila går det jo også an å høyreklikke i nettsiden der jeg demonstrerer skriptet og se på kilden. Da skal du i de fleste nettlesere finne en lenke til .js-fila i headeren som du kan åpne og se kildekoden på.

Bruker du Opera eller Firefox med FireBug finner du også koden i debuggeren, og kan studere i detalj hvordan skriptet fungerer når det kjøres (når du klikker på et bilde).

[Spenis]

Åpnes fint i Firefoxen min. Hvis du ikke får åpne direktelenken til .js-fila går det jo også an å høyreklikke i nettsiden der jeg demonstrerer skriptet og se på kilden. Da skal du i de fleste nettlesere finne en lenke til .js-fila i headeren som du kan åpne og se kildekoden på.

Bruker du Opera eller Firefox med FireBug finner du også koden i debuggeren, og kan studere i detalj hvordan skriptet fungerer når det kjøres (når du klikker på et bilde).

 

Å nå gikk det, virket med firefox. Skal se om jeg får det til nå

[Spenis]

Åpnes fint i Firefoxen min. Hvis du ikke får åpne direktelenken til .js-fila går det jo også an å høyreklikke i nettsiden der jeg demonstrerer skriptet og se på kilden. Da skal du i de fleste nettlesere finne en lenke til .js-fila i headeren som du kan åpne og se kildekoden på.

Bruker du Opera eller Firefox med FireBug finner du også koden i debuggeren, og kan studere i detalj hvordan skriptet fungerer når det kjøres (når du klikker på et bilde).

 

Men hvor skal jeg legge in bildene i denne koden?

 

function Gallery(imgID) {

var img = document.getElementById(imgID);

var n = -1;

var imagePrefix = "image";

var imageSuffix = ".jpg";

var zeroPadding = 4;

 

function fileExist(str) {

var request;

if (window.XMLHttpRequest) {

request = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

try {

request = new ActiveXObject('MSXML2.XMLHTTP.3.0');

}

catch(er) {

request = false;

}

}

if(!request) return false;

try {

request.open("HEAD", str, false);

request.send(null);

return (request.status == 200) ? true : false;

}

catch(er) {

return false;

}

}

 

function zeroPad(n, digits) {

n = n.toString();

while (n.length < digits) {

n = '0' + n;

}

return n;

}

 

 

this.nextImage = function() {

if(fileExist(imagePrefix + zeroPad((n + 1), zeroPadding) + imageSuffix)) {

n++;

img.src = imagePrefix + zeroPad(n, zeroPadding) + imageSuffix;

}

else if(fileExist(imagePrefix + zeroPad((0 + 1), zeroPadding) + imageSuffix)) {

n = 0;

img.src = imagePrefix + zeroPad(n, zeroPadding) + imageSuffix;

}

};

 

this.previousImage = function() {

if(fileExist(imagePrefix + zeroPad((n - 1), zeroPadding) + imageSuffix)) {

n--;

img.src = imagePrefix + zeroPad(n, zeroPadding) + imageSuffix;

}

};

 

if(img.src == "") {

this.nextImage();

}

else {

n = 0;

}

[Skagen]

I samme mappe som .js-fila. Poenget med fileExist()-funksjonen er at den sjekker om fila eksisterer på web-serveren, framfor at man må manuelt drive å vedlikeholde en liste med bildeadresser i JavaScript-koden.

Å vedlikeholde en slik liste manuelt i koden blir bare tungvindt og unødvendig, spesielt dersom man skal legge til flere bilder etterhvert.

Om du ønsker å legge bildene i en annen mappe enn den der .js-fila ligger er det jo bare å endre prefix-variablen slik at den inkluderer mappestrukturen, f.eks:

 

var imagePrefix = "../images/bilde"

 

Da henter den bilder fra undermappa "images", hvor alle filer begynner med ordet "bilde" slik som bilde0000.jpg, bilde0001.jpg, osv.

 

Alternativt begynnelsen av hele URLen:

var imagePrefix = "http://www.min-nettside.no/images/bilde"