Limiter les vues d'un portfolio

Version imprimable

Bonjour à tous!
voilà mon problème sur XHTML 1.

Code:

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

Je suis débutant et travail sur un site.
Dans la section portfolio du site, j'ai réussi à changer le code de façon à ce qu'une vignette appelle plusieurs photos à visionner les unes après les autres même cadre.
Problème, je suis à la troisième vignette, et quand elle appelle ses photos concernées, dans le cadre qui apparait, il est possible avec les flèches avant arrière, de visionner les photos qui concernaient la ou les vignettes précédentes.
Vice versa, la première vignette appelle son cadre grande image et en suivant les flèches, on peut visionner les grandes images correspondantes aux vignettes suivantes.
J'ai pourtant subdiviser en sous dossiers et précisé les chemins dans le code.
Voici donc un fragment du code concernant ce portfolio.
Si quelqu'un pouvait me dire où se trouve le hic! ce serait très sympa.:roll:
Merci d'avance.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
 <!--PORTFOLIO PAGE STARTS -->
                            <div class="section">
                            <h2>Gallery</h2>    
 
                    <div id="slideshow">
                    <div class="slider">
                        <ul class="gallery clearfix">
                           <li><a href="images/bigimages/essai/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img src="images/t_1.jpg" width="135" height="78" alt="Red round shape" /></a>
<a href="images/bigimages/essai/2.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_1.jpg" width="135" height="78" alt="Nice building" /></a>
<a href="images/bigimages/essai/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_1.jpg" width="135" height="78" alt="Fire!" /></a>
<a href="images/bigimages/essai/4.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_1.jpg" width="135" height="78" alt="Rock climbing" /></a>
<a href="images/bigimages/essai/5.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_1.jpg" width="135" height="78" alt="Fly kite, fly!" /></a></li>
                        <li><a href="images/bigimages/aprr/6.jpg" rel="prettyPhoto[pp_gal]" title="CHAPITEAU AUXERRE"><img src="images/t_2.jpg" width="135" height="78" alt="Red round shape" /></a>
<a href="images/bigimages/aprr/7.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_2.jpg" width="135" height="78" alt="Nice building" /></a>
<a href="images/bigimages/aprr/8.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_2.jpg" width="135" height="78" alt="Fire!" /></a>
<a href="images/bigimages/aprr/9.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_2.jpg" width="135" height="78" alt="Rock climbing" /></a>
<a href="images/bigimages/aprr/10.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_2.jpg" width="135" height="78" alt="Fly kite, fly!" /></a>
<a href="images/bigimages/aprr/11.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_2.jpg" width="135" height="78" alt="Fly kite, fly!" /></a></li>
<li><a href="images/bigimages/gregorio/12.jpg" rel="prettyPhoto[pp_gal]" title="GREGORIO"><img src="images/t_3.jpg" width="135" height="78" alt="Red round shape" /></a>
<a href="images/bigimages/gregorio/13.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/14.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/15.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/16.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/17.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/18.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/19.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/20.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/21.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/22.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/23.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/24.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/25.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/26.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/27.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
<a href="images/bigimages/gregorio/28.jpg" rel="prettyPhoto[pp_gal]"><img src="images/t_3.jpg" width="135" height="78" alt="Nice bu" /></a>
</li>
                        </ul>                
                    </div>
                    </div>
                    <div id="display">                       
                        <ul>
                            <li id="prev"><img src="images/prev_btn.gif" alt="" /></li>    
                            <li id="next" class="last"><img src="images/next_btn.gif" alt="" /></li>                        
                        </ul>
                    </div>                                                        
                        </div>        
                        <!--PORTFOLIO PAGE ENDS -->

27/09/2010, 14h07
Vil'Coyote

tu pourrais être un peu plus explicite sur le "problème" que tu rencontre car je n'ai rien compris sur ce que souhaites faire et ce qui ne marche pas.
27/09/2010, 15h07
Frances49

Explication du problème

