Javascript: &quot;inzoomen&quot; op een figuur

vrijdag 6 februari 2004 09:05

Analytics dude

Je kunt een aantal dingen doen, of je zet de 6 plaatjes in een array waar je door heen kunt lopen. In dat geval is het zoomen een kwestie van een stap verder of terug in de array totdat je niet verder kunt. Of je checkt bij elke zoom-klik of het laatste getal in de naam van het plaatje tussen 0 en 5 zit. En dat getal kun je dan verhogen cq verlagen.

Het disablen van de buttons is simpel, zoek maar op ".disabled button".

Gaat het bij elk product om 6 zoomplaatjes of is dat dynamisch, en waar haal je dat weg: uit een database ofzo?

Acties:

vrijdag 6 februari 2004 09:20

Devver

Pixelated

zmn schreef op 06 februari 2004 @ 08:48:
Ondersteunt je server ook PHP of ASP, dat is namelijk een must voor dynamische sites en daarmee is zo'n scriptje snel gemaakt

JS is hier juist heel geschikt voor.

Voorbeeldje:

HTML:

<html>
<head>
<title>zoom in en uit</title>
<script type="text/javascript">

//preload pictures
var images = [];
images[0] = new Image(); images[0].src='image1.gif';
images[1] = new Image(); images[1].src='image2.gif';
images[2] = new Image(); images[2].src='image3.gif';
images[3] = new Image(); images[3].src='image4.gif';
images[4] = new Image(); images[4].src='image5.gif';

var curpic = 2;

function zoom(n) {

  var newpic = curpic + n;
  if (newpic < 0 || newpic >= images.length) return;

  document.getElementById('route').src = images[newpic].src;
  if (newpic == 0)
    document.getElementById('zoomout').className = 'inactive';
  else if (curpic == 0)
    document.getElementById('zoomout').className = 'active';
  else if (newpic == images.length - 1)
    document.getElementById('zoomin').className = 'inactive';
  else if (curpic == images.length - 1)
    document.getElementById('zoomin').className = 'active';

  curpic = newpic;

}

</script>
<style type="text/css">

span.active {
  color: #000000;
  cursor: pointer;
  cursor: hand;
  text-decoration: underline;
}

span.inactive {
  color: #808080;
  cursor: default;
  text-decoration: none;
}

</style>
</head>
<body>
<img id="route" src="image3.gif" alt="" width="100" height="100" /><br />
<span id="zoomout" class="active" onclick="zoom(-1)">zoom uit</span>
 <span id="zoomin" class="active" onclick="zoom(1)">zoom in</span>
</body>
</html>

Intentionally left blank

Acties:

vrijdag 6 februari 2004 09:24

Topicstarter

Hey,
Bedankt voor de snelle antwoorden!
De server ondersteunt PHP. Maar daar ken ik net zoveel van als javascript.

Code interpreteren en aanpassen naar mijn noden lukt wel, maar van nul code schrijven lukt me niet echt.

Goed. Bedankt voor de javascript!!
Ik heb je voorbeeld hier gezet: http://www.aendekerk.be/zoom. Maar volgens mij is er toch een foutje ingeslopen... Probeer eens in- en uit te zoomen? Niet alle figuren worden geladen (alle imagex.gif's bestaan nochtans). Ik vind de fout niet echt.

Om het (nog) moeilijker te maken:
* Is het mogelijk om de figuren pas te laden als ze door de gebruiker opgevraagd worden? Want ik ga wegenkaarten gebruiken, en als er meteen 5 worden geladen kan dat wel even duren voor mensen zonder ADSL/Kabel.
* Is het mogelijk de "zoom in" en "zoom out" knop te vervangen door figuren? En dat ze ipv grijs te worden gewoon een andere gif laden?

Bedankt voor jullie hulp! Ik hou jullie zeker op de hoogte van het eindresultaat!

Dries

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

Acties:

vrijdag 6 februari 2004 09:28

Analytics dude

