[javascript] Foto-presentatie tekst erbij... - Softwareontwikkeling

woensdag 7 april 2004 02:33

Acties:

Verwijderd

Topicstarter

Het onderstaande is een bewerkt script.
Wat het doet is het volgende: als ik het script aanroep, maakt hij een array in javascript en daarmee maakt hij een fotoshow. Hij laat eerst foto 0 zien, en foto 1 loopt hierin over, en zo voort.

Wat ik nu wil, en waar ik ook al mee bezig ben, is dat tijdens dat wisselen van de foto, er telkens ook bijpassende teksten bij geschreven worden. Bijvoorbeeld eerst maar eens de bestandsnamen, later misschien als ik het door heb, wat ingewikkeldere dingen.
Code:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
   <title>Foto album - Slideshow</title> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<link rel="stylesheet" type="text/css" href="/styles.css"> 
</head> 
<body bgcolor="#000000" background="../images/achtergrond-staal.gif" onload='runSlideShow()'> 

<? 
$pics=array('foto1.jpg', 'foto2.jpg', 'foto3.jpg'); 
//array maar ff drastisch ingekort; er stonden ruim 80 fotos in ;) 
?> 
<script language="JavaScript"> 

// Set slideShowSpeed (milliseconds) 
var slideShowSpeed = 4000 
// Duration of crossfade (seconds) 
var crossFadeDuration = 3 


// Specify the image files 
var Pic = new Array() // don't touch this 
// to add more images, just continue 
// the pattern, adding to the array below 
<? 


for($i=0; $i < count($pics);$i++) 
{ 
print "Pic[$i] = 'http://urlnaarfotos/".$pics[$i]."'\n";//array voor weergave 

} 
?> 

var j = 0 
var h = 0 
var p = Pic.length 

var preLoad = new Array() 


var Bestandsnaam = new Array() 
<? 
for($i=0; $i < count($pics);$i++) 
{ 
print "Bestandsnaam[$i]='".$pics[$i]."'\n";//array voor filenames 
} 
//array_unshift($Bestandsnaam,'tekst1'); 
?> 

function runSlideShow(){ 
   if (document.all){ 
       document.images.SlideShow.style.filter="blendTrans(duration=2)" 
      document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)" 
      document.images.SlideShow.filters.blendTrans.Apply() 
   } 
   if (Pic[j] != ''){ 
      window.status='Loading : '+Pic[j] 
      preLoad[j] = new Image() 
      preLoad[j].src = Pic[j] 
      Pic[j] = '' 
          
       
      var tekst='blhaat'    
       
      window.status=tekst 
       
   } 
   document.images.SlideShow.src = preLoad[j].src 
   if (document.all){ 
      document.images.SlideShow.filters.blendTrans.Play() 
   } 
   j = j + 1 
   if (j > (p-1)) j=0 
   t = setTimeout('runSlideShow()', slideShowSpeed) 
} 
</script> 


<table align="center" width="500" cellspacing="1" cellpadding="0" align="center"> 
   <tr> 
      <td align="center"><br><br> 
         <table cellspacing="2" cellpadding="0" style="border: 1px solid #000000; background-color: #FFFFFF;"> 
         <tr> 
            <td> 
            [img]""[/img]<br> 
           
         </tr> 
            </td> 
         </table><br><br> 
      </td> 
   </tr> 
</table> 




<table align="center" width="500" cellspacing="1" cellpadding="0" align="center"> 
  <tr> 
  <td align="center" style="white-space: nowrap;"> <a href="javascript:history.back()">Stop de slide-show</a> </td> 
  </tr> 
</table> 
      </td> 
   </tr> 
</table> 
</body> 
</html>

Mjin vraag is nu: hoe kan ik ervoor zorgen dat bij het wisselen van de foto de juiste tekst wordt meegestuurd en weergegeven? Om in het voorbeeld te blijven: hoe kan ik ervoor zorgen dat bij de slideshow van foto's (die goed werkt) erboven de file-name afgedrukt wordt. De filenames zijn al beschikbaar in de array Bestandsnaan[i] alleen ik weet niet hoe ik dit nu boven de foto weergeef.

Ik ben meer een php-er en heb nog weinig javascript ervaring. Vandaag heb ik wel allerlei tutorials van Javascript doorgewerkt, en dat leverde hier en daar wel nieuwe inzichten op, maar niet de gewenste: ik weet nog niet hoe dit moet...

Wie helpt me?

Zowel opweg helpen met een stukje code als een goede verwijzing naar een methode / uitleg wordt erg gewaardeerd.

[ Voor 50% gewijzigd door Verwijderd op 08-04-2004 11:24 ]

woensdag 7 april 2004 09:05

Acties:

pagani

Maak een DIV-je boven de foto en verander daarvan steeds de innerHTML met behulp van het javascriptje

(Je kan het ook met andere zaken dan een DIV doen, bijv. een tekstveld)

(overigens raad ik je aan om eens te kijken naar xml ofzo om de gegevens van de foto's uit te halen, een array hard-coded vullen met zoveel data is niet zo netjes

)

[ Voor 33% gewijzigd door pagani op 07-04-2004 09:07 ]

woensdag 7 april 2004 17:42

Acties:

Verwijderd

Topicstarter

Hey bedankt voor je reactie, maar 't is me nog niet helemaal helder...

Wat ik gedaan heb, is me maar eens verdiepen in JavaScript, want php heb ik nu aardig onder de knie (kan samen met php.net in ieder geval een heel eind komen), maar JavaScript is voor mij nog redelijk onontgonnen gebied. Ik snap nu stukken meer van de werking van javascript.

Ik heb nu het volgende:
De foto's worden dmv een javascript functie die zichzelf aanroept, een voor een weergegeven in een img-tag. Daarboven of daaronder wil ik tekst weergeven (bijvoorbeeld de locatie, of misschien later de naam van het bestand, of een toepasselijke tekst). Dat laatste lukt wel, maar niet zoals ik het wil. Ik heb een voorbeeld gezien hoe je in een 'form', javascript-waarden kunt sturen... Dus nu heb ik het volgende script, verwerkt in de functie die de images laat zien:

code:

1	document.fototekstformulier.fototekst.value = Pic[j]

Hierbij is Pic[j] een element uit de array Pic.
Daarbij hoort ergens onder de table van foto de volgende code:

code:

1
2
3

<FORM name="fototekstformulier">
<INPUT type="text" size=100 name="fototekst"><P>
</FORM>

En ja, dat werkt, maar het is lelijk. De tekst wordt tegelijk veranderd met de foto, maar wel in een input-veld van een formulier, in plaats van in een p-tag of in een <div> tag. Dat laatste lukt me niet.

Ik probeerde iets van <div name="fototekstformulier"></div>
Maar ja, dat werkte niet, en wellicht begrijpelijk, omdat 'value' wel een attribuut is van <input> maar niet van div.

Mijn vraag is, hoe geef ik de variabele tekst weer in een een p-tag of in een div-tag of in ieder geval zó dat het geen input-veld is (mag ook een td-tag zijn of nog iets anders).

Hierover heb ik niet echt wat kunnen vinden

En over xml: dat is helemaal nog onbekend terrein voor me, dus wie weet waag ik me daar ook nog eens aan. Zou je kunnen aangeven wat hieraan het probleem is? Zware belasting voor de webserver? Wat is 't voordeel voor xml?

Misschien moet ik er idd snel naar gaan kijken, maar nu heb k nog een beetje een houding van: 't werkt zo ook prima, en t is meer voor dat het er leuk uit ziet, en niet voor iets professioneels... Alleen als er echt redenen zijn om het te veranderen, dan moet k daar mee aan de slag...

woensdag 7 april 2004 17:46

Acties:

Verwijderd

Topicstarter

En tegelijkertijd nog even een vraagje:
Is er ook iets als een php.net voor javascript?
Dus een site waarop alle beschikbare functies van javascript zijn uitgelegd?
De meeste sites die ik tegenkom, hebben wat info over de basics en de alerts etc. maar niet over de beschikbare functies...

Ben benieuwd.

woensdag 7 april 2004 18:57

Acties:

T-MOB

Voor je eerste probleem:

code:

1	document.getElementbyId('id_van_div').innerHTML = "fototekst"

De tutorial is ff Googlen. Zelf vind ik deze wel 's handig: link

Regeren is vooruitschuiven

woensdag 7 april 2004 20:12

Acties:

crisp

Devver

Pixelated

Als het enkel om statische tekst gaat van 1 element gebruik dan liever firstChild.nodeValue

en wb een goede javascript reference: http://devedge.netscape.c...javascript/1.5/reference/

Intentionally left blank

woensdag 7 april 2004 23:32

Acties:

Verwijderd

