[javascript] forum image resize - Softwareontwikkeling

vrijdag 20 februari 2004 09:24

Acties:

Verwijderd

Topicstarter

Ik heb een forum in asp.
Nu kunnen mensen in hun bericht een image tag mee geven. Maar als et plaatje groter is dan 400 dan vernaggelt het plaatje mijn layout. En dat kan niet de bedoeling zijn.

Nu heb ik een stukje javascript code maar dat werkt niet. Waarom?? ik heb geen idee.

code:

var resized_images_width = new Array();
var resized_images_height = new Array();

    function resize(image){
        if(!image){
            var image = window.event.srcElement;
        }

        width = image.width;
        height = image.height;
        var url = image.src;

        if(width>400){
            resized_images_width[url] = width;
            resized_images_height[url] = height;
            image.width = 400;
            image.height = Math.floor(height/(width/400));
        }
    }

    function check_images(){
        count = document.images.length;
        i = 0;

        while(count>i){
            document.images[i].onload = resize;
            i++;
        }
    }

in de body staat dit :

code:

1	<BODY onload="check_images()">

volgens mij zou dit moeten werken.

DUS:
Als ik een bericht met een image tag, zonder width en height, submit dan behoud het plaatje de zelfde groote.
Komt dat omdat ik geen width en height mee geef? Als dat zo is hoe kan ik dit dan omzeilen??

Tering wat ben ik een eikel geen titel alleen javascript

how stupid can you be

Kan iemant et veranderen in [javascript] forum image resize

[ Voor 7% gewijzigd door Verwijderd op 20-02-2004 09:28 . Reden: idiot ]

vrijdag 20 februari 2004 09:27

Acties:

Verwijderd

Je geeft geen image mee aan de resize functie in je while loop.

code:

function check_images(){
//    count = document.images.length;
//    i = 0;
    var i;
    var oImagesColl = document.images;

    for(i in oImagesColl) {
        oImagesColl[i].onload = function() { resize(this) };  
    }

    oImagesColl = null;
}

[ Voor 70% gewijzigd door Verwijderd op 20-02-2004 09:31 . Reden: code toe gevoegd. ]

vrijdag 20 februari 2004 09:36

Acties:

Verwijderd

Topicstarter

Dat werkt dus niet.
Krijg een syntax foutmelding en object verwacht.
Ben niet heel goed in javascript. Ben er nog niet zo lang mee bezig.
Dus waar die foutmeldingen vandaan komen?

vrijdag 20 februari 2004 09:39

Acties:

crisp

Devver

Pixelated

als de onload van je body getriggered wordt, dan zijn al je images al ingeladen en zal dus nooit meer het onload event van de images getriggered worden.
Beter kan je body-onload in z'n geheel vermeiden, in sommige gevallen (plaatjes van trage hosts etcetera - niet ongewoon op een forum) kan het dan erg lang duren voordat dit event getriggered wordt.

An sich is het het mooiste om gewoon met max-width en max-height te werken....

Intentionally left blank

vrijdag 20 februari 2004 09:44

Acties:

Verwijderd

Topicstarter

Maar dan zit ik met het probleem dat een plaatje van 100 ook 400 wordt.
Dat is ook niet mooi.
Of snap ik et nu niet

vrijdag 20 februari 2004 09:44

Acties:

crisp

Devver

Pixelated

voorbeeldje dat ik ooit gemaakt heb: http://allcrispy.com/exp/scaleimage2.html

Intentionally left blank

vrijdag 20 februari 2004 09:58

Acties:

Verwijderd

Topicstarter

Crisp ik heb jou code zo aan gepast.

code:

<script type="text/javascript">

var maxWidth = 400;

function scaleImage(im) {

  if (typeof im.naturalWidth == 'undefined') im.naturalWidth = im.width;

  if (im.naturalWidth > maxWidth) {

    im.width = maxWidth;
    im.style.maxWidth = im.naturalWidth + 'px';
  }

}
</script>

en wat denk je. WORKS LIKE A CHARM

aleen krijg ik nog de melding. object wordt verwacht.

vrijdag 20 februari 2004 10:05

Acties:

crisp

Devver

Pixelated

dan wordt het meer als de simpele versie: http://allcrispy.com/exp/scaleimage.html

Intentionally left blank

vrijdag 20 februari 2004 10:11

Acties:

Verwijderd

Topicstarter

Die van mij is niet meer clickable.
Gewoon resizen en niet meer aankomen. (wat ook de bedoeling was)
Maar nu heb ik nog dat vreselijk driehoekje onder in het scherm (script error).
Met de melding object verwacht. DIE MOET WEG.
Vind et zo knullig staan zo'n geel driehoekje. Ook al werkt et perfect.

vrijdag 20 februari 2004 10:12

Acties:

crisp

Devver

Pixelated

laat je complete code zoals je 'm nu hebt nog eens zien

Intentionally left blank

vrijdag 20 februari 2004 10:14

Acties:

Verwijderd

Topicstarter

Zoals i daar boven staat ^.

Hek weer wat doms vergeten??

vrijdag 20 februari 2004 10:22

Acties:

crisp

Devver

Pixelated

en je doet dan ook in je img-tags onload="scaleImage(this)" ?

(dus geen aanroep vanuit je body-onload meer)

[ Voor 29% gewijzigd door crisp op 20-02-2004 10:23 ]

Intentionally left blank

vrijdag 20 februari 2004 10:25

Acties:

Verwijderd

Topicstarter

Ja in de image tag heb ik die onload staan.
Het werkt ook wel alleen krijg ik nog een melding "object verwacht" en die wil ik ook weg hebben.
Ben gewoon een mierenneuker.

vrijdag 20 februari 2004 10:28

Acties:

Rataplan

per aspera ad astra

offtopic:
crisp, wat wordt in je css van http://allcrispy.com/exp/scaleimage2.html gedefinieerd met

img[onload]

?

[ Voor 28% gewijzigd door Rataplan op 20-02-2004 10:29 ]

Journalism is printing what someone else does not want printed; everything else is public relations.

vrijdag 20 februari 2004 10:34

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

crisp schreef op 20 februari 2004 @ 09:39:
Beter kan je body-onload in z'n geheel vermeiden, in sommige gevallen (plaatjes van trage hosts etcetera - niet ongewoon op een forum) kan het dan erg lang duren voordat dit event getriggered wordt.

volgens mij kun je sowieso het beste onload events bij het laden van images niet toepassen,
het is namelijk zo dat een image eerst een hedare terugstuurd, waarin de grootte al is weergegeven, hierna zal de imagedata ingeladen worden, echter dan is voor de browser al wel de grootte beschikbaar, volgens mij is het het optimaalste om gewoon de functie direkt na de code aan te roepen, eventueel met een timeout.

het script kan dan controleren of de width al op te vragen is (of de header al binnengekomen is), en de breedte zetten, is dat niet zo zet hij alsnog een onload tag, anders past hij de breedte al aan naar de gewenste.
zoiets lijkt me de optimaalste manier om het 'schokkerig' inladen minimaal te houden, en is sneller dan eerst te wachten op de onload van de afbeelding (die pas getriggered wordt als de complete afbeelding is ingeladen).

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 20 februari 2004 11:03

Acties:

crisp

Devver

Pixelated

voor preloads gebruik ik zelf al helemaal geen onloads meer, maar vraag ik in een loop de completed property uit. Zo zou je ook in dit geval in een timerloopje kunnen kijken wanneer de width property beschikbaar is.

Intentionally left blank

zondag 27 februari 2005 19:47

Acties:

floriske.nl

Wie ik? Echt niet!

crisp schreef op vrijdag 20 februari 2004 @ 09:44:
voorbeeldje dat ik ooit gemaakt heb: http://allcrispy.com/exp/scaleimage.html

crisp, stomme vraag misschien, maar ik ben zelf helemaal niet thuis in javascript, maar wil wel een dergelijk script gaan toepassen, maar dan zou ik het zo willen doen dat onclick het plaatje op ware grootte in een nieuw venster geopend wordt in plaats van unscaled.

Is het veel werk om het bovenstaande eenvoudige script daar op aan te passen?>

zondag 27 februari 2005 20:26

Acties:

crisp

Devver

Pixelated

Je zou kunnen kijken hoe we het hier op het forum hebben opgelost (js etcetera is wel uit de broncode te halen). De voorbeelden die ik eerder hier in deze draad gepost hebt waren simpele opzets, maar de implementatie hier op het forum is meer crossbrowser gericht (er zijn nogal wat issues waar je rekening mee moet houden).

Als de simpele opzet echter goed werkt in jouw geval dan zou je de functie unscaleImage als volgt kunnen wijzigen om de foto in een los venster te openen:

JavaScript:

function unscaleImage() {

  window.open(this.src);

}

Intentionally left blank

maandag 28 februari 2005 18:53

Acties:

floriske.nl

Wie ik? Echt niet!

code:

<style type="text/css">

img[onload] {
  max-width: 300px;
}

img.resized {
  border: 1px dashed red;
  cursor: pointer;
  cursor: hand;
}

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

var maxWidth = 300;

function scaleImage(im) {

  if (typeof im.naturalWidth == 'undefined') im.naturalWidth = im.width;

  if (im.naturalWidth > maxWidth) {

    im.width = maxWidth;
    im.style.maxWidth = im.naturalWidth + 'px';
    im.className = 'resized';
    im.title = 'Click for original size';
    im.onclick = unscaleImage;

  }

}

function unscaleImage() {

  window.open(this.src);

}

</script>

werkt bijna als een zonnetje, klein beetje aangepast zoals je ziet,

Alleen wil het wel eens misgaan en op 1 of andere manier worden dan 1 of meerdere plaatjes niet gescaled

als ik dan op vernieuwen (F5) ros weer wel.

Enig idee hoe dat kan komen?

thx!!

[ Voor 78% gewijzigd door floriske.nl op 28-02-2005 20:17 ]