Versio

PIP

Perfect Image Popups in elke browser

Gesponsorde koppelingen

Inhoudsopgave

  1. PIP - Inleiding
  2. Custom attributen
  3. image_popups.js
  4. open_picture_win
  5. PHP to the rescue

 

23 reacties op 'PIP'

PHP hulp
PHP hulp
0 seconden vanaf nu
 
Gesponsorde koppelingen
Jonathan -
Jonathan -
7 jaar geleden
 
0 +1 -0 -1
http://werkend voorbeeld/ ???
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
@ Jonathan: is aangepast.
Ponzi
Ponzi
7 jaar geleden
 
0 +1 -0 -1
Wederom een interessante tutorial Jan :) . Ik hoop dat ze hem deze keer laten staan :@ ! Die vorige had niet veel met PHP te maken, maar dat moet ook niet vind ik, je kan er zelf PHP in verwerken ofzo !

Doe zo door...
Legolas
Legolas
7 jaar geleden
 
0 +1 -0 -1
voor custom dingen zou je ook bijvoorbeeld rel kunnen misbruiken: rel="100|150" ofzo en evt. dit later weer met je js opruimen, is wat minder net, maar valideert dan weer wel :P. Mja, de vraag is hoeveel waarde je aan validatie geeft.
Ponzi
Ponzi
7 jaar geleden
 
0 +1 -0 -1
Ik heckt er sinds kort heel wat waarde aan :) . Ik heb gemerkt dat mijn scripts sneller en vooral crossbrowser zijn, zonder enige hacks te gebruiken ;) !
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
@ Legolas: die "rel", waar wordt die normaal gesproken voor gebruikt?
Jelmer rrrr
Jelmer rrrr
7 jaar geleden
 
0 +1 -0 -1
Ik ben niet bekend met het offici?le nut ervan, maar XFN maakt er gebruik van. Door bepaalde keywords met links mee te geven in het rel-attribuut kan je daarmee in principe een vriendennetwerk visualiseren. (Zat standaard in Wordpress gebakken :)

Maar ik moet zetten dat ik rel ook meestal met dat doeleinde gebruik. Geen geklooi met eigen dtd's*** en aangezien rel toch nog geen groot nut heeft kan het geen kwaad.

(*** Eigen dtd's wordt door het W3C ernstig werd afgeraden, waarschijnlijk omdat ze bang zijn dat er dan een wildgroei van dtd's komt en de standaard W3C dtd naar de achtergrond wordt gedrukt, waardoor het voor webbrowserbouwers & webdevelopers allemaal nog moeilijker wordt gemaakt.)
Legolas
Legolas
7 jaar geleden
 
0 +1 -0 -1
rel is officieel voor relaties, als een link tot de pagina een bepaalde relatie heeft kun je die zo meegeven.

EDIT: Denk maar <link type="text/css" href="bla.css" rel="stylesheet" /> de link heeft een stylesheet relatie met de pagina.
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
Okee bedankt voor de tips. Ik heb zo nog mijn bedenkingen want ik vind een semantisch juist gebruik belangrijker dan twee validatiefoutjes in de markup. Ik hou altijd wel mijn tidy extension in de gaten tijdens het ontwikkelen, maar in dit geval vind ik custom attributen wel kunnen.
Kalle P
Kalle P
7 jaar geleden
 
0 +1 -0 -1
Hmm dit script kende ik al van je (about a year?). Maar toch leuk dat je 'm hier met extra uitleg en al nog ff in de database gooit. Daarnaast vast ook nog wat ge?pdate waarschijnlijk.
Frisbee
Frisbee
7 jaar geleden
 
0 +1 -0 -1
Als je echt graag je pagina valid wilt houden kun je ook een custom DTD maken.
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
@ Kalle: ik heb al eens eerder geprobeerd om dit werkend te krijgen inderdaad, maar toen lukte het niet in alle browsers. Dit script is op een aantal punten anders dan het vorige.