Dries_Aendekerk schreef op 06 februari 2004 @ 09:20:
Om het (nog) moeilijker te maken:
* Is het mogelijk om de figuren pas te laden als ze door de gebruiker opgevraagd worden? Want ik ga wegenkaarten gebruiken, en als er meteen 5 worden geladen kan dat wel even duren voor mensen zonder ADSL/Kabel.

Ja dat kan, gewoon de images niet preloaden

* Is het mogelijk de "zoom in" en "zoom out" knop te vervangen door figuren? En dat ze ipv grijs te worden gewoon een andere gif laden?

Ja tuurlijk, als je de zoom images kunt veranderen kan dat ook bij de knoppen.

Acties:

BarôZZa

Om niet te pre-loaden doe je in het script:

document.fotonaam.src=url/pad

je moet dan natuurlijk wel bij de image een name-tag instellen.

vrijdag 6 februari 2004 09:38

Acties:

vrijdag 6 februari 2004 09:45

Devver

Pixelated

Dries_Aendekerk schreef op 06 februari 2004 @ 09:20:
[...]
Goed. Bedankt voor de javascript!!
Ik heb je voorbeeld hier gezet: http://www.aendekerk.be/zoom. Maar volgens mij is er toch een foutje ingeslopen... Probeer eens in- en uit te zoomen? Niet alle figuren worden geladen (alle imagex.gif's bestaan nochtans). Ik vind de fout niet echt.
[...]

sorry, C/P foutje in mijn voorbeeld; dat krijg je als je het uit het blote hoofd doet zonder te testen

Intentionally left blank

Acties:

vrijdag 6 februari 2004 09:49

Topicstarter

Waar zit dan het foutje?
Sorry, ben een n00b, ik weet het.

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

Acties:

vrijdag 6 februari 2004 09:50

Devver

Pixelated

Dries_Aendekerk schreef op 06 februari 2004 @ 09:45:
Waar zit dan het foutje?
Sorry, ben een n00b, ik weet het.

In de preload had ik overal images[0] staan

Intentionally left blank

Acties:

vrijdag 6 februari 2004 09:57

Analytics dude

crisp schreef op 06 februari 2004 @ 09:49:
[...]

In de preload had ik overal images[0] staan

Sjonge jonge, nepcodert.

Er zit nog een fout in IMHO

Acties:

vrijdag 6 februari 2004 10:01

Devver

Pixelated

André schreef op 06 februari 2004 @ 09:50:
[...]

Sjonge jonge, nepcodert.

Er zit nog een fout in IMHO

hij lijkt nu goed te werken hoor...

Intentionally left blank

Acties:

vrijdag 6 februari 2004 10:03

Analytics dude

crisp schreef op 06 februari 2004 @ 09:57:
[...]

hij lijkt nu goed te werken hoor...

Oeh gatsie, denkfoutje van mijzelf.

crisp l44t-c0d4rt

Acties:

vrijdag 6 februari 2004 10:13

Devver

Pixelated

André schreef op 06 februari 2004 @ 10:01:
[...]

Oeh gatsie, denkfoutje van mijzelf.

crisp l44t-c0d4rt

wie is er nou een pruts0rt?

Intentionally left blank

Acties:

vrijdag 6 februari 2004 10:16

Topicstarter

Idd.
Nu werkt het wel.
Ga nog wat prutsen i.v.m. het niet op voorhand laden van de images, de knopjes die grijs worden (ipv woorden) en layout. Ik hou jullie op de hoogte van het eindresultaat.

Bedankt!

Dries

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

Acties:

zondag 8 februari 2004 11:22

Devver

Pixelated

Dries_Aendekerk schreef op 06 februari 2004 @ 10:13:
Idd.
Nu werkt het wel.
Ga nog wat prutsen i.v.m. het niet op voorhand laden van de images, de knopjes die grijs worden (ipv woorden) en layout. Ik hou jullie op de hoogte van het eindresultaat.

Bedankt!

Dries

idd, zelf prutsen leer je het meest van, maar een werkende basis is altijd prettig

suc6

offtopic:
je hoeft niet onder elke post je naam te zetten hoor; je nick staat immers al bij je post

