11548 sujets

JavaScript, DOM et API Web HTML5

Problème avec fancy box [résolu]

Bonjour,
je n y connais presque rien au java script ( je débute) et j 'essaye d'intégrer jquery box dans une page, tout se passe bien, le problème c'est que quand je clique sur n'importe quel lien dans la page c'est le jquery box qui s'active, je vois ce qu'il faut faire, mais je ne sais pas comment le faire et où?
c'est la variable du lien" a" qui doit être plus spécifique, mais je ne sais pas comment le déclarer, et surtout s il suffit de le déclarer dans la page html ou aussi dans une des pages js.

voilà ma page html; si besoin d autre chose n'hésitez pas.
Merci en avance pour votre aide!!


<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />

<link href="../../../Documents/Site/Site/Elements du site/Scroolable.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="../jquery.fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery.fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").fancybox();
});
</script>



<style>
html, body {
font: normal 11px Tahoma;
color: #333;
}

a {
outline: none;
}

div#wrap {
width: 500px;
margin: 50px auto;
}

img {
border: 1px solid #CCC;
padding: 2px;
margin: 10px 5px 10px 0;
}
</style>
</head>
<body>

<div id="menu">
<ul class="BottomStyle" >
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li id="en-cours"><a href="page2.html">page2</a></li>
<li><a href="page3.html.html">page3</a></li>
<li><a href="page4.html">page4</a></li>

</ul>
</div>


<div id="menu_web">
<ul style="list-style-type:none">
<li><a href="index." title="" class="current">lien1</a></li>
<li><a href="#" title="">lien2</a></li>
<li><a href="#" title="">lien3</a></li>
<li><a href="#" title="">lien4</a></li>

</ul>


</div>


<div id="wrap">

<p>
Image group <br />

<a rel="group" title="Group title #1" href="2_b.jpg"><img src="2_s.jpg" /></a>
<a rel="group" title="Group title #2" href="3_b.jpg"><img src="3_s.jpg" /></a>
<a rel="group" href="4_b.jpg"><img src="4_s.jpg" /></a>
</p>
</div>
</body>
</html>
Modifié par hayalou_m (06 Sep 2009 - 10:55)
Salut,

Met ton code entre les balises code qu'il soit facilement lisible. Sinon sur quels liens exactement tu veux mettre ton fancy box ?
[code=html]
  <link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />
   
    <link href="../../../Documents/Site/Site/Elements du site/Scroolable.css" rel="stylesheet" type="text/css"/>
   
    <script type="text/javascript" src="../jquery.fancybox/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../jquery.fancybox/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="../jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a").fancybox();
        });
    </script>
   
   
   
    <style>
        html, body {
            font: normal 11px Tahoma;
            color: #333;
        }
       
        a {
            outline: none;   
        }
       
        div#wrap {
            width: 500px;
            margin: 50px auto;   
        }

        img {
            border: 1px solid #CCC;
            padding: 2px;   
            margin: 10px 5px 10px 0;
        }
    </style>
</head>
<body>

<div id="menu">
      <ul class="BottomStyle" >
        <li><a href="index.html">home</a></li>
        <li><a href="about.html">about</a></li>
        <li id="en-cours"><a href="page2.html">page2</a></li>
        <li><a href="page3.html.html">page3</a></li>
        <li><a href="page4.html">page4</a></li>
       
      </ul>
    </div>


<div id="menu_web">
                <ul style="list-style-type:none">
                    <li><a href="index." title="" class="current">lien1</a></li>
                    <li><a href="#" title="">lien2</a></li>
                    <li><a href="#" title="">lien3</a></li>
                    <li><a href="#" title="">lien4</a></li>
                   
                </ul>


            </div>
           
           
<div id="wrap">
   
    <p>
        Image group <br />
   
        <a rel="group" title="Group title #1" href="2_b.jpg"><img src="2_s.jpg" /></a>
        <a rel="group" title="Group title #2" href="3_b.jpg"><img src="3_s.jpg" /></a>
        <a rel="group" href="4_b.jpg"><img src="4_s.jpg" /></a>
    </p>
</div>
</body>
</html>[code=html]

Modifié par hayalou_m (04 Sep 2009 - 15:36)
et c'est ce que je veux mettre ds mon fancy box




<div id="wrap"> 
    
    <p> 
        Image group <br /> 
    
        <a rel="group" title="Group title #1" href="2_b.jpg"><img src="2_s.jpg" /></a> 
        <a rel="group" title="Group title #2" href="3_b.jpg"><img src="3_s.jpg" /></a> 
        <a rel="group" href="4_b.jpg"><img src="4_s.jpg" /></a> 
    </p> 
</div>
Il faut que tu remplaces ce que tu avait par simplement ça :

    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("div#wrap p a").fancybox(); 
        }); 
    </script>


et voilà Smiley cligne
Hello,

comme expliqué dans l'Aide il suffit d'éditer ton premier post (il faut pour cela être connecté) et de modifier le titre en rajoutant [Résolu]. Smiley cligne
Sujet clos
Aller à