@ Frisbee: klopt. Het wordt wel afgeraden door het W3C, omdat je anders weer teveel verschillende DTD's krijgt en dan is er geen sprake meer van een echte standaard.
Arend a
Arend a
7 jaar geleden
 
0 +1 -0 -1
In dit geval vind ik het wel erg interessant. Ik vroe gme af waarom je nou eigenlijk eigen attributen zou willen gebruiken in plaats van javascript. Maar in zekere zin is het meer conform de standaard omdat de link naar het plaatje geen stuk javascript is maar een werkelijke link. Erg handig voor zoekmachines en dergelijke.

Ik vind het een erg gave oplossing!
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
@ Arend: late reactie van mijn kant, maar bedankt! Uitgangspunt was inderdaad een werkelijke link.
Jelmer rrrr
Jelmer rrrr
7 jaar geleden
 
0 +1 -0 -1
Ik bedenk me net iets: wat nu als je de afmetingen in de URL van het plaatje zet? Met Javascript kan je dat er vrij gemakkelijk uitlezen en ook waneer je de URL volgt zal je er geen last van hebben. Daarbij heb je geen eigen attributen meer nodig.

Mogelijkheden:
http://example.com/plaatje.png?width=120&height=80
http://example.com/plaatje.png#width=120&height=80
http://example.com/plaatje.png#120-80
enz.
Jan Koehoorn
Jan Koehoorn
7 jaar geleden
 
0 +1 -0 -1
Leuke invalshoek. Een andere mogelijkheid is de waarden niet met JS uitlezen, maar gewoon met PHP code in het popupvenster. Nadeel daarvan is dan wel weer dat je het venster eerst moet tonen, en daarna pas kunt resizen.
K i p
K i p
7 jaar geleden
 
0 +1 -0 -1
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
[
  <!ATTLIST a popup_w CDATA #IMPLIED>
  <!ATTLIST a popup_h CDATA #IMPLIED>
]>


Zoiets misschien leuk?


Edit:
Je ziet dan dus wel ]> op je beeld staan.
K i p
K i p
7 jaar geleden
 
0 +1 -0 -1
@Jelmer

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php

<a href="http://example.com/plaatje.png#120-80"><img src="lalalala" /></a>

/*
Dit kan je toch uitlezen met javascript?
Pak je het attribuut 'href' en dan
pak je het laatste stukje eruit.
Komt geen php aan te pas dan.

Heeft dat ook een nadeel?
*/

?>
Jelmer rrrr
Jelmer rrrr
7 jaar geleden
 
0 +1 -0 -1
Boris, dat bedoelde ik inderdaad ja. Volgens mij heeft het geen nadelen. Tenzij browsers boos gaan worden omdat je naar een id binnen een img verwijst (wat niet kan) Maar dat lijkt mij erg sterk.
K i p
K i p
7 jaar geleden
 
0 +1 -0 -1
Op de pagina "open_picture_win" staat dit:

htmlString += "<style>* { (...) } body {background-color: black; (...)<body bgcolor=\"#555555\">";

2 verchillende kleuren dus ;-)
K i p
K i p
7 jaar geleden
 
0 +1 -0 -1
@
Jelmer:
Tenzij browsers boos gaan worden omdat je naar een id binnen een img verwijst


Dan doe je het toch met een vraagteken?

<a href="http://example.com/plaatje.png?120-80">
Wesley
wesley
6 jaar geleden
 
0 +1 -0 -1
Ik heb dit script gebruikt in mijn site, maar ik krijg geen popups.

Werkt het ook met absolute urls ?

te zien op:
http://www.bmxaction.net/item/bmx2000-dessel
Jan Koehoorn
Jan Koehoorn
6 jaar geleden
 
0 +1 -0 -1
Hoi wesley,

dit script heb ik alweer een tijdje geleden gemaakt. Intussen zijn er veel mooiere alternatieven, zoals het Lightbox Script.

groeten, Jan

Om te reageren heb je een account nodig en je moet ingelogd zijn.

  • Labels
  • Geen tags toegevoegd.