Script aanpassen in een dreamweaver pagina

Status
Niet open voor verdere reacties.
J

JetskeVermaak

Gebruiker
Lid geworden
26 okt 2007
Berichten
10
Het volgende script:

<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Script aangeboden door http://www.webklik.nl/gratis-webtools -->
beeld0 = new Image();
beeld0.src = "http://img527.imageshack.us/img527/4479/001yc3.jpg";

beeld1 = new Image();
beeld1.src = "http://img77.imageshack.us/img77/6118/005pw0.jpg";

beeld2 = new Image();
beeld2.src = "http://img503.imageshack.us/img503/6549/008dx9.jpg";

beeld3 = new Image();
beeld3.src = "http://img503.imageshack.us/img503/5990/00ty1wf8.jpg";

<!-- deze functie niet wijzigen -->
function beeldwissel(a,b) {
document.images[a].src = eval(b + ".src")}

</script>
</head>


<body>
<center>
<table border="1" cellspacing="0" bordercolor="#003366" width="400" height="240">
<tr>

<td width="90" height="60"><A HREF="#" ONClick="beeldwissel('beeldvenster','beeld0')"><img src="http://img527.imageshack.us/img527/4479/001yc3.jpg" width="90" height="60" border="0"></A></td>

<td width="320" height="240" rowspan="4"><center><IMG SRC="http://img527.imageshack.us/img527/4479/001yc3.jpg" WIDTH="323"
HEIGHT="249" NAME="beeldvenster"></center></td>

</tr>
<tr>

<td width="90" height="60"><A HREF="#" ONClick="beeldwissel('beeldvenster','beeld1')"><img src="http://img77.imageshack.us/img77/6118/005pw0.jpg" width="90" height="60" border="0"></A></td>

</tr>
<tr>

<td width="90" height="60"><A HREF="#" ONClick="beeldwissel('beeldvenster','beeld2')"><img src="http://img503.imageshack.us/img503/6549/008dx9.jpg" width="90" height="60" border="0"></A></td>

</tr>
<tr>

<td width="90" height="60"><A HREF="#" ONClick="beeldwissel('beeldvenster','beeld3')"><img src="http://img503.imageshack.us/img503/5990/00ty1wf8.jpg" width="90" height="60" border="0"></A></td>

</tr>

</table>
</center>
</body>
</center>


Wil ik in dreamweaver plakken.
De tabel verander ik zo dat de miniaturen boven komen te staan en de uitvergroting onder.
Het aantal foto's boven de uitvergroting wil ik aanpassen 8 van 100x100 en de vergroting 400x400.
Dat lukt allemaal.

Vervolgens wil ik natuurlijk mijn eigen foto's hier in plakken, er staat nog niks online.
Wat moet ik nu precies in het script veranderen als ik wil verwijzen naar mijn eigen foto's?
 
Ik heb het script even nagelezen, en denk dat het makkelijker kan.
Het script is wat rommelig..

Als ik je goed begrijp wil je een rij "tumbs" (kleine plaatjes) waar je op klikt
en daaronder een plek waar de grote foto zichtbaar wordt.

Het eenvoudigst doe je dat met een i-frame. i.p.v. Java-script.
(dit is lastig als je er niet zo goed mee overweg kunt)

Code: 
<html><head><body>

<a href="plaatje_groot.jpg" target="frame1">
<img src="plaatje.jpg" width="100" height="100" /> </a>

  <center>
<p><iframe name="frame1" src="ander_plaatje.jpg" width="450" heigt="450" scrolling="auto" frameborder="1"> </iframe></p>
  </center>

</body></html>

Bedoel je dit??
Probeer het eens.

Dawn Jan
 
Hoi Dawn,
Bedankt voor je reactie.
Een iFrame zoek ik niet omdat ik een schuifbalk niet zo mooi vind.

Hier nog een voorbeeld van het script:
http://www.webklik.nl/scripts/demo174

deze is ook mooi:
http://home.planet.nl/~cruqsoft/fotoshow.html
maar die vind ik te lastig

Ik heb ook zit kijken in photoshop... de webfotogalriestijl moet te veranderen zijn, lijk me wel handig, als je een keer je vormgeving klaar hebt om vervolgens deze te kunnen gebruiken op deze manier, ik maak namelijk een digitale portfolio, dus die zou ik dan voor meerdere pagina's kunnen gebruiken, maar goed dat is weer een geheel nieuwe vraag.
 