Intentionally left blank

Acties:

zondag 8 februari 2004 12:05

Topicstarter

Hmm...
't is blijkbaar toch wat tegengevallen, die javascript. :-/
Wil iemand mij in jip- en janneke-taal uitleggen hoe:
* men de figuren pas laadt als ze effectief nodig zijn? (als men op die zoom-knop klikt)
* Hoe de zoom in en uit knop (gif's) vervangen worden door andere gifs als ze niet meer kunnen in- en uitzoomen?

Bedankt!

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

Acties:

sjaakaq

It might get loud

Ehm heel even een suggestie:
-je neemt een HTML bestand met daarin een plaatje en een in- en uitzoom knop, bijv. plaatje3.html. De inzoomknop opent een nieuw HTML bestand, plaatje4.html, met alleen een uitzoomknop omdat je niet meer kan inzoomen.

Daar is toch geen JS voor nodig?

leoaq.fm // Jeune Loop

zondag 8 februari 2004 13:04

Acties:

zondag 8 februari 2004 13:18

Devver

Pixelated

Dries_Aendekerk schreef op 08 februari 2004 @ 11:22:
Hmm...
't is blijkbaar toch wat tegengevallen, die javascript. :-/
Wil iemand mij in jip- en janneke-taal uitleggen hoe:
* men de figuren pas laadt als ze effectief nodig zijn? (als men op die zoom-knop klikt)
* Hoe de zoom in en uit knop (gif's) vervangen worden door andere gifs als ze niet meer kunnen in- en uitzoomen?

Bedankt!

de figuren pas inladen als ze nodig zijn kan je doen door geen gebruik te maken van de preloader, en pas bij het clicken de src-property te vullen met de URL van het plaatje:

JavaScript:

1	document.getElementById('route').src = 'url_van_het_plaatje.gif';

Die url (feitelijk een string) moet je dus eerst nog even samenstellen aan de hand van de waarde van variabele newpic.

Het gebruik van plaatjes voor het in en uitzoomen is ook eenvoudig: vervang de span door img-tags met daarin de "active" image; preload ook alvast de "inactive" images, en swap de images op het moment dat er een plaatje van active naar inactive moet en vice-versa; dat kan gewoon in die 4 if-statements. Een classname voor een handje is wel handig.

Intentionally left blank

Acties:

BLN

wat is er mis met gewoon html? plaatje 1 in beeld met een linkje genaamd zoom in en een link met zoom uit. linkt naar de volgende pagina met t in/uit gezoomde plaatje en waar je niet verder in of uit kan zoomen staat t linkje gewoon niet op de pagina.

If it ain't broken, don't fix it

zondag 8 februari 2004 13:22

Acties:

vrijdag 13 februari 2004 16:16

Devver

Pixelated

BiX schreef op 08 februari 2004 @ 13:18:
wat is er mis met gewoon html? plaatje 1 in beeld met een linkje genaamd zoom in en een link met zoom uit. linkt naar de volgende pagina met t in/uit gezoomde plaatje en waar je niet verder in of uit kan zoomen staat t linkje gewoon niet op de pagina.

Wat is er mis met javascript? En zoals ik al heb laten zien is het echt niet zo ingewikkeld, plus dat je maar 1 pagina hebt die onderhouden hoeft te worden.

Intentionally left blank

Acties:

maandag 23 februari 2004 16:17

Topicstarter

crisp schreef op 08 februari 2004 @ 13:04:
[...]

de figuren pas inladen als ze nodig zijn kan je doen door geen gebruik te maken van de preloader, en pas bij het clicken de src-property te vullen met de URL van het plaatje:
JavaScript:
1
document.getElementById('route').src = 'url_van_het_plaatje.gif';
Die url (feitelijk een string) moet je dus eerst nog even samenstellen aan de hand van de waarde van variabele newpic.

En waar moet ik deze regel plaatsen? Ik heb dan dus het "//preload pictures"-gedeelte verwijderd en deze in de plaats gezet. Maar door wat moet ik "url_van_het_plaatje.gif" vervangen? Ik heb al diverse dingen geprobeerd waaronder image[n].gif (gezien 'n' blijkbaar de variable is), maar dat lukt blijkbaar niet.

crisp schreef op 08 februari 2004 @ 13:04:
[...]
Het gebruik van plaatjes voor het in en uitzoomen is ook eenvoudig: vervang de span door img-tags met daarin de "active" image; preload ook alvast de "inactive" images, en swap de images op het moment dat er een plaatje van active naar inactive moet en vice-versa; dat kan gewoon in die 4 if-statements. Een classname voor een handje is wel handig.

Ik slaag er wel in om de span's te vervangen door de images. Als ik erop klik wordt er ook correct op in- en uitgezoomd. Maar ik slaag er niet in om ze te doen veranderen.

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

Acties:

maandag 23 februari 2004 22:31

Topicstarter

Hey,
Langzaamaan, maar zeker geraak ik er. Ik heb hier en daar wat code 'gepikt' van o.a. Dynamic-index.
De afbeeldingen worden niet meer op voorhand geladen.

Hier vind je een 'live' voorbeeld: http://www.aendekerk.be/zoom/slideshow.html. En dan zie je dat er een fout in zit. Als het stratenplan maximaal is uitgezoomed zou de knop "zoomout.gif" vervangen moeten worden door zoomout_disabled.gif. Als het stratenplan maximaal is ingezoomed zou de knop "zoomin.gif" vervangen moeten worden door zoomin_disabled.gif. Dit gebeurt niet correct. Maar ik vind de fout niet!!

Kan iemand me helpen?

code:

<html><head><title> images zoomer</title>
<script type="text/javascript">
  // this is an array of all the images for the slideshow
  // it should have the relative path to your images
 // eg: "images/image1name.gif"  etc.

    var imlist = new Array("zoom1.gif","zoom2.gif","zoom3.gif","zoom4.gif","zoom5.gif","zoom6.gif");
    var counter=0;

 function slideShow(name,target){
// this is the value of the counter number which is saved to a hidden form field in the html document
    counter=document.myform.counter.value;

// the argument variable 'target' is the name of the image source you wish to change
    var target=target; 

// the argument variable _src_name is the name of the button which is sending the request
    var _src_name = name;

// im creates an object of the target image for easier assignment of the new source image
  var im =document.images(target);

// if the requestor is the go_forward button, the counter increases by '1'; if the counter does not exceed the
// length of the images array, the corresponding array item number will be used as the source for the 
// target image in the web document. 

   if(counter  == imlist.length-1){
      document.images("go_forward").src ="zoomin_disab.gif";
   }else{
      document.images("go_forward").src ="zoomin.gif";
     }
   if(counter == 0 ){
      document.images("go_backward").src ="zoomout_disab.gif";
   }else{
 document.images("go_backward").src ="zoomout.gif";
   }

     if(_src_name =="go_forward"){
          if((counter < imlist.length-1) &&  (counter >= 0)){
              counter++;
              im.src=imlist[counter];
              document.myform.counter.value = counter;
                            }
                    }

     if(_src_name =="go_backward"){
          if((counter <= imlist.length) &&  (counter >= 1) ){
              counter--;
              im.src=imlist[counter];   
              document.myform.counter.value = counter;          
                            }
                    }
    
}
</script>
</head>
<body bgcolor="cyan">

<!-- BEGIN COPY OF SLIDE SHOW HOLDER FROM HERE DOWN AND PASTE INTO YOUR
       CODE -->

[img]"zoomin.gif"[/img]
 &nbsp; &nbsp; 
[img]"zoomout.gif"[/img]
<hr>
<form name="myform"><input type="text" size="5" name="counter" value="0"></form>
<!-- if you use this for different images on  a page, change the image name, and make sure your
       'buttons' reference the new image 'target' 
    eg: onClick="slideShow(this.name,'new_image_name_here')" 
-->
[img]"zoom1.gif"[/img]
</div>
<!-- END SLIDE SHOW HOLDER -->

</body>
</html>

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

Acties: