affichage page html dans colorbox

**jakols** · 14/12/2010, 14h02

Bonjour à tous,

j'aurai besoin de vos lumières svp

j'essaye désespérément d'afficher une page html dans la colorbox jQuery v. 1.3.15

j'ai une page index.html avec une image map.
lorsque l'on clique sur une zone, j'aimerais que s'affiche une autre page html.

alors apparemment ça à l'air de fonctionner mais qu'à moitié.

en effet, j'ai bien ma page.html qui s'affiche, aux bonnes dimensions et avec scroll mais impossible d'afficher dans la colorbox. Elle vient s'afficher au dessus de ma "map" après le clic

peut être un pb de chemin ? j'ai vérifié et fais divers essais mais rien n'y fait.

Voici ma page index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
    <title>Bienvenue</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="robots" content="noINDEX,noFOLLOW">
    <meta name="revisit-after" content="10 days">
    <meta name="description" content="">
    <meta name="keywords" content="" />
 
<link media="screen" rel="stylesheet" href="../templates/site/css/jscolorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="../templates/site/js/jquery.colorbox-min.js"></script>
 
	<script>
  $(function () {
            $("#parcours").colorbox({ width: "50%", height: "50%", iframe: true });
        });
 
	</script>
</head>
 
<body bgcolor="#000">
    <center>
 
    <div width="1026" height="768">
    <img src="images/accueil2-4.jpg" width="1026" height="768" border="0" alt="" usemap="#accueil2-4_Map">
<map name="accueil2-4_Map" id="map">
<area shape="rect" alt="Entrer" coords="781,102,856,135" href="../index.php" >
<area id="parcours" shape="rect" coords="384,160,629,518" href="../parcours.html" title="Mon parcours">
</map>
 
</div>
</center>
</body>
</html>

j'ai essayé également en changeant le chemin vers les images dans le css mais tjs rien.

chemin d'origine par exemple :

#cboxOverlay{background:url(images/overlay.png) 0 0 repeat;}

moi j'ai remplacé par :

#cboxOverlay{background:url(../images/overlay.png) 0 0 repeat;}

Aussi testé avec les urls absolues dans index.html et le css... mais rien non plus

Ah oui pour info, le site est sous joomla 1.5.22
L'index.html et parcours.html sont à la racine du site

Voilà, je suis en cale sèche.
Si vous aviez des pistes ou infos à me donner ça serait super

Merci à tous
@ +

**SpaceFrog** · 14/12/2010, 14h17

http://colorpowered.com/colorbox/cor...le1/index.html

other content types ...

**jakols** · 14/12/2010, 15h41

Hello et merci pour cette réponse...

mais encore ...

j'ai déjà essayé avec l'exemple de Outside webpage qui est joint à l'archive :

ça fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
	<head>
	....
	<link media="screen" rel="stylesheet" href="colorbox.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script src="../colorbox/jquery.colorbox.js"></script>
	<script>
		$(document).ready(function(){
 
			$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
 
		});
	</script>
</head>
 
 
<body>
 
	<p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
</body>
</html>

en intégrant la class et le lien dans mon area... mais ça ne fonctionne pas non plus

ou est donc mon erreur alors ??
merci à ++

**larffas68** · 14/12/2010, 16h22

je viens de tester ton code cela fonctionne chez moi. N'aurais-tu pas une erreur dans l'endroit ou se trouve jquery.colorbox.js ?

c'est la seule chose selon moi qui pourrais ne pas fonctionner

tu peux tester de le mettre au meme endroit que ton fichier et de faire simplement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="jquery.colorbox.js"></script>

**jakols** · 14/12/2010, 17h05

Bonsoir larffas68,

Merci pour cette réponse.
Avec "mon code" ça fonctionne chez toi ? Ou avec celui de l'exemple ?
Je vais essayer de mettre le .js au même endroit pour voir...
Je te tiens au courant
Merci ;-)

[Edit 17:25] je viens de tester et tjs pareil

avec et sans les url absolues... pfff !
je ne vois pas où peut être le pb !
j'ai mm essayé avec différents doctype... ça ne change rien !

alors peut être qu'il faut tout mettre à la racine ?
pourtant les images sont à placer dans un dossier images d'après le css ?

merci
@ +++

[Edit 17:31] j'ai trouvé... yes !
merci larffas68 !
en fait, il faut tout mettre dans un dossier "colorbox" à la racine du site.
sinon, il ne trouve pas le chemin pour les images et donc la mise en page !

eh bien ! laborieux aujourd'hui !!!

merci encore

bonne soirée
@ +++

**SpaceFrog** · 14/12/2010, 18h51

en fait, il faut tout mettre dans un dossier "colorbox" à la racine du site.

Heu non ...
Faut juste mettre les bon fichiers au beon endroit et ensuite savoir quel path mettre pour les joindre ...
comme pour tout fichier externe (image, script, style, ...)

affichage page html dans colorbox

jQuery

Discussions similaires

Partager

Partager