Merci Vil'coyotte!
le problème :
J'ai plusieurs vignettes dans mon portfolio, normalement chacune (ref mon code) ouvre une fenêtre avec plusieurs photos à visionner.
Ma première vignette (t_1.jpg ) correspond à 5 photos d'un dossier (essai), jusque là c'est ok, je clique sur la vignette et dans mon cadre apparait la 1ère photo essai et les flèches pour faire défiler les 4 autres.
J'ai donc la même chose avec une autre vignette (t_2.jpg) à laquelle correspondent un dossier nommé (aprr)...
Problème , si je clique la vignette t_1.jpg, elle ouvre le cadre et là, non seulement j'ai les photos qui correspondent à cette vignette MAIS si je continue à faire défiler les photos, celles correspondant à la vignette t_2.jpg, apparaissent elles aussi...
Je voudrait qu'à une vignette son dossier seul soit appelé.
Qu'à l'autre vignette, seul aussi son propre dossier soit appelé.
Là, pour toutes les photos des dossiers que je rajoute, on dirait qu'ils s'incrémentent et que n'importe quelle vignette peut tout visualiser, sans clivage...
J'espère que j'ai mieux exposé mon problème, en fait, voyant d'autre portfolios, ce que je veux est en fait quelque chose qui est le plus courant.
Voilà avec cela, peux tu mieux cerner mon problème? Pas facile pour un novice de décrire cela au mieux, mais j'essaie.
Merci à toi si tu peux m'aider.
27/09/2010, 18h28
polymorphisme

Bonjour,

je ne vois pas vraiment comment il peut se passer quelque chose lorsque tu "continue à faire défiler les photos, puisqu'il n'y a pas de lien" :

Code:

<li id="prev"><img src="images/prev_btn.gif" alt="" /></li>
27/09/2010, 19h25
Frances49

3 pièce(s) jointe(s)

Image du problème

Merci Polymorphisme!
je pense que je vais mettre 2, 3 captures qui valent mieux qu'un long discours.
1ère capture : cadre ouvert avec le thumbnail t_1.jp et qui ouvre 5 photos
Tu pourras voir qu'en bas à droite du cadre, il est proposé 28 photos (ref. dans le code ci dessus) et si je continue avec les flèches(qui sont dans le cadre photo), je peux visionner les 28 photos sans ressortir du cadre.
Capture 2 : toujours avec thumbnail t_1.jpg (j'ai dépassé les ( photos associées voir code)
Capture 3 : Avec thumbnail t_3.jpg (je peux remonter jusqu'aux premières photos)
Problème : (voir code)
thumbnail t_1.jpg est associé à 5 photos
thumbnail t_2.jpg est associé à 6 photos
thumbnail t_3.jpg est associé au reste.
Quelque soit le thumbnail utilisé, je peux (avec les flèches du cadre) voir toutes les photos proposées.
Donc je ne sais pas où le problème se trouve mais je voudrais qu'avec un thumbnail une série de photo(en lien avec le thumbnail) soit associée et non pas l'ensemble des photos.
Donc comment arriver dans le code à faire ces séries.
Captures dans l'ordre:

Ci joint les photos capture:
28/09/2010, 10h17
Vil'Coyote

si j'ai bien tout compris, c'est ton script jvs qui prend toutes tes image de ta page et non pas un groupe sélectionné?
faudrait voir du côté de ce que tu utilise pour visionner ces image (jquery?)
28/09/2010, 10h48
Frances49

Utilisation

Merci à toi, oui j'utilise Jquerys ;
jquery.prettyPhoto.js

J'ai fait un tour, c'est vrai que bcp de portfolios fonctionnent comme ça....mais le problème c'est qu'une fois qu'un cadre s'est ouvert suite à un clic sur un thumbnail....si la personne continue à cliquer ensuite sur le flèches internes au cadres et fait défiler les photos, elle risque de passer d'une série à l'autre (sujet à un autre) sans s'en rendre compte.
J'aurais voulu qu'à la fin d'une série de photos correspondantes à un thumbnail, le client n'ai pas le choix, il a visionné par exemple 6 photos sur 6 et il doit revenir aux thumbnail pour choisir un sujet suivant (suivant thumbnail correspondant).
Voilà...
Que puis je faire?
Merci à toi.