Avatar billede souledout Nybegynder
08. september 2002 - 22:05 Der er 15 kommentarer og
1 løsning

Billefremviser med variabel tekst

Hej eksperter!

Jeg søger en billed fremviser i html/java som fungerer efter forrige/næste-knap princippet. Hagen er så at jeg vil gerne kunne skrive en kort tekst under hvert billede uden at jeg skal lave en helt ny html-fil til det. Kan det lade sig gøre at angive i selve html-filen hvad der skal stå under hvert billede. Så noget lignende det her kan komme med i html-filen:

Billede1.jpg: Her er min hund
Billede2.jpg: Her er min kat
Billede3.jp3: Her er min fugl

osv osv...

Billederme har desuden forskellige størrelser, så det skal der evt også tages højde for?

/SouledOut
Avatar billede cthun Nybegynder
08. september 2002 - 22:22 #1
Det ville være lettere at lave i asp eller php... har du adgang til asp??
Avatar billede souledout Nybegynder
08. september 2002 - 22:24 #2
Nope... jeg ved godt det er nemmere, men jeg har desværre ikke adgang til asp eller php!
Avatar billede cthun Nybegynder
08. september 2002 - 22:31 #3
Så kan jeg desværre ikke hjælpe dig!
Avatar billede jakoba Nybegynder
08. september 2002 - 22:40 #4
Kan du bruge noget i retning af billedsekvenserne på denne side ?
http://home19.inet.tele.dk/karlebo/kfriber16bk.html

mvh JakobA
Avatar billede souledout Nybegynder
08. september 2002 - 22:46 #5
Jakob>> Jeg sidder faktisk lige og roder med den (jeg fandt den i et andet spørgsmål), men jeg kan overhovedet ikk finde hoved eller hale i den :-)

Men det er i hvert fald det princip jeg skal bruge, altså med

new imgElem( "image001.jpg", "below", "Her er min hund.")
new imgElem( "image002.jpg", "below", "Her er min kat.")

Har du en "ren" version, som er lidt mere overskuelig, og som jeg kan sætte min egen tekst ind i? Hvis du har er pointene dine!

/SouledOut
Avatar billede jakoba Nybegynder
08. september 2002 - 22:59 #6
du kan jo lægge et link til den side der giver problemer, så kan vi nok hitte ud af det der er galt.

men ellers:
<html>
<head><title>Karlebo Frivillige Beredskab</title>

<style>
A  { color : Blue;
    background-color: #ccddcc;
}
A:visited {
    color : #990099;
    background-color: #ccddcc;
}
A:Hover  {
    color : blue;
    background-color: #ddeedd;
}
</style>

<meta NAME="Generator" CONTENT="Stone's WebWriter 2">
</head>
<body BGCOLOR=#ccddcc TEXT="Black" LINK="Blue" VLINK="#990099" ALINK="Red"      onload=eval("preLoad()")>


<center><font SIZE="+2"><b>Beredskabsstævne i Sakskøbing</b></font></center>


<!-- Start: ligHTCC's Image Sequence Gallery -->

<!-- You are welcome to copy and use this script as
    you like but leave this note and my email in it
    unless you make *R*E*A*L* changes in the script.
    best
    JakobA  jakob.aggernaes@get2net.dk
  -->
<script LANGUAGE="JavaScript"> <!--

//alert ( "starting Image Sequence script" );

function ligHTCCsvars () {
  this.preloads  = 0;    // used to preload next image
  this.doneImage = 0;    // set to 1 when preload done
  this.timerId  = 0;    // interrupt admin. Do not touch
  this.txq      = 0;    // nr of image currently displayed
  this.txpic    = " ";
  this.txtxt    = " ";
  this.txaux    = " ";  // temporaries for building strings
  return this;
};  //end ligHTCCsvars

function imgElem (addr, where, tekst) {
  this.URL  = addr;    // image to be shown
  this.where = where;  // text on which side of image?
                        // "right", "left", "abowe", "below"
  this.tekst = tekst;  // text for this image
  return this;
};

