colorbox fonctionne pas!

mais easyslider oui

22 mars 2012 à 13:38:33

Bonjour,

je voudrais pouvoir utiliser le plugin colorbor pour afficher des photos. J'ai fait les liens dans le <head>. J'ai essayé de mettre le script après les photos ou bien dans le <head> avec ready function mais ça ne marche pas. Je ne sais pas où est l'erreur. Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/screen.css" type="text/css" media="screen, projection"/>
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/print.css" type="text/css" media="print"/>    
<link rel="stylesheet" href="../../../loc_beuil/menu/menu_style.css" type="text/css" />
<link rel="stylesheet" href="../../../loc_beuil/menu_vertical/menu_style.css" type="text/css" />
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/style.css" type="text/css" media="screen,projection"/> 
<link rel="stylesheet" href="../../../loc_beuil/easyslider1.7/easyslider1.7/css/screen.css" type="text/css" media="screen,projection"/>    
<link href="colorbox.css" rel="stylesheet"/>  

<script type="text/javascript" src="../../../loc_beuil/easyslider1.7/easyslider1.7/js/jquery.js"></script>

<script type="text/javascript" src="../../../loc_beuil/easyslider1.7/easyslider1.7/js/easySlider1.7.js"></script>
<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true,
				continuous: true,
				nextId: "slider1next",
				prevId: "slider1prev"
			});
			$("#slider2").easySlider({ 
				auto: true,
				continuous: false,
				numeric: true
								
			});
		});	
	</script>
	
	<!--script pour colorbox-->
<script type="text/javascript" src="colorbox/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript" src="colorbox/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javasript">
            $(document).ready(function () {
                $("a.gallery").colorbox({ opacity:0.5 , rel:'gallery' });
            });
            	$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				

        </script>

<!--[if IE]>
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/ie.css" type="text/css" media="screen, projection"/><![endif]-->
<title>CAP SUD VAR</title>
</head>

<body>
<div class="container showgrid">
	<div class="span-24"><!--header-->
	<div id="slider">
	<ul>

	<li><img src="../capsudvar/image/Capture_free.JPG" width="950" height="250"/></li>
	<li><img src="../capsudvar/image/panorama Morsiglia Corse.jpg" width="950" height="250"/></li>
	<li><img src="../capsudvar/image/pont-de-sainte-maxime-la-nuittn.jpg" width="950" height="250"/></li>
	
	</ul>
</div>
	
	</div>
	
	<div id="menu"><!--menu-->
  		<ul>
  			<li><a href="studio_csv.html" title="Accueil"><span>Accueil</span></a></li>
    		<li><a href="#" title="Toute l'offre de location"><span>Les locations</span></a></li>
    	    <li><a href="#" title="Préparez votre séjour"><span>Avant de partir</span></a></li>
			<li><a href="#" title="Besoin d'un renseignement ?"><span>Contact</span></a></li>

  </ul>
</div>

	<div class="span-5"><!--colonne de gauche-->
        <h4>Photos</h4>
        <p>
<!--photos devant etre affiché par colorbox jquery-->
        <a class="gallery" rel="gallery" href="../capsudvar/image/saint_raphael005.jpg"/><img src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70"  />
        <a class="gallery" rel="gallery" href="../capsudvar/image/Capture_free.jpg"/><img src="../capsudvar/image/Capture_free.jpg" width="70" height="70"  />
     
   		<img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        </p>

    	</div>

DiaBloTin80

22 mars 2012 à 13:56:11

Il faut importer le framework Jquery tout au début.

Desolation

22 mars 2012 à 14:17:22

Les lignes 35 et 36, c'est pas la même chose ?

http://chez-syl.fr/

djacquin

22 mars 2012 à 16:00:19

merci pour les infos. Alors j'ai importé la bibliothèque jquery mais ça ne fonctionne toujours pas. (Je ne sais pas si les 2 fichiers min.js et .js sont identiques alors je les ai laissé). Je ne pense pas mais au cas où : ne faut-il pas passer par localhost (d'après mes infos jquery fonctionne côté client et non côté serveur) ? Voici mon code modifié :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/screen.css" type="text/css" media="screen, projection"/>
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/print.css" type="text/css" media="print"/>    
<link rel="stylesheet" href="../../../loc_beuil/menu/menu_style.css" type="text/css" />
<link rel="stylesheet" href="../../../loc_beuil/menu_vertical/menu_style.css" type="text/css" />
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/style.css" type="text/css" media="screen,projection"/> 
<link rel="stylesheet" href="../../../loc_beuil/easyslider1.7/easyslider1.7/css/screen.css" type="text/css" media="screen,projection"/>    
<link href="colorbox.css" rel="stylesheet"/> 

<!--importation jquery-->
<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.min.js"></script>.
<script type="text/javascript" src="../../../loc_beuil/easyslider1.7/easyslider1.7/js/jquery.js"></script>

<script type="text/javascript" src="../../../loc_beuil/easyslider1.7/easyslider1.7/js/easySlider1.7.js"></script>
<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true,
				continuous: true,
				nextId: "slider1next",
				prevId: "slider1prev"
			});
			$("#slider2").easySlider({ 
				auto: true,
				continuous: false,
				numeric: true
								
			});
		});	
	</script>
	
	<!--script pour colorbox-->
