fancybox dans menu déroulant

Bonjour,

Je me fais un site en responsive design avec, comme option (pour les petits écrans) un menu déroulant qui appelle les autres pages de mon site.
Le code est :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <select id="redirect"> <option selected="selected">Choisir un menu</option> <option value="portfolio.html">Portfolio</option> <option value="contact.html">Contact</option> </select> <script> document.getElementById("redirect").onchange = function() { if (this.value != null) { window.location.href = this.value; } }; </script>
Jusque là, totale maîtrise...cela fonctionne!

Par contre, sur la page "portfolio.html", le menu déroulant n'appelle plus une autre page mais un fancybox....et là, je sèche...
J'imagine que, dans le <script></script>, au lieu d'attribuer comme value, un href il faudrait que j'appelle mon fancybox, mais je n'y arrive pas...

Pour un href, voici la façon dont j'appelle mon fancybox:

Code:

<li><a class="groupe" rel="groupe3" href="images/mariages/3_b.JPG" ></a></li>

Quelqu'un peut-il m'aider? ;-)

dans quel sens est le problème ?

le menu déroulant appelle la boite alors qu'il ne le devrait pas ?
ou bien ce que vous souhaitez ajouter comme fonctionnalité est que le menu déroulant appelle la boite ?

Bonsoir Mathieu,

Oui, pardon, c'est vrai que ce n'est pas très clair ;-)

En fait, sur ma première page index.com j'ai ceci:

Code:

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
<!-- Menu -->
					<div class="menu">
						<h1></h1>
                        <ul>
                          <li><a href="portfolio.html">Portfolio</a></li>
                          <li><a href="contact.html">Contact</a></li>
                          <li><a href="#"></a></li>
                          <li><a href="#"></a></li>
                          <li><a href="#"></a></li>
                        </ul>
 
						<select id="redirect">
						  <option selected="selected">Choisir un menu</option>
							<option value="portfolio.html">Portfolio</option>
							<option value="contact.html">Contact</option>
							<option value="#"></option>
							<option></option>
                      </select>
 
                      <script>
            document.getElementById("redirect").onchange = function() { 
                if (this.value != null) {
                    window.location.href = this.value;
                }
            };
        </script>

Mes menus appellent d'autres pages, ça marche....tout va bien!

par contre, sur la page portfolio.html, j'aimerais que les menus appellent un fancybox...
j'y arrive avec le menu classique mais je n'arrive pas à appeler mon fancybox dans la balise <select>!

voici le code:

Code:

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
<!-- Menu -->
					<div class="menu">
					  <ul>
					    <li><a class="groupe" rel="groupe3" href="images/mariages/1_b.png" title="Izaura <span style='font-family: Times'> & </span> Xavier." >Mariages</a></li><li><a class="groupe" rel="groupe3" href="images/mariages/2_b.JPG" ></a></li>
             <li><a class="groupe" rel="groupe3" href="images/mariages/3_b.JPG" ></a></li>
             <li><a class="groupe" rel="groupe3" href="images/mariages/4_b.png" title="Alice <span style='font-family: Times'> & </span> Jean-Baptiste." ></a></li>
             <li><a class="groupe" rel="groupe3" href="images/mariages/5_b.JPG" title="Marie <span style='font-family: Times'> & </span> Vincent." ></a></li>
             <li><a class="groupe" rel="groupe3" href="images/mariages/6_b.JPG" title="Fabienne <span style='font-family: Times'> & </span> Bernard." ></a></li>
             <li><a class="groupe" rel="groupe3" href="images/mariages/7_b.png" title="Caroline <span style='font-family: Times'> & </span> Sébastien." ></a></li>
             <li><a class="groupe" rel="groupe3" href="images/mariages/8_b.png" title="Émilie <span style='font-family: Times'> & </span> Ben." ></a></li>
							<li><a href="#">Grossesses</a></li>
							<li><a href="#">Concerts</a></li>
							<li><a href="#">New-York</a></li>
							<li><a href="#">Studio</a></li>
						</ul>
 
 
						<script>
            document.getElementById("redirect").onchange = function() { 
                if (this.value != null) {
                    window.location.href = this.value;
                }
            };
        </script>
 
 
						<select id="redirect">
						  <option selected="selected">Choisir un menu</option>
 
							<option class="groupe" rel="groupe3" value="images/mariages/1_b.png">Grossesses</option>
							<option value="$(".groupe").fancybox({});">Concerts</option>
                            <option>New-York</option>
							<option>Studio</option>
						</select>

Dans la balise <select> vous trouverez tout et n'importe quoi :oops:..ce sont mes essais, pas concluant!
et le menu déroulant n'apparaît que sur les tout petit écrans, à la verticale!

si vous voulez vous faire une idée je travaille sur mon site en ligne, à cette adresse: www.elisebauvin.com ;)