Topicstarter

donderdag 8 april 2004 01:20

Acties:

Verwijderd

Topicstarter

PHP:

<div id="testje"></div> 
<script language="JavaScript"> 
document.getElementById('testje').innerHTML='hello'; 
</script>

Ik snap er echt heel weinig van; k heb écht al vanalles uitgeprobeerd. Ook via de links met string-replace functies, maar dat lukte ook niet echt...

Het enige wat ik wil, is dat 'hello' in dit geval in beeld verschijnt, in de <div>-sectie. Het scriptje hier, levert een leeg document op.

Om het even duidelijker te maken heb ik dan hier de site waarop ik aan 't prutsen ben. ***url verwijderd...***

In een <div> tag, of in een p-tag, wil ik telkens de fotonaam hebben. In een array staat in ieder geval al de locatie (die op het genoemde script ook zichtbaar is, en inderdaad verandert). Wat ik nu wil is dat ik niet zo'n lelijk wit balkje heb (van de <input> tag), maar dat ik gewoon tekst heb, in de style van de site. Die tekst moet meeveranderen als de foto ook verandert.

Vandaar het testscriptje, om te zorgen dat ik in een div-tag, ipv in een <input-tag, iets kan plaatsen.

Wie wil het even voorzeggen hoe het moet? Want ik kom er gewoon niet uit, terwijl ik wel vanalles probeer. Een werkend testscriptje zou errug handig zijn nu, want k heb volgens mij 't hele internet afgezocht

Of ligt het aan mijn browser? Ik heb I.E. 6.0, en ik las hier en daar ook iets over dat innerHTML niet overal ondersteund zou zijn? Dan is wellicht een andere methode vereist...

[ Voor 25% gewijzigd door Verwijderd op 08-04-2004 11:25 ]

donderdag 8 april 2004 06:55

Acties:

crisp

Devver

Pixelated

innerHTML wordt door alle moderne browsers ondersteund, dus dat is geen probleem. Het is wel een beetje ranzig omdat het geen officiele DOM method is.
Voor betere foutmeldingen kan je het best Mozilla of FireFox gebruiken om te debuggen.

Intentionally left blank

donderdag 8 april 2004 10:44

Acties:

T-MOB

Je moet ff iets in je DIV plaatsen, een spatie ofzo. Anders vindt de browser dat je DIV geen eigenschappen heeft en kan ie ook innerHTML niet aanpassen....

Regeren is vooruitschuiven

donderdag 8 april 2004 11:09

Acties:

Verwijderd

Topicstarter

Hopza, het werkt!
Allemaal hardstikke bedankt!

En dat het geen officiële DOM methode is, neem ik maar even voor lief; volgens mij gebruiken de bezoekers (met name de leden) van de site allemaal IE 6 (kan k geloof ik wel ergens in statistieken nazoeken), en anders zien ze wellicht geen tekst...

Ook bedankt voor de gegeven links; k zal er nog vaak naar kijken om allerlei functies in js te proberen. K ben er nog niet erg in thuis...

[ Voor 93% gewijzigd door Verwijderd op 08-04-2004 11:19 ]

donderdag 8 april 2004 11:23

Acties:

Verwijderd

Topicstarter

oeps, onbedoelde post

(mag van mij wel weg)

[ Voor 96% gewijzigd door Verwijderd op 08-04-2004 11:26 ]

donderdag 8 april 2004 23:39

Acties:

crisp

Devver

Pixelated

innerHTML wordt zoals ik al eerder zei door bijna alle browsers ondersteund ook al is het geen standaard DOM methode. Echter is het gewoon zwaar geschut in deze situatie:

HTML:

<div id="bla"> </div>
<script type="text/javascript">
document.getElementById('bla').firstChild.nodeValue = 'Nieuwe tekst';
</script>

Intentionally left blank

vrijdag 9 april 2004 00:31

Acties:

djluc

@carlozz:
Je had de oplossing toch al gehad op PHPFreakz? Daar had je echter al wel wat tekst in de div staan. Niet gemerkt dat je dat veranderd had?

vrijdag 9 april 2004 01:13

Acties:

T-MOB

crisp schreef op 08 april 2004 @ 23:39:
innerHTML wordt zoals ik al eerder zei door bijna alle browsers ondersteund ook al is het geen standaard DOM methode.

Da's het nadeel van Javascript leren in een 5k contest

. innerHTML scheelt 11 bytes