var ligHTCCs = new Array(
  new ligHTCCsvars(),  // my local variables. Do not touch

//  Below you put in your image urls and texts.
//  URL written as would work in a link on the page (<A href=...>)
//  Each text is one long line. No returns are permitted within the texts
//

  new imgElem( "forplej10.jpg", 'below', "teksten skrives i en streng her"),

  new imgElem( "forplej03.jpg", 'abowe', "javascript har en del regler for tekster"),

  new imgElem( "forplej02.jpg", 'below', "du kan ikke skrive ' i en streng omkranset af '-tegn"),

  new imgElem( "femkmp01.jpg", 'abowe', 'eller " i en streng omkranset af "-tegn'),

  new imgElem( "femkmp02.jpg", 'below', "men så kan ju sætte den anden slags gåseøjne rundtom"),

  new imgElem( "femkmp04.jpg", 'abowe', "eller escape med \\, \" så er det ok.")
                      );

with ( ligHTCCs[0] ) {
  txq = 'nn';
  if ( location.search.length > 1 )
    txq = parseInt( eval(
      "location.search.substring(1,location.search.length)"));
  if ( typeof( txq ) != 'number' )
      txq = 1;  // the default value (no parameter)
  if ( 0 >= txq ) txq = 1
  else if (txq >= ligHTCCs.length)
    txq = 1;
}; // with ...


function preLoad() {
with ( ligHTCCs[0] ) {
if ( typeof( preloads ) == 'number' ) {
  if ( ligHTCCs.length-1 > txq) { // start preload of next image
//alert('preLoad started');
    preloads = new Image();
    preloads.src = ligHTCCs[txq+1].URL;
    doneimage = 0;
  } else { // last image. no more to load
    doneimage = 1;
  }; // if-2
} else {
  doneimage = (preloads.complete)?1:0;
}; // if-1
if ( doneimage == 0 ) {
  timerId = setTimeout("preLoad()",100);
};
}; // with (...)
}; //end preLoad()


function displayNextImage() {
//alert (" shownext ");
  countend = self.location.href.indexOf("?");
//alert ("countend=" +countend);
  if (countend == -1) {
    countend = self.location.href.length
  };
//alert ("countend=" +countend +"  href=" +self.location.href.substring(0,countend) );
  self.location = self.location.href.substring(0,countend) +"?"+(ligHTCCs[0].txq+1);
//  self.location.search = "?"+(ligHTCCs[0].txq+1);
}; //end displayImage()


// place Image Here
with (ligHTCCs[0]) { with (ligHTCCs[txq]) {
  txpic  = "<td valign='center'>"
          +'<center><IMG SRC="'+ URL+ '" BORDER=0 name="thisImage"></center></td>';
  txtxt  = '<td><center>'+ tekst+ '</center></td>';
  txaux  = '<p align="right">' +txq +'/' +(ligHTCCs.length-1)
          +'<center><table width="85%" cellpadding=5 border=0><tr>';
  if        (where=='right') {
    txaux += txpic +txtxt
  } else if (where=='below') {
    txaux += txpic +'</tr><tr>' +txtxt
  } else if (where=='left') {
    txaux += txtxt +txpic
  } else if (where=='abowe') {
    txaux += txtxt +'</tr><tr>' +txpic
  };
  txaux += '</tr></table></center>';
//alert ( "txaux  "+ txaux );
  document.writeln( txaux );
} }; // with ... with ...

// --> </script>

<!-- End: ligHTCC's Image Sequence Gallery -->

<!-- Begin: ligHTCC's Image Sequence Gallery (std. links) -->
<script LANGUAGE="JavaScript"> <!--

// place Row of links Here
with (ligHTCCs[0]) { with (ligHTCCs[txq]) {
  txaux  = '<p><center><FONT FACE="Verdana, Arial, Helvetica" COLOR="Navy">'
        + ( (ligHTCCs.length-1>txq)
            ?'<a href="java script:displayNextImage()">Næste Billede</a><p>'
            : '' )
        +'<a href="../kfriber16bk.html">Tilbage til billedvælgeren</a>'
        + '</font></center>';
//alert ( "txaux  "+ txaux );
  document.writeln( txaux );
} }; // with ... with ...

// --> </script>
<!-- End: ligHTCC's Image Sequence Gallery (std. links) -->


<p align='right'><font size=-1><!-- WebWriter AutoDato -->Updated 18 oktober 2000<!-- WW -->

</body>
</html>
Avatar billede souledout Nybegynder
08. september 2002 - 23:07 #7
Undskyld, men jeg glemte at sige at i stedet for  et "Tilbage til billed-vælger" linket, skal der være et "Forrige billede"-link

Kan det lade sig gøre?
Avatar billede jakoba Nybegynder
08. september 2002 - 23:17 #8
joda,  lav en ny ekstra funktion ligesom displayNextImage funktionen:

function displayPrevImage() {
  countend = self.location.href.indexOf("?");
  if (countend == -1) {
    countend = self.location.href.length
  };
  self.location = self.location.href.substring(0,countend) +"?"+(ligHTCCs[0].txq-1);
}; //end displayPrevImage()


og lav så linket i 'row of links'
// place Row of links Here
with (ligHTCCs[0]) { with (ligHTCCs[txq]) {
  txaux  = '<p><center><FONT FACE="Verdana, Arial, Helvetica" COLOR="Navy">'
        + ( ( txq>1 )
            ?'<a href="java script:displayPrevImage()">Forrige Billede</a><p>'
            : '' )
        + ( ( ligHTCCs.length-1>txq )
            ?'<a href="java script:displayNextImage()">Næste Billede</a><p>'
            : '' )
        + '</font></center>';

mvh JakobA
Avatar billede souledout Nybegynder
09. september 2002 - 02:24 #9
Er det muligt at sætte Næste- og Forrige-knappen på henholdvis højre og venstre side af billedet og centrere vertikalt i forhold til siden?

Jeg har forsøgt mig med noget ramme-værk, men sådan som koden er opbygget synes jeg næsten det er umuligt at ændre noget uden at siden kommer til at ligne røven på en hest!

Hvad skal der gøres (i ovenstående script)?

Jeg kan gost sætte lidt flere point af, hvis det skal være...


/SouledOut
Avatar billede jakoba Nybegynder
09. september 2002 - 02:46 #10
ikke flere points tak :-)

Ja det er muligt, men der er en komplikation der lige skal gennemtænkes. Som de links er udformet i øjeblikket bliver de ikke skrevet for enderne af sekvensen hvor der ikke er noget forrige/næste billede. Og det ville gøre placeringen af billedet skæv i de situationer.

En mulig løsning er at lade sekvensen gå i ring så 'næste' blev skrevet ved sidste billede og førte til det første (og omvendt ved forrige på første billede);  men ville det passe med din billedsekvens?

mvh JakobA
Avatar billede souledout Nybegynder
09. september 2002 - 02:51 #11
Det gør ikke noget at de kører i ring! Tværtimod!
Avatar billede jakoba Nybegynder
09. september 2002 - 03:10 #12
en anden (nem og mere designvenlig) mulighed er at spare nogle linier i højden på anden vis:
http://hjem.get2net.dk/Jakob.Aggernaes/temp/exp255670.html
Avatar billede jakoba Nybegynder
09. september 2002 - 03:11 #13
Ok vent lidt.
Avatar billede souledout Nybegynder
09. september 2002 - 03:29 #14
Jeg ville foretrække den måde, jeg spørger om... kan  det lade sig gøre?
Avatar billede jakoba Nybegynder
09. september 2002 - 03:35 #15
så skulle den ligge på adressen ovenfor. Husk at force load fra servere, så det ikke er den cashede du får.
Avatar billede souledout Nybegynder
09. september 2002 - 04:01 #16
Det virker perfekt...

Tusind tak for hjælpen!!

/SouledOut
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