Dit is waarschijnlijk wel handig:
PHP: 
<script type="text/javascript">
 function show(thumb) {
  document.getElementById('photo').src = thumb.src;
  };
</script>

<style type="text/css">
 #photo { width: 400px; height: 400px;}
 .thumb { width: 100px; height: 100px; cursor: pointer;}
</style>

<img class="thumb" src="foto_01.jpg" onclick="show(this)"><img class="thumb" src="foto_02.jpg" onclick="show(this)"><img class="thumb" src="foto_03.jpg" onclick="show(this)"><img class="thumb" src="foto_04.jpg" onclick="show(this)"><br>
<img class="thumb" src="foto_05.jpg" onclick="show(this)"><img class="thumb" src="foto_06.jpg" onclick="show(this)"><img class="thumb" src="foto_07.jpg" onclick="show(this)"><img class="thumb" src="foto_08.jpg" onclick="show(this)"><br>
<img id="photo" src="foto_01.jpg"><br>
Kleine foto's geef je weer als:
<img class="thumb" src="foto_01.jpg" onclick="show(this)">
ipv van foto_01.jpg vul je daar de naam van een 400 x 400 foto in. De style / class zorgt ervoor dat het als 100 x 100 wordt weergegeven, met een handje bij het aanwijzen. onclick="show(this)" geeft de 'thumb' als grote foto weer als je erop klikt.

Die grote foto plaats je als:
<img id="photo" src="foto_01.jpg">

Zo heb je geen thumbnails nodig en zijn alle foto's al meteen geladen. :)


Vr.Gr. Egel.
 
Jaaaa, je bent geweldig!
Dat is precies wat ik zoek en hij werkt!

:thumb:

Ga ik nog wel even apart wat posten over de Photoshop functie.
 
Laatst bewerkt:
zoiets zoek ik ook
alleen mijn plaatjes zijn allemaal van ander formaat
rechthoekig en vierkant door elkaar... hoe los ik dit op?
 
Beste Egel,

Je hebt een fijn scriptje gemaakt!
Ik heb er echter 1 vraagje over. Waarschijnlijk te makkelijk voor woorden, maar ik heb nog nooit iets met PHP gedaan. Het script werkt perfect maar ik zou een witruimte willen tussen de thumnails en de vergrote afbeelding.

Ik dacht ik zet het gewoon ff in een tabel maar het lukt me niet erg.
Mijn excuses voor deze vraag, maar ik heb echt nog nooit met PHP gewerkt vandaar. (natuurlijk wil ik het wel gaan leren, maar daar ben je wel ff mee bezig...)

Alvast bedankt
 
brakkeleer zei:
Het script werkt perfect maar ik zou een witruimte willen tussen de thumnails en de vergrote afbeelding.

Ik dacht ik zet het gewoon ff in een tabel maar het lukt me niet erg.
Klik om te vergroten...
Zo ongeveer?
PHP: 
<script type="text/javascript">
 function show(thumb) {
  document.getElementById('photo').src = thumb.src;
  };
</script>

