Toon posts:

[HTML / Javascript] Client side IMG resizen

Pagina: 1
Acties:
  • 154 views sinds 30-01-2008

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 :X

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


  • Robtimus
  • Registratie: November 2002
  • Laatst online: 20-05 20:29

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


  • Helmet
  • Registratie: Januari 2002
  • Laatst online: 05-05 12:14
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


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)

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 ]


  • Zoefff
  • Registratie: September 2001
  • Laatst online: 11:45

Zoefff

❤ 

Als je even in de source van een FOK! topic kijkt, zie je dat ze er dit javascriptje voor gebruiken.
C:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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 :)


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 17:59

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 ]


  • Genoil
  • Registratie: Maart 2000
  • Laatst online: 12-11-2023
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

  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 17:59

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 :)

  • Zoefff
  • Registratie: September 2001
  • Laatst online: 11:45

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! :P


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


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 :)

  • Ashtaroth
  • Registratie: December 2003
  • Laatst online: 16-02 09:59
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 ...>.

  • Janoz
  • Registratie: Oktober 2000
  • Laatst online: 08:05

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.