Bonjour à tous !

Je débute en html, css et javascript (disons que ca fait 2 mois). Et là j'ai besoin de votre aide.

Je suis en train de coder un site qui contient un portfolio. Les projets à présenter se regroupent en différentes catégories, 4 en tout. Un projet peut appartenir à 2 voire 3 catégories.

Le portfolio est sur la page work_categories, qui contient tous les projets. Elle contient également un menu qui permet de naviguer d'une catégorie à l'autre (ce menu n'existe pas sur les autres pages du site).
Quand on est sur la page work_catégories et que l'on clique sur les liens de ce menu, un filtre jquery s'active et trie les projets en fonction de la catégorie demandée. (ex: si je clique sur catégorie1, je reste sur la page work_categories, mais il n'y a que les projets appartenant à la categorie1 qui s'affichent. Les autres projets disparaissent. Idem pour la catégorie2, etc). Les projets ont chacun une class qui permet d'indiquer à quelle catégorie ils appartiennent.
Jusque là, tout va bien.

MAIS. Il faudrait que l'URL de work_categories change en fonction de la catégorie qui s'affiche. Quelque chose du genre http://...work_categories#categorie1
L'idée c'est de pouvoir faire des liens qui pointent vers 1 seule catégorie dans work_catégories (liens internes au site, mais aussi externes).

Tous les tutos que j'ai trouvé permettent d'ajouter une ancre; fonctionnant avec une id, du genre
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<a href=#contenu1> Link </a>
ce qui renvoie à une div du genre
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<div id="contenu1"></div>
Moi je peux pas fonctionner avec des id, puisque j'ai besoin d'attribuer la même catégorie à plusieurs projets, et qu'on ne peut utiliser un id qu'une seule fois.

On a très exactement le même problème pour les lightbox: sur la page work_categories, les projets s'ouvrent ds une lightbox. J'ai besoin d'avoir une url spécifique à chaque projet, afin de pouvoir les partager sur facebook par exemple.

Voici donc mon code HTML, qui contient aussi du javascript:


Code html : 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>test 3 page work</title>
<!--pour le filtre -->
	<script type="text/javascript" src="JS/jquery.js"></script>
	<script type="text/javascript">
        $(document).ready(function() {
                        $('ul#filter a').click(function() {
                                $(this).css('outline','none');
                                $('ul#filter .current').removeClass('current');
                                $(this).parent().addClass('current');
                                
                                var filterVal = $(this).text().toLowerCase().replace(' ','-');
                                                
                                if(filterVal == 'work') {
                                        $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
                                } else {
                                        
                                        $('ul#portfolio li').each(function() {
                                                if(!$(this).hasClass(filterVal)) {
                                                        $(this).fadeOut('normal').addClass('hidden');
                                                } else {
                                                        $(this).fadeIn('slow').removeClass('hidden');
                                                }
                                        });
                                }
                                
                                return false;
                        });
                });
        </script>
<!-- end filtre -->
<!-- script pour la lightbox jquery-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>!window.jQuery && document.write('<script src="JS/LB_jquery.js"><\/script>');</script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<script type="text/javascript">
$(document).ready(function(e) {
$("a[rel=example_group]").fancybox({
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'titlePosition'     : 'over',
});
});
        </script>
	<!-- end lightbox jquery-->
  </head>
 
<body>
 
<div class=content>
 
<div class="nav_2">
				<ul id="filter">
					<li><a href="#">Categorie1</a></li>
					<li><a href="#">Categorie2</a></li>
					<li><a href="#">Categorie3</a></li>
					<li><a href="#">Categorie4</a></li>
				</ul>
</div>
 
	<ul id="portfolio">
 
		<li class="item1 categorie1">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 1</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
		<li class="item2 categorie2">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 2</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
		<li class="item3 categorie3">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 3</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
		<li class="item4 categorie4">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 4</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
	</ul>
 
</body>
 
</html>

Pour la lightbox, je fais appel à des fichiers javascript que je ne mets pas dans le sujet, car ils sont simplifiés sur une seule ligne (je les ai téléchargés tel quel) et donc illisibles, je pense que personne ici ne les lira...!

Je fais aussi appel à la librairie jquery, pour le filtre.

Cependant voici le site sur lequel j'ai trouvé ma light box : http://fancybox.net/home
Il s'agit de la version "galerie", celle qui est tout en bas.

J'ai l'impression d'en demander des tonnes, mais ca vous paraît peut être tout simple?!
Répondez svp, je suis vraiment bloquée là !
Merci d'avoir lu jusqu'à la fin en tout cas !