Avatar billede domaz.dk Novice
01. september 2005 - 21:34 Der er 14 kommentarer og
1 løsning

billedegalleri forrige & næste?

Jeg har prøvet at få det her galleri til at virke, men uden held :/

Fandt det her på eksperten.

Selve php-delen i scriptet virker 100% så der må være noget galt med javascript-delen...

kode:

<?php
$dir = "gallery/20-08-2005/";
$types = array("gif","jpg");
$picture_array = array();
$tekst_array = array();
// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
            $a = explode(".",basename($file));
            if (in_array($a[count($a)-1],$types)) {
                $picture_array[] = "\"".$file."\"";
                $tekst_array[] = "\"".$file."\"";
            }
        }
        closedir($dh);
    }
}
?>

<script language="JavaScript">
var bill = new Array(<?php echo implode(",",$picture_array) ?>);
var txt = new Array(<?php echo implode(",",$tekst_array) ?>);

var pb3 = new Array();
for (y = 0; y < bill.length; y++) {
    pb3[y] = new Image();
    pb3[y] = bill[y];
}

function showPic(y) {
    y = (y == '' || y > (bill.length)-1)?0:(y < 0)?(bill.length)-1:y;
    document.getElementById("pic").src = "gallery/20-08-2005/" + pb3[y];
    document.getElementById("tekst").innerHTML = "<a href='" + txt[y] + "' target='_black'>Fullsize</a>";
    document.getElementById("plac_next").onclick = function() {
        showPic(y+1);
        return false;
    }
    document.getElementById("plac_prev").onclick = function() {
        showPic(y-1);
        return false;
    }
}
</script>
</head>
<body>

<table width="710" cellpadding="0" cellspacing="0">
  <tr>
    <td width="335" height="340" style="background: url(logo.jpg) no-repeat;">&nbsp;</td>
    <td width="375"><img src="gallery/20-08-2005/01.jpg" id="pic" width="375" height="340" alt=""></td>
  </tr>
  <tr>
    <td colspan="2" align="right" valign="top" style="background: url(bg_main.jpg) repeat-y;">
      <div align="right" style="margin-right: 50px; margin-bottom: 10px;"><a href="#" id="plac_prev">prev</a>&nbsp;&nbsp;<a href="#" id="plac_next">next</a></div>
      <div align="right" class="pic_overskrift" style="margin-right: 50px;" id="tekst"><a href='gallery/20-08-2005/01.jpg' target='_black'>Fullsize</a></div></td>
  </tr>
  <tr>
    <td height="20" colspan="2" style="background: url(bottom.jpg) no-repeat;">&nbsp;</td>
  </tr>
</table>

</body>
</html>
Avatar billede thesurfer Nybegynder
01. september 2005 - 21:38 #1
Hvordan ser den færdige kode ud? Via kildekoden efter at siden er loadet..

/theSurfer
Avatar billede domaz.dk Novice
01. september 2005 - 22:03 #2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background: url(bg.jpg);
    margin: 0px;
    font: 10px verdana;
}
</style>


<script language="JavaScript">
var bill = new Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg","07.jpg","08.jpg","09.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg","30.jpg","31.jpg","32.jpg","33.jpg","34.jpg","35.jpg","36.jpg","37.jpg","38.jpg","39.jpg","40.jpg","41.jpg","42.jpg","43.jpg","44.jpg","45.jpg","46.jpg","47.jpg","48.jpg");
var txt = new Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg","07.jpg","08.jpg","09.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg","30.jpg","31.jpg","32.jpg","33.jpg","34.jpg","35.jpg","36.jpg","37.jpg","38.jpg","39.jpg","40.jpg","41.jpg","42.jpg","43.jpg","44.jpg","45.jpg","46.jpg","47.jpg","48.jpg");

var pb3 = new Array();
for (y = 0; y < bill.length; y++) {
    pb3[y] = new Image();
    pb3[y] = bill[y];
}

function showPic(y) {
    y = (y == '' || y > (bill.length)-1)?0:(y < 0)?(bill.length)-1:y;
    document.getElementById("pic").src = "gallery/20-08-2005/" + pb3[y];
    document.getElementById("tekst").innerHTML = "<a href='" + txt[y] + "' target='_black'>Fullsize</a>";
    document.getElementById("plac_next").onclick = function() {
        showPic(y+1);
        return false;
    }
    document.getElementById("plac_prev").onclick = function() {
        showPic(y-1);
        return false;
    }
}
</script>
</head>
<body>