Regeren is vooruitschuiven

vrijdag 9 april 2004 12:24

Acties:

crisp

Devver

Pixelated

T-MOB schreef op 09 april 2004 @ 01:13:
[...]

Da's het nadeel van Javascript leren in een 5k contest . innerHTML scheelt 11 bytes

alles is een afweging, innerHTML is wel een stuk trager in sommige gevallen (zoals enkel een textNode aanpassen)

[ Voor 10% gewijzigd door crisp op 09-04-2004 12:24 ]

Intentionally left blank

vrijdag 9 april 2004 15:43

Acties:

Verwijderd

Topicstarter

djluc schreef op 09 april 2004 @ 00:31:
@carlozz:
Je had de oplossing toch al gehad op PHPFreakz? Daar had je echter al wel wat tekst in de div staan. Niet gemerkt dat je dat veranderd had?

Ik had de oplossing nog niet werkend gekregen door php-freakz op het moment dat ik hier nog doorvraagde. Anders zou ik zelf wel even uittesten wat nu wel en wat nu niet werkte. Dat heb ik op php-freakz ook uitgelegd, en mijn wijsheid komt van dit topic, namelijk dat er wel html in de div moet staan om innerHTML te kunnen gebruiken, zodat hij ook daadwerkelijk iets te verplaatsen heeft.

Bij php-freakz kreeg ik ook de oplossing om eventueel de div toch leeg te maken, en de html en de body tag eromheen te zetten, waarna het ook werkt...

vrijdag 9 april 2004 15:54

Acties:

djluc

Dat is toch sowieso het geval, die html en body tag?

vrijdag 9 april 2004 16:23

Acties:

Verwijderd

Topicstarter

Ja, dat hoort wel in een standaard html document, dat ben ik zeker met je eens, maar om even te testen of de oplossing werkt, heb ik ze telkens achterwege gelaten.

Je test dan op de volgende code, zonder iets eromheen, wat dus een foutmelding van javascript oplevert.

PHP:

<div id="bla"></div>
<script type="text/javascript">
document.getElementById('bla').firstChild.nodeValue = 'Nieuwe tekst';
</script>

Het onderstaande werkt wel, zonder html of bodytag eromheen.

PHP:

<div id="bla"> &nbsp; </div>
<script type="text/javascript">
document.getElementById('bla').firstChild.nodeValue = 'Nieuwe tekst';
</script>

Kortom: k ben ’t met je eens dat de body en html tag in alle html-documenten thuishoren, maar ik heb nooit begrepen dat dat ook echt invloed had; ik zette het er altijd in omdat dat zo ‘hoorde’. En ja, de body tag gebruik je dan nog wel eens, maar de <html>-tag eigenlijk nooit, ik dacht dat dat meer voor ’t overzicht was.

Nu blijkt dat het toch wel handig is om ze ook in testscripts gewoon wel te gebruiken.

PS: uiteraard moet je de <? en ?> tekens uit het weergegeven script even wegdenken, die worden door het script van tweakers.net toegevoegd omdat ik de [php] tag gebruik voor de opmaak op t forum.

[ Voor 18% gewijzigd door Verwijderd op 09-04-2004 16:25 . Reden: PSje erbij ]

vrijdag 9 april 2004 16:34

Acties:

crisp

Devver

Pixelated

zonder body is er ook geen document

HTML:

<body>
<div id="bla"></div>
<script type="text/javascript">
var div = document.getElementById('bla'), text;
if (text = div.firstChild == null) text = div.appendChild(document.createTextNode(''));
text.nodeValue = 'Nieuwe tekst';
</script>
</body>

Intentionally left blank

vrijdag 9 april 2004 16:46

Acties:

djluc

offtopic:
[quote]PS: uiteraard moet je de <? en ?> [...] de [php] tag gebruik voor de opmaak op t forum.[/quote]
Daarvoor hebben we de code tags: [ code=html]

zonder body is er ook geen document

Inderdaad erg logisch als je het zo bekijkt.

[ Voor 26% gewijzigd door djluc op 09-04-2004 16:47 ]

vrijdag 9 april 2004 22:45

Acties:

Verwijderd

Topicstarter

offtopic:
Aha, zo leer ik het forum hier ook nog eens gebruiken. [code=html] is ook gewoon mogelijk... ideaal...

[ Voor 3% gewijzigd door Verwijderd op 09-04-2004 22:46 ]

Pagina: 1

Reageer