[JavaScript] Picture Resizer

[Mischa_NL]

Ik heb een homepage met nieuws enzovoort erop. Je kunt natuurlijk ook plaatjes in dat bericht zetten.

Is het plaatje echter groter dan 450 pixels breed, verneuqt hij mijn layout best wel...

Daarom heb ik in javascript iets geschreven, maar het werkt niet altijd... Op mijn pc is de kans iets van 50% dat hij resized maar op een andere pc resized hij hem nooit.

code:

<script type="text/javascript">

var maxWidth = 450; 

function scaleImage(im) {

  if (im.width > maxWidth) {

    im.orgwidth = im.width;
    im.width = maxWidth;

  }

}

</script>

heeft iemand de oplossing? Ik heb het namelijk zomaar in elkaar geflansd uit stukjes voorbeelden want mijn JavaScript is nou niet echt denderend

[ Voor 10% gewijzigd door Mischa_NL op 16-05-2004 18:58 ]

[Verwijderd]

Tja goh, leuke functie. Hoe roep je hem aan?

[kleautviool]

Ikzelf gebruik deze:

JavaScript:

<script type="text/javascript">
  function cropimage() {
    var img, i, getid;
    img = document.images;
    for(i=0; i<img.length; i++) {
      getid = img[i].getAttribute('id');
      if(!getid.indexOf('resize')) {
        if(img[i].width > 150) {
          img[i].setAttribute('width',150);
        }
      }
    }
  }
  window.onload = cropimage;
</script>

Alle afbeeldingen die verkleind worden moeten i.i.g. het woord 'resize' in het id attribuut hebben staan.

[Verwijderd]

kleautviool schreef op 16 mei 2004 @ 19:04:

Alle afbeeldingen die verkleind worden moeten i.i.g. het woord 'resize' in het id attribuut hebben staan.

Dat is er dus altijd maar 1?

[Mischa_NL]

voor de liefhebber:

zo roep ik hem aan

code:

onload="scaleImage(this)"

en hij doet het dus niet altijd...

Werkt die van jou wel altijd Maurice-k?

[kleautviool]

Verwijderd schreef op 16 mei 2004 @ 19:05:
[...]

Dat is er dus altijd maar 1?

Nee lolbroek

<img id="resize_1" />
<img id="resize_2" />

Zo bedoel ik Anders zou ik geen indexOf() gebruiken, maar gewoon kijken of het id resize is

En bij mij (in mn cms) werktie gewoon

[ Voor 29% gewijzigd door kleautviool op 16-05-2004 19:18 ]

[Mischa_NL]

dus ik moet in iedere image een getal invoeren
dat is niet de bedoeling hij moet het wel automatisch doen

[Mischa_NL]

Hmz ik heb nu een javascript nog steeds en af en toe werkt het script gewoon niet? Hoezo niet? Doe ik iets verkeerd?

code:

<script type="text/javascript">

var maxWidth = 420; 

function scaleImage(im) {

  if (im.width > maxWidth) {

    im.width = maxWidth;

  }

}

</script>

Heeft niemand een oplossing?

[intermusic]

code:

<script type="text/javascript">

var maxWidth = 420; 

function scaleImage(im) {
  global maxWidth;

  if (im.width > maxWidth) {

    im.width = maxWidth;

  }

}

</script>

Zou dit het kunnen zijn? (doe normaal PHP enzo, daar moet wel een global bij.)

[ Voor 7% gewijzigd door intermusic op 18-05-2004 14:18 ]

[André]

intermusic schreef op 18 mei 2004 @ 14:17:

Zou dit het kunnen zijn? (doe normaal PHP enzo, daar moet wel een global bij.)

Nee, zo werkt dat niet in JS

[Thijsmans]

Dit lijkt mij wat makkelijker Hoef je niet bij elke img een functie aan te roepen. Weet niet hoe het werkt met !IE-browsers:

JavaScript:

// id van de parent waar de images in staan
parent_id = 'content';
// maximale breedte
maxwidth = 250;

function resizeImages()
{
    // children van het parent-element
    objChildNodes = document.getElementById( parent_id ).childNodes;
    
    // children allemaal afgaan
    for( id in objChildNodes )
    {
        // kijken of node img is en te breed is
        if( objChildNodes[ id ].tagName == 'IMG' && objChildNodes[ id ].width > maxwidth)
        {
            // bereken nieuwe afmetingen
            objImage = objChildNodes[ id ];
            factor = maxwidth / objImage.width;
            newheight = objImage.height * factor;
            
            // zet nieuwe afmetingen neer
            objImage.width = maxwidth;
            objImage.height = newheight;
        }
    }
}

[MarkvE]

Ik zie dat Prammenhanger al een stukkie code heeft gepost, maar ik was ondertussen ook al bezig. Iig denk ik dat dit is wat je bedoeld, werkend en wel in IE 4.0 en hoger, Opera en Mozilla

code:

<script type="text/javascript">
<!--
function scale()
{
    var maxWidth = 200;
    
    var img = document.images;
    
    for(i = 0; i < img.length; i++)
    {
        if(img[i].width > maxWidth)
        {
            img[i].height = (maxWidth / img[i].width) * img[i].height;
            img[i].width = maxWidth;
        }
    }
}
-->
</script>

[img]"file://D:\Mijn[/img]

[ Voor 89% gewijzigd door MarkvE op 18-05-2004 15:11 ]

[Mischa_NL]

Prammenhanger en MarkvE dankjewel het is gelukt en het was precies wat ik zocht

[crisp]

uit de oude doos:

voorbeeld 1
voorbeeld 2

[Mischa_NL]

die scripts werken niet altijd goed op mijn site crisp ...

En aangezien ik gewoon een n00b ben in javascript kon ik zelf nooit zoiets schrijven als MarkvE

[Verwijderd]

Mischa_NL schreef op 20 mei 2004 @ 13:47:
die scripts werken niet altijd goed op mijn site crisp ...

En aangezien ik gewoon een n00b ben in javascript kon ik zelf nooit zoiets schrijven als MarkvE

Je hebt gewoon geen zin om het zelf uit te zoeken, bedoel je.

[crisp]

Het script van MarkvE heeft een groot manko: het gaat per image alle images langs; dat lijkt me een beetje over-the-top...

Mijn 2e voorbeeld heeft nog een groot pluspunt: in Mozilla (die max-width ondersteund) zal zelfs in 1e instantie het plaatje niet te groot zijn waardoor je niet het resize-effect krijgt waarbij de boel verspringt.

[ Voor 48% gewijzigd door crisp op 20-05-2004 13:51 ]

[MarkvE]

Die van Cript crisp is idd beter dan die van mij. Zowel qua werking (in Mozilla) als performance. Maar Misha_NL gaf aan dat ie het automatisch moet doen, dus wat dat betreft voldoet die van mij wel

[ Voor 4% gewijzigd door MarkvE op 21-05-2004 09:42 . Reden: Oeps... ;) ]