<style type="text/css">
 body { background: #ccc;}
 table.show { background: #fff;}
 table.show td { text-align: center; vertical-align: middle;}
 #photo { width: 400px; height: 400px; border: 2px solid #000; }
 .thumb { width: 100px; height: 100px; cursor: pointer;}
</style>

<table class="show" cellspacing="2" cellpadding="0">
 <tr>
  <td><img class="thumb" src="foto_01.jpg" onclick="show(this)"></td>
  <td><img class="thumb" src="foto_02.jpg" onclick="show(this)"></td>
  <td><img class="thumb" src="foto_03.jpg" onclick="show(this)"></td>
  <td><img class="thumb" src="foto_04.jpg" onclick="show(this)"></td>
 </tr><tr>
  <td colspan=4"><img id="photo" src="foto_01.jpg"></td>
 </tr><tr>
  <td><img class="thumb" src="foto_05.jpg" onclick="show(this)"></td>
  <td><img class="thumb" src="foto_06.jpg" onclick="show(this)"></td>
  <td><img class="thumb" src="foto_07.jpg" onclick="show(this)"></td>
  <td><img class="thumb" src="foto_08.jpg" onclick="show(this)"></td>
 </tr>
</table>
Je krijgt wel wat meer witruimte om de grote foto maar dat heb ik opgelost met een zwart randje, die kan je ook wit (#fff) maken natuurlijk. :)

loecje zei:
zoiets zoek ik ook
alleen mijn plaatjes zijn allemaal van ander formaat
rechthoekig en vierkant door elkaar... hoe los ik dit op?
Klik om te vergroten...
Ongeveer op dezelfde manier alleen kan je niet van alle thumbs in 1x de grootte opgeven:
PHP: 
<script type="text/javascript">
 function show(thumb) {
  document.getElementById('photo').src = thumb.src;
  };
</script>

<style type="text/css">
 body { background: #ccc;}
 table.show { background: #fff;}
 table.show td { text-align: center; vertical-align: middle;}
 #photo { border: 2px solid #000;}
 .thumb { cursor: pointer;}
</style>

<table class="show" cellspacing="2" cellpadding="0">
 <tr>
  <td><img class="thumb" width="100" src="foto_01.jpg" onclick="show(this)"></td>
  <td><img class="thumb" width="100" src="foto_02.jpg" onclick="show(this)"></td>
  <td><img class="thumb" width="100" src="foto_03.jpg" onclick="show(this)"></td>
  <td><img class="thumb" width="100" src="foto_04.jpg" onclick="show(this)"></td>
 </tr><tr>
  <td colspan=4" width="410" height="410"><img id="photo" src="foto_01.jpg"></td>
 </tr><tr>
  <td><img class="thumb" width="100" src="foto_05.jpg" onclick="show(this)"></td>
  <td><img class="thumb" width="100" src="foto_06.jpg" onclick="show(this)"></td>
  <td><img class="thumb" width="100" src="foto_07.jpg" onclick="show(this)"></td>
  <td><img class="thumb" width="100" src="foto_08.jpg" onclick="show(this)"></td>
 </tr>
</table>
De grootte van elke thumb geef je op met width="100" waarbij je 100 vervangt door de breedte gedeeld door 4. En de afmeteing van de middelste tabel-cel geef je op met width="410" height="410", daar vul je de grootste lengte en de grootste breedte in die een foto kan hebben +10 (voor 5x de cellspacing). :)


Vr.Gr. Egel.
 
dat het zo kon had ik door, maar is er geen manier(of programa) waarbij dat automatisch gaat? het zijn zo'n 80 plaatjes, en er komen er steeds meer bij
van die plaatjes met tekst erin die ik zelf maak, en groote hangt gewoon af van het basisplaatje dat ik gebruik en de tekst.
 
loecje zei:
maar is er geen manier(of programa) waarbij dat automatisch gaat?
Klik om te vergroten...
Jawel, zo bijvoorbeeld:
PHP: 
<script type="text/javascript">
 function show(thumb) {
  document.getElementById('photo').src = thumb.src;
  };

 function resize(obj) {
  obj.width /= 4;
  obj.style.cursor = 'pointer';
  obj.onload = null;
  };
</script>

<img src="foto_01.jpg" onload="resize(this)" onclick="show(this)">
<img src="foto_02.jpg" onload="resize(this)" onclick="show(this)">
<img src="foto_03.jpg" onload="resize(this)" onclick="show(this)">
<img src="foto_04.jpg" onload="resize(this)" onclick="show(this)">
<img src="foto_05.jpg" onload="resize(this)" onclick="show(this)">
<img src="foto_06.jpg" onload="resize(this)" onclick="show(this)">
<img src="foto_07.jpg" onload="resize(this)" onclick="show(this)">
<img src="foto_08.jpg" onload="resize(this)" onclick="show(this)">

<img id="photo" src="foto_01.jpg">
Zo worden de plaatjes allemaal 1/4 van de grootte. Het kan ook met een maximum lengte en breedte:
PHP: 
 var maxWidth = 120, maxHeight = 120;
 function resize(obj) {
  var x = Math.ceil(obj.width / maxWidth);
  var y = Math.ceil(obj.height / maxHeight);
  var q = Math.max(x,y);
  if (q > 1) obj.width /= q;
  obj.onload = null;
  };
:)


Vr.Gr. Egel.
 
Beste Egel,

Hardstikke bedankt!
Het is een super script!:thumb:

Het werkt prima zo met die witruimte!

Groetjes
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan