Galerie d'images spéciale

Version imprimable

07/07/2008, 18h01
levirus93700

Galerie d'images spéciale

Salut
Je voudrais savoir comment faire pour faire une sorte de galerie d'images comme sur ce site. En bas a gauche vous pourrez trouver une galerie est quand on on passe la souris dessus l'image s'agrandit.
Voila:mrgreen::mouarf:
07/07/2008, 18h07
Matthieu2000

click droite, affiche source, copier/coller...(ou enregistre sous)

Citation:

click droite, affiche source, copier/coller...(ou enregistre sous)

Ca me donne ca:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h2>Galerie photo</h2>        
        <ul>
         <li id="gallery-1"><a href="/fr/News/105002/Photos/16705/Fin-de-la-seance"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16705.jpg" alt="Fin de la séance" title="Fin de la séance" /></a></li>
         <li id="gallery-2"><a href="/fr/News/105002/Photos/16704/Photo"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16704.jpg" alt="Photo" title="Photo" /></a></li>
         <li id="gallery-3"><a href="/fr/News/105002/Photos/16703/Pancrate"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16703.jpg" alt="Pancrate" title="Pancrate" /></a></li>
         <li id="gallery-4"><a href="/fr/News/105002/Photos/16702/Colleu"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16702.jpg" alt="Colleu" title="Colleu" /></a></li>
         <li id="gallery-5"><a href="/fr/News/105002/Photos/16701/Hoarau"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16701.jpg" alt="Hoarau" title="Hoarau" /></a></li>
         <li id="gallery-6"><a href="/fr/News/105002/Photos/16700/Opposition"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16700.jpg" alt="Opposition" title="Opposition" /></a></li>
         <li id="gallery-7"><a href="/fr/News/105002/Photos/16699/Abdos"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16699.jpg" alt="Abdos" title="Abdos" /></a></li>
         <li id="gallery-8"><a href="/fr/News/105002/Photos/16698/Ngoyi"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16698.jpg" alt="Ngoyi" title="Ngoyi" /></a></li>
         <li id="gallery-9"><a href="/fr/News/105002/Photos/16697/Arnaud"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16697.jpg" alt="Arnaud" title="Arnaud" /></a></li>
         <li id="gallery-10"><a href="/fr/News/105002/Photos/16696/Traore"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16696.jpg" alt="Traoré" title="Traoré" /></a></li>
         <li id="gallery-11"><a href="/fr/News/105002/Photos/16695/Haies"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16695.jpg" alt="Haies" title="Haies" /></a></li>
         <li id="gallery-12"><a href="/fr/News/105002/Photos/16694/Sprint"><img src="http://s.psg.fr/psg/image/phototheque/m/84/16694.jpg" alt="Sprint" title="Sprint" /></a></li>
        </ul>
        <a class="see-all" href="/fr/News/105001/Photos">Toutes les photos</a>
       </div>

08/07/2008, 07h07
Bovino

Non, ça c'est ce que tu retiens... il y a aussi beaucoup de javascript et c'est plutôt là que tu trouveras la solution.
08/07/2008, 11h28
levirus93700

Citation:

Non, ça c'est ce que tu retiens... il y a aussi beaucoup de javascript et c'est plutôt là que tu trouveras la solution.

C'est-a-dire?:?
08/07/2008, 11h35
Bovino

C'est-à-dire que ce que tu montres, ce sont les images, or ce que tu souhaites, c'est quel traitement est affecté à ces images pour obtenir le diaporama. Cela est traié en javascript, il faut donc que tu t'inspires du javascript dans le code source pour pouvoir faire quelquechose de semblable !

Dans le head il n'y a qu'un seul code JavaScript et c'est celui la:

Code:

1
2
3
4
<script type="text/javascript"><!--
   document.documentElement.id='js';
   if(document.cookie.indexOf('prehome=') == -1) document.write('<scr'+'ipt type="text/javascript" src="/transaction/checkPrehome.php?langue=FR"></scr'+'ipt>');
  //--></script>

Et dans le body :

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
 <!-- Scripts -->
   <script type="text/javascript" src="/js/main.js"></script>      
<script type="text/javascript">
 
if($('last-match-active')) $('last-match-active').set('id','last-match');
if($('next-match')) $('next-match').set('id','next-match-active');
$$('button[name="valider"]').forEach(function(button){
button.addEvent('click',function(e){
$(new Event(e).target).getParent('form').submit();
});
});
 
</script><script type="text/javascript" src="http://s.psg.fr/psg/file/200806/patch.js">
</script>          <!-- Cyberestat -->
 
      <script type="text/javascript"><!--
       CM_RUBRIQUE = "accueil";
       CM_CLIENT = "partfoot_tf1";
       CM_SECTION1 = "psg";
      //--></script>
      <script type="text/javascript" src="http://js.cybermonitor.com/partfoot_tf1.js"></script>
      <noscript><img src="http://stat3.cybermonitor.com/partfoot_tf1_v?R=accueil;S=total;psg" alt="" /></noscript>
      <!-- /Cyberestat -->
      <!-- Google Analytics -->
      <script type="text/javascript"><!--
       var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
       document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
      //--></script>
      <script type="text/javascript"><!--
       var pageTracker = _gat._getTracker("UA-4519785-1");
       pageTracker._initData();
       pageTracker._trackPageview();
      //--></script>
 
      <!-- /Google Analytics --> 
   <div id="ads-megabanner"><script type="text/javascript"><!--
document.write('<scr'+'ipt type="text/javascript" src="http://adserver.adtech.de/addyn|3.0|224|1115614|0|225|ADTECH;loc=100;target=_blank;grp=1;misc='+new Date().getTime()+'"></scri'+'pt>');
//-->
</script><noscript><a href="http://adserver.adtech.de/adlink|3.0|224|1115614|0|225|ADTECH;loc=300;grp=1" target="_blank"><img alt="" src="http://adserver.adtech.de/adserv|3.0|224|1115614|0|225|ADTECH;loc=300;grp=1" width="728" height="90" /></a></noscript></div>
   <div id="ads-skyscrapper"><iframe width="120" height="600" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" src="http://adserver.adtech.de/adiframe|3.0|224|116497|0|168|ADTECH;target=_blank;grp=1"><script type="text/javascript" src="http://adserver.adtech.de/addyn|3.0|224|116497|0|168|ADTECH;loc=700;target=_blank;grp=1"></script><noscript><a href="http://adserver.adtech.de/adlink|3.0|224|116497|0|168|ADTECH;loc=300;grp=1" target="_blank"><img alt="" src="http://adserver.adtech.de/adserv|3.0|224|116497|0|168|ADTECH;loc=300;grp=1" width="120" height="600" /></a></noscript></iframe></div>
   <!-- /Scripts -->