affichage page html dans colorbox [Résolu]

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

Citation:

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, ...)

14/12/2010, 14h17	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 001 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 001 Points : 45 077 Points : 45 077	http://colorpowered.com/colorbox/cor...le1/index.html other content types ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

14/12/2010, 16h22	#4
larffas68 Membre régulier Laurent S. Inscription : novembre 2010 Messages : 71 Détails du profil Informations personnelles : Nom : Laurent S. Âge : 25 Localisation : France Informations forums : Inscription : novembre 2010 Messages : 71 Points : 77 Points : 77	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>
	00

14/12/2010, 17h05	#5
jakols Invité de passage Inscription : décembre 2009 Messages : 9 Détails du profil Informations forums : Inscription : décembre 2009 Messages : 9 Points : 2 Points : 2	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 @ +++
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email