<table width="710" cellpadding="0" cellspacing="0">
  <tr>
    <td width="335" height="340" style="background: url(logo.jpg) no-repeat;">&nbsp;</td>
    <td width="375"><img src="gallery/20-08-2005/01.jpg" id="pic" width="375" height="340" alt=""></td>
  </tr>
  <tr>
    <td colspan="2" align="right" valign="top" style="background: url(bg_main.jpg) repeat-y;">
      <div align="right" style="margin-right: 50px; margin-bottom: 10px;"><a href="#" id="plac_prev">prev</a>&nbsp;&nbsp;<a href="#" id="plac_next">next</a></div>
      <div align="right" class="pic_overskrift" style="margin-right: 50px;" id="tekst"><a href='gallery/20-08-2005/01.jpg' target='_black'>Fullsize</a></div></td>
  </tr>
  <tr>
    <td height="20" colspan="2" style="background: url(bottom.jpg) no-repeat;">&nbsp;</td>
  </tr>
</table>

</body>
</html>
Avatar billede domaz.dk Novice
01. september 2005 - 22:11 #3
http://eksperten.dk/spm/543051

derfra jeg har den...
Avatar billede thesurfer Nybegynder
01. september 2005 - 22:27 #4
1) Hvad er det, der ikke virker / hvad gør den ikke, som den skal gøre?
2) Hvilken fejlmelding får du / Hvilken linie?

/theSurfer
Avatar billede domaz.dk Novice
01. september 2005 - 22:30 #5
der er ingen fejlmelding... den gider bare ikk at gå videre til næste billede... eller forrige for den sags skyld.. :S
Avatar billede domaz.dk Novice
01. september 2005 - 22:38 #6
Avatar billede thesurfer Nybegynder
01. september 2005 - 22:45 #7
Er der nogen specielt grund til, at du dynamisk indsætter onclick-click?
Kan du ikke bruge <a href... onclick="...">..</a> ?

Altså, skal det scriptes?

/theSurfer
Avatar billede domaz.dk Novice
01. september 2005 - 22:55 #8
prøvede at øndre det... nu kan den kun gå én tilbage og frem til det første billede igen.. :S
Avatar billede thesurfer Nybegynder
01. september 2005 - 23:02 #9
Modificeret kode:

var pb3 = new Array();
for (y = 0; y < bill.length; y++) {
    pb3[y] = new Image();
    pb3[y] = bill[y];
}

y=0; // nulstil tælleren

function showPic(pm) {
// pm = PlusMinus

if (pm == "+") {
    y = y + 1;
} else {
    y = y - 1;
}

if (y > bill.length-1) y = 0;
if (y < 0) y = bill.length-1;

document.getElementById("pic").src = "gallery/20-08-2005/" + pb3[y];
document.getElementById("tekst").innerHTML = "<a href='" + txt[y] + "' target='_black'>Fullsize</a>";

}

og:

<a href="#" onclick="showPic('-');return false">prev</a>&nbsp;&nbsp;<a href="#" onclick="showPic('+');return false">next</a>

/theSurfer
Avatar billede thesurfer Nybegynder
01. september 2005 - 23:04 #10
PS: ny kode (01/09-2005 23:02:07) erstatter din gamle kode.. HUSK: lav backup! :-)

/theSurfer
Avatar billede thesurfer Nybegynder
01. september 2005 - 23:06 #11
Når du bruger href="#", skal du huske også at bruge "return false" i onclick..

- Smider lige et svar..

/theSurfer
Avatar billede domaz.dk Novice
01. september 2005 - 23:11 #12
jeg siger MANGE tak.. :D nujh det var ved at gå mig på nerverne...
Avatar billede thesurfer Nybegynder
01. september 2005 - 23:15 #13
Det var så lidt :-)

Så kan evt overveje, om du vil skrive "billede nummer / antal billeder". Eksempel: 12/48

Så kan man se, hvor lange man er nået, og hvor mange billeder der er..

Takker for points :-)

/theSurfer
Avatar billede domaz.dk Novice
01. september 2005 - 23:47 #14
jaa... har du scriptet lige ved hånden...? :)
Avatar billede thesurfer Nybegynder
02. september 2005 - 16:04 #15
hehe.. Desværre.. har ikke lige scriptet ved hånden.. men tror godt at du kan finde ud af, at bruge et span-tag, og lidt JavaScript (f.eks. ".innerHTML" ).. :-)

/theSurfer
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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