<script type="text/javascript" src="colorbox/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="colorbox/colorbox/jquery.colorbox.js"></script>

<script type="text/javasript">

           
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a.lightbox").colorbox({rel:'group1'});

$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>				

    

<!--[if IE]>
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/ie.css" type="text/css" media="screen, projection"/><![endif]-->
<title>CAP SUD VAR</title>
</head>

<body>
<div class="container showgrid">
	<div class="span-24"><!--header-->
	<div id="slider">
	<ul>

	<li><img src="../capsudvar/image/Capture_free.JPG" width="950" height="250"/></li>
	<li><img src="../capsudvar/image/panorama Morsiglia Corse.jpg" width="950" height="250"/></li>
	<li><img src="../capsudvar/image/pont-de-sainte-maxime-la-nuittn.jpg" width="950" height="250"/></li>
	
	</ul>
</div>
	
	</div>
	
	<div id="menu"><!--menu-->
  		<ul>
  			<li><a href="studio_csv.html" title="Accueil"><span>Accueil</span></a></li>
    		<li><a href="#" title="Toute l'offre de location"><span>Les locations</span></a></li>
    	    <li><a href="#" title="Préparez votre séjour"><span>Avant de partir</span></a></li>
			<li><a href="#" title="Besoin d'un renseignement ?"><span>Contact</span></a></li>

  </ul>
</div>

	<div class="span-5"><!--colonne de gauche-->
        <h4>Photos</h4>
        <p>
<!--photos devant etre affiché par colorbox jquery-->
        <a class="lightbox" rel="group1" href="../capsudvar/image/saint_raphael005.jpg"/><img src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70"  />
        <a class="lightbox" rel="group1" href="../capsudvar/image/Capture_free.jpg"/><img src="../capsudvar/image/Capture_free.jpg" width="70" height="70"  />
     
   		<img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        <img id="image_miniature" src="../capsudvar/image/saint_raphael005.jpg" width="70" height="70" />
        </p>

    	</div>

Desolation

22 mars 2012 à 16:01:38

Normalement non tu n'as pas besoin de passer par localhost sauf si tu as de l'AJAX (ça dépend du navigateur d'ailleurs).

Sinon, il y a des erreurs dans Firebug ?

http://chez-syl.fr/

djacquin

22 mars 2012 à 16:03:47

c'est où dans firebug pour voir les erreurs ?

Desolation

22 mars 2012 à 16:05:22

Onglet "Console" ou c'est écrit en rouge en bas à droite s'il y'en a.

http://chez-syl.fr/

djacquin

22 mars 2012 à 16:07:46

oui j'ai :
a.support is undefined
[Stopper sur une erreur]

...th=t[0].style.width=a.style.width,t[0].style.height=v[0].style.height=w[0].style...

jquery...-min.js (ligne 4)
$.support is undefined
[Stopper sur une erreur]

isIE = !$.support.opacity && !$.support.style, // IE7 & IE8

Desolation

22 mars 2012 à 16:09:59

Tu as mis quelle version de jQuery ?

http://chez-syl.fr/

djacquin

22 mars 2012 à 16:10:53

Dans le head j'ai mis
http://code.jquery.com/jquery-1.7.min.js

DiaBloTin80

22 mars 2012 à 17:26:30

http://code.jquery.com/jquery-1.7.2.min.js

djacquin

22 mars 2012 à 17:41:35

j'ai fait ce que tu dis (mis la version 1.7.2) et le var url je comprends pas. Je n'y connais rien en javascript alors peux-tu me faire la synthaxe exacte du script : <script>.... </script>.
Voici mon code avec les modifs :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/screen.css" type="text/css" media="screen, projection"/>
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/print.css" type="text/css" media="print"/>    
<link rel="stylesheet" href="../../../loc_beuil/menu/menu_style.css" type="text/css" />
<link rel="stylesheet" href="../../../loc_beuil/menu_vertical/menu_style.css" type="text/css" />
<link rel="stylesheet" href="../../../loc_beuil/css/blueprint/style.css" type="text/css" media="screen,projection"/> 
<link rel="stylesheet" href="../../../loc_beuil/easyslider1.7/easyslider1.7/css/screen.css" type="text/css" media="screen,projection"/>    
<link href="colorbox.css" rel="stylesheet"/> 

<!--importation jquery-->
<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.2min.js"></script>.
<script type="text/javascript" src="../../../loc_beuil/easyslider1.7/easyslider1.7/js/jquery.js"></script>

<script type="text/javascript" src="../../../loc_beuil/easyslider1.7/easyslider1.7/js/easySlider1.7.js"></script>
<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true,
				continuous: true,
				nextId: "slider1next",
				prevId: "slider1prev"
			});
			$("#slider2").easySlider({ 
				auto: true,
				continuous: false,
				numeric: true
								
			});
		});	
	</script>
	
	<!--script pour colorbox-->
<script type="text/javascript" src="colorbox/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="colorbox/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
 var url = "http://code.jquery.com/jquery-1.7.2min.js";
console.log(url);</script>

<script type="text/javasript">

           
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a.lightbox").colorbox({rel:'group1'});

$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>