[HTML / Javascript] Client side IMG resizen - Softwareontwikkeling

zondag 24 oktober 2004 11:45

Acties:

Verwijderd

Topicstarter

Beste tweaker, zoals ik komen jullie misschien héél soms (al dan niet toevallig) op forum.fok.nl.
Als je daar een topic opent met grote afbeeldingen (groter dan het forum formaat) dan worden deze automatisch geresized...

Dit wil ik zó graag op mijn website! Echter zou ik écht niet weten hoe ze dit voor elkaar schoppen.
Wie kan mij hiermee helpen / tips / aanwijzingen geven?

Alvast enorm bedankt!

edit:
Oeps, bedenk me nu dat dit misschien in een ander forum gedeeldte moet

[ Voor 12% gewijzigd door Verwijderd op 24-10-2004 11:47 ]

zondag 24 oktober 2004 12:39

Acties:

Robtimus

me Robtimus no like you

[img]"bladiebla"[/img] ?

Dan wordt hij automagisch gescaled naar WxH. Als je alleen de width of height opgeeft dan wordt hij gescaled zoals je wilt met behoud van ratio.

Als je nu alleen wilt verkleinen als het te groot is dan vind je daar vast zelf wel een manier voor

[ Voor 31% gewijzigd door Robtimus op 24-10-2004 12:40 ]

More than meets the eye
There is no I in TEAM... but there is ME
system specs

zondag 24 oktober 2004 12:43

Acties:

Helmet

volgens mij kan het op deze manier:
weet wel niet of dit werkt, want het is niet getest :]
[img]"bla.jpg"[/img] 400) { this.w = 200; }" />

Icons are overrated

zondag 24 oktober 2004 12:44

Acties:

Verwijderd

Topicstarter

Mja, ben eigenlijk op zoek naar zoiets;

De breedte van een afbeelding mag maximaal 400 pixels zijn. Als hij groter is moet hij verkleint worden.

Met dat h*w gebeuren krijgt je te maken dat kleine afbeeldingen (200 pixels) geresized worden naar 400 pixels breed...

Moet dit met CSS ofzo? (zie je wel, verkeerde sub-forum uitgezocht)

zondag 24 oktober 2004 12:45

Acties:

Verwijderd

Topicstarter

Helmet schreef op 24 oktober 2004 @ 12:43:
volgens mij kan het op deze manier:
weet wel niet of dit werkt, want het is niet getest :]
[img]"bla.jpg"[/img] 400) { this.w = 200; }" />

Als dat werkt ben je een held! Eens ff kijken!

Edit:
No go... Helaas, zag er veelbelovend uit

Is dit wel op zo'n soort manier te regelen met javascript?

[ Voor 22% gewijzigd door Verwijderd op 24-10-2004 12:48 ]

zondag 24 oktober 2004 12:53

Acties:

Zoefff

❤ 

Als je even in de source van een FOK! topic kijkt, zie je dat ze er dit javascriptje voor gebruiken.

var resized_images = new Array();
var maxImageWidth = 580;
    function fullsize(){
        var oSource = window.event.srcElement.src;
        tempvar = resized_images[oSource];
        showpopupwindow = window.open('', "_blank","toolbar=no,location=no,menubar=no,scrollbars=no,status=no,left=0,top=0"+tempvar);
        showpopupwindow.document.writeln("<html><head><title>replique:picture: " + unescape(oSource) +  "</title>");
        showpopupwindow.document.writeln("</head><body topmargin=\"0\" leftmargin=\"0\" marginheight=\"0\" marginwidth=\"0\">");
        showpopupwindow.document.writeln("[img]\""[/img]");
        showpopupwindow.document.writeln("</body></html>");
        showpopupwindow.document.close();
    }

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

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

        if(width>maxImageWidth){
            resized_images[url] = ",width="+width+",height="+height;
            image.width = maxImageWidth;
            image.title = 'Originele grootte: '+width+'x'+height;
            image.style.border = "dashed 1px red";
            image.style.cursor = "hand";
            image.onclick = fullsize;
            image.height = Math.floor(height/(width/maxImageWidth));
        }
    }

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

        while(count>i){
            imgurl = document.images[i].src;

            if(!imgurl.match(basehref)){
                if(document.images[i].complete){
                    resize(document.images[i]);
                }else{
                    document.images[i].onload = resize;
                }
            }
            i++;
        }
    }

Met een onload="check_images();" in je body tag zou het moeten werken

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

zondag 24 oktober 2004 12:54

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

http://forum.fok.nl/templates/foksilver/images.js

Dit is het JS'je wat ze er voor gebruiken

Edit: * We Are Borg slaps Zoefff

[ Voor 18% gewijzigd door We Are Borg op 24-10-2004 12:54 ]

zondag 24 oktober 2004 12:55

Acties:

Genoil

een javascript oplossing zou misschien nog wel werken, maar met alleen resizen ben je er dan ook nog niet. je wilt bij te grote plaatjes er dan ook gelijk een <a> omheen bouwen met een link naar het plaatje inz'n originele grootte.

ik zou het daarom (indien je er over beschikt) server-side doen met iets als PHP:

http://nl.php.net/manual/en/function.getimagesize.php

zondag 24 oktober 2004 12:58

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

Of je gebruikt de oplossing van crisp:

http://crew.tweakers.net/crisp/newlayout/js/j_gfx_193b.js

Al denk ik dat hij het zou waarderen als je het even zou vragen

zondag 24 oktober 2004 12:58

Acties:

Zoefff

❤ 

Dat regelt het FOK! scriptje ook, al werkt dat niet altijd even goed in FF.

* Zoefff slaps We Are Borg. Moet je maar opletten joh!

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

zondag 24 oktober 2004 13:00

Acties:

Verwijderd

Topicstarter

Bedankt voor al jullie reply's!

Het is inmiddels aardig gelukt met het volgende;

HTML:

1	[img]"plaatje.png"[/img]

Maar idd, als een afbeelding verkleint wordt, ziet de afbeelding er natuurlijk niet uit, en moet ie het liefst clickable worden...

Ik heb geen beschikking over PHP, wel ASP. Én de image URL haal ik uit een database, dus eventueel kan ik daar ook nog wat mee spelen op dez manier;

HTML:

1	[img]"plaatje.png"[/img]

^^^^^ bovenstaande werkt natuurlijk voor geen meter, want ben enorme n00p op het gebied van JavaScript, maar misschien een id voor mensen die het wel kunnen? Ben bereid om te leren hoor

zondag 24 oktober 2004 13:36

Acties:

Ashtaroth

HTML:
1
[img]"plaatje.png"[/img]
^^^^^ bovenstaande werkt natuurlijk voor geen meter, want ben enorme n00p op het gebied van JavaScript, maar misschien een id voor mensen die het wel kunnen? Ben bereid om te leren hoor

Niet dat ik expert ben op Javascript gebied, maar het lijkt me dat die 'a href' buiten het img deel moet, omdat juist het image clickable moet zijn.
if (<<img>>.width > 600) { document.write('<a href=afbeelding.png>') voor de <img onload ...>.

zondag 24 oktober 2004 15:56

Acties:

Janoz

Moderator Devschuur®

!litemod

Ten eerste zou dit in Webdesign & Graphics moeten horen. Maar het lijkt meer op een scriptrequest, en die hebben ze daar liever ook niet.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

Pagina: 1

Dit topic is gesloten.