Afbeelding als link naar popup - Softwareontwikkeling

dinsdag 9 mei 2006 18:21

Acties:

Verwijderd

Topicstarter

Beste mensen,

Voor een website ben ik op dit moment bezig met een pagina waarop enkele foto's moeten komen te staan. Als ik hier dan op klik is het de bedoeling dat er een popup opend waar de foto's vergroot in weergegeven worden. Deze popup moet dan zo groot zijn dat de foto er precies in past en ik wil graag dat er geen toolbars, location bar of andere onzin aan de popup zitten.
Dit klinkt heel eenvoudig. Er zijn ook talloze generators op internet te vinden maar het probleem is dat deze niet de mogelijkheid bieden om een afbeelding als link te maken. Meestal is er enkel de keuze uit: Text link, laad automatisch, laden bij verlaten van pagina of laden met form button. Niet wat ik zoek dus.
Overigens nog één ding meer. Ik zag dat er marges links en boven in de popup gehanteerd worden. Deze zou ik ook graag weg willen hebben zodat de foto precies in de popup past.

Het zal waarschijnlijk met een hele eenvoudige aanpassing aan de javascriptcode gefixt zijn maar ik beschik helaas nog niet over de kennis om dit zelf te kunnen. Daarom hierbij dus de vraag of er iemand is die me hiermee zou kunnen en willen helpen. Ik zou er enorm mee geholpen zijn!

Alvast heel erg bedankt!

Maarten Hofste

dinsdag 9 mei 2006 18:25

Acties:

Wacky

Dr. Lektroluv \o/

Vervang de woorden "text link" eens door [img]"/pad/naar/plaatje.jpg"[/img] ...

Nu ook met Flickr account

dinsdag 9 mei 2006 19:22

Acties:

Verwijderd

Topicstarter

Nee dat werkt niet. Had ik al geprobeerd.

Nog een poging gedaan maar werkt echt niet.
In ieder geval wel bedankt voor de reactie!

dinsdag 9 mei 2006 19:32

Acties:

user109731

Wat is de code die je nu gebruikt? Het is zo een beetje lastig voor ons om te kijken waar de fout zit

.

dinsdag 9 mei 2006 19:44

Acties:

Mickman

zoek je zoiets?

code:

function vergroot(foto)
{
    MyWin = open("", "Foto_venster", "toolbar=no, location=no, resize=yes, menubar=no, status=no, top=150, left=150, width=680, height=645");
        
    //Openen om er in te kunnen schrijven!
    MyWin.document.open();

    MyWin.document.write('<html><head><title>Vergrootte foto`s</title><base target="_self"><LINK REL="stylesheet" TYPE="text/css" HREF="../../../style.css">[img]"'[/img]</html>');
    
    MyWin.document.close();
    MyWin.window.focus();
}

[ Voor 63% gewijzigd door Mickman op 09-05-2006 19:46 ]

dinsdag 9 mei 2006 19:48

Acties:

Tjeemp

BEER N TEA

ik heb gebruik gemaakt van een php scriptje hiervoor...

PHP:

function image_pop($file) {
    $file = $file[1];
    $thumb = str_replace(".jpg", "", $file);
    $thumb = $thumb . "_thumb.jpg";
    $size = getimagesize($file);
    if($height > 750) {
        $size[0] = $size[0] +19;
        $size[1] = "750";
    }
    $thumbnail = "<a href=\"#\" onclick=\"window.open('?img=$file', 'image', 'HEIGHT=$size[1],resizable=no,scrollbars=yes,WIDTH=$size[0]');return false;\">[img]\""[/img]</a>\n";

    return $thumbnail;
}

je gooit dus een bestandsnaam in de functie en krijgt een thumbnail met link terug...
als je verstand hebt van php moet het wel lukken, maar grotendeels zit ie nu wel goed... deze zorgt er ook voor dat als je plaatje hoger is hij ruimte geef voor scrollbar...
hoop dat het helpt

ohja, je moet ook nog een php stukje maken dat zorgt voor het weergeven ervan dus:

PHP:

<html>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<? echo "[img]'"[/img]"; ?>
</body>
</html>

dit zou de truc moeten doen, kan zijn dat je nog wat kleine aanpassingen moet doen natuurlijk

[ Voor 26% gewijzigd door Tjeemp op 09-05-2006 19:52 ]

www.timovanderzanden.nl | Beer 'n' Tea

donderdag 11 mei 2006 01:11

Acties:

Verwijderd

Topicstarter

Bedankt voor alle tips! Het is me echter nog steeds niet gelukt

Daarom gooi ik hier maar even de javascriptcode neer. Misschien dat iemand me dan kan helpen. Ik had zelf het idee dat het toch niet zo ingewikkeld kan zijn maar valt misschien toch beetje tegen.

Dit heb ik tussen de head:

<SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>

</script>

En dit op de plek waar ik de afbeelding plaatsen wil:

<a href="javascript:NewWindow('pics/foto01.jpg','popup','768','550','center','front');"><img scr="http://www.uthokoldenzaal.nl/layout/knopfot1.gif"></a>

Misschien dat iemand hier ziet wat er anders moet. Ik hoop het! Alvast bedankt in ieder geval!

donderdag 11 mei 2006 03:13

Acties:

Boelie-Boelie

Kwestie van beter googelen volgens mij.. javascript popup window image -> bijv. www.codelifter.com/main/javascript/autosizeimagepopup.html (denk dat je zoiets zoekt)

Cogito ergo dubito

donderdag 11 mei 2006 12:49

Acties:

Verwijderd

Topicstarter

Ok, bedankt! Dit is het inderdaad! Raar dat ik 't zelf nie gevonden had trouwens.
Nu heb ik nog één ding wat me niet lukt.

Als ik op die pagina (http://www.codelifter.com...t/autosizeimagepopup.html)
die image links test werkt alles helemaal perfect. Als ik echter op mijn eigen pagina het script invoeg en test krijg ik de alom bekende gele balk bovenin mijn browser waarbij ik eerst op "allow blocked content" moet klikken. Wanneer ik dit doe is de imagelink wel normaal bruikbaar. Als ik er echter op klik krijgt de popup ook zo'n gele balk mee.
Dit is natuurlijk gruwelijk irritant om steeds aan te moeten klikken en ik wil hier ook heel graag vanaf. Het lijkt mij dat het moet kunnen. Op de pagina waar ik het script vandaan haal werkt het immers prima zonder de gele balk. Ik snap niet waarom ik die dan wel krijg. Ik gebruik toch ook gewoon het zelfde script?!

Heeft iemand misschien een idee waar dit aan ligt, en belangrijker nog.. Hoe ik het probleem kan verhelpen?
Alvast enorm bedankt!

donderdag 11 mei 2006 13:43

Acties:

Tjeemp

BEER N TEA

over het algemeen komt die balk er omdat er indirect een pop-up wordt geopend, als je pop-up gewoon direct door de link geactiveerd wordt werkt het wel meestal (bij mij iig)

maar als het exact een kopie is, zou ik het niet echt weten, tenzij je bij die website al "always allow" aan hebt...

www.timovanderzanden.nl | Beer 'n' Tea

donderdag 11 mei 2006 13:52

Acties:

Verwijderd

Je kan ook gewoon een onClick event koppelen aan je <img> tag

[img]"pad"[/img]

donderdag 11 mei 2006 13:53

Acties:

Boelie-Boelie

Verwijderd schreef op donderdag 11 mei 2006 @ 12:49:
Als ik echter op mijn eigen pagina het script invoeg en test krijg ik de alom bekende gele balk bovenin mijn browser waarbij ik eerst op "allow blocked content" moet klikken.

Da's een feature van Win XP, geen scriptfout. Moet je de waarschuwing ff uitzetten in XP (weet niet waar, ik heb geen XP, ik gok bij Internet-opties).

Cogito ergo dubito

donderdag 11 mei 2006 13:56

Acties:

user109731

Die gele balk word volgens mij niet veroorzaakt door die pop-ups maar door het blokkeren van "Actieve inhoud op deze computer"

In IE bij Extra -> Internet-opties -> tabblad Geavanceerd, onder beveiliging, vinkje weghalen.

donderdag 11 mei 2006 22:52

Acties:

Verwijderd

Verwijderd schreef op donderdag 11 mei 2006 @ 12:49:
Als ik op die pagina (http://www.codelifter.com...t/autosizeimagepopup.html)
die image links test werkt alles helemaal perfect. Als ik echter op mijn eigen pagina het script invoeg en test krijg ik de alom bekende gele balk bovenin mijn browser waarbij ik eerst op "allow blocked content" moet klikken. Wanneer ik dit doe is de imagelink wel normaal bruikbaar. Als ik er echter op klik krijgt de popup ook zo'n gele balk mee.

Remote of lokaal? IE heeft er een handje van om lokaal Javascript niet uit te voeren (en zo'n gele balk te laten zien) en remote wel.

vrijdag 12 mei 2006 14:24

Acties:

Verwijderd

Topicstarter

Hej ik heb het getest en wanneer ik de pagina's naar een webserver upload komt die irritante gele balk inderdaad niet meer! Apart verhaal maar ok.. Hiermee is dat probleem ook weer opgelost! Hartstikke bedankt allemaal!!