IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Plusieurs tiny slideshow sur une même page


Sujet :

JavaScript

  1. #1
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut Plusieurs tiny slideshow sur une même page
    Bonjour,

    j'ai installé un diaporama tiny sur mon site mais impossible dans mettre deux pourtant je pense avoir bien déclarer les deux:

    html:

    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
     <ul id="slideshow">
                                  <!--start:slideshow -->
                                  <li>
                                        <!--start:slideshow content and image -->
                                        <h3>Modèle vague</h3>
                                        <span>transat/e8.jpg</span>
                                        <!--an image only -->
                                        <p>
                                        Dimension : L 177cm x 166cm x H 510 en haut du dossier.<br />
                                        Tube rond diamètre 42.4 x(2mm) pour l encadrement et 48.3x(2mm)pour les pieds 1.5 mm
                                        Tôle perforé en 1.5 mm pour l assise.<br />
                                        Finition miroir ou brossé.<br /><br />
                                        <span class="important">Tarif :</span> 1475€
                                        <br /><br /><a href="#transat" class="button1">Lire plus</a>
                                        </p><br />
     
                                        <img src="transat/e" alt="img-1" />
                                        <!--an image thumbnail only -->
                                  </li>
     
    .......
     
    </ul><div id="nav-piscine">
                                  <!--start:nav-piscine -->
                                  <div id="fullsize">
                                        <!--start:fullsize -->
                                        <div id="imgprev" class="imgnav pngfix" title="Previous"></div>
                                        <div id="imglink"></div>
                                        <div id="imgnext" class="imgnav pngfix" title="Next"></div>
                                        <div id="image"></div>
                                        <div id="information">
                                              <!--start:information -->
                                              <h3></h3>
                                              <p></p>
                                        </div>
                                        <!--end:information -->
                                  </div>
                                  <!--end:fullsize -->
                                  <div id="thumbnails">
                                        <!--start:thumbnails -->
                                        <div id="slideleft" title="Slide Left"></div>
                                        <div id="slidearea">
                                              <!--start:slidearea -->
                                              <div id="slider"></div>
                                        </div>
                                        <!--start:slidearea -->
                                        <div id="slideright" title="Slide Right"></div>
                                  </div>
                                  <!--end:thumbnails -->
                            </div>


    2 slides:
    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
        <ul id="slideshow-table">
                                  <!--start:slideshow -->
                                  <li>....
    </lu>
     
     
      <div id="nav-table">
                                  <!--start:nav-piscine -->
                                  <div id="fullsize">
                                        <!--start:fullsize -->
                                        <div id="imgprev-table" class="imgnav pngfix" title="Previous"></div>
                                        <div id="imglink-table"></div>
                                        <div id="imgnext-table" class="imgnav pngfix" title="Next"></div>
                                        <div id="image-table"></div>
                                        <div id="information">
                                              <!--start:information -->
                                              <h3></h3>
                                              <p></p>
                                        </div>
                                        <!--end:information -->
                                  </div>
                                  <!--end:fullsize -->
                                  <div id="thumbnails">
                                        <!--start:thumbnails -->
                                        <div id="slideleft" title="Slide Left"></div>
                                        <div id="slidearea">
                                              <!--start:slidearea -->
                                              <div id="slider"></div>
                                        </div>
                                        <!--start:slidearea -->
                                        <div id="slideright" title="Slide Right"></div>
                                  </div>
                                  <!--end:thumbnails -->
                            </div>
                            <!--end:nav-piscine -->
                      </div>
                      <!--end:slider_bg -->
                </div>
                <!--start:featured slider grid -->
                <!--start:featured slider script -->
                <script type="text/javascript">
            $(\'slideshow-table\').style.display=\'none\';
            $(\'nav-table\').style.display=\'block\';
            var slideshow-table=new TINY.slideshow("slideshow-table");
            window.onload=function(){
                    slideshow-table.auto=false;
                    slideshow-table.speed=5;
                    slideshow-table.link="linkhover";
                    slideshow-table.info="information";
                    slideshow-table.thumbs="slider";
                    slideshow-table.left="slideleft";
                    slideshow-table.right="slideright";
                    slideshow-table.scrollSpeed=4;
                    slideshow-table.spacing=5;
                    slideshow-table.active="#aaa";
                    slideshow-table.init("slideshow-table","image-table","imgprev-table","imgnext-table","imglink-table");
            }
    </script>



    js:

    Code : 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
       <script type="text/javascript">
    	$(\'slideshow\').style.display=\'none\';
    	$(\'nav-piscine\').style.display=\'block\';
    	var slideshow=new TINY.slideshow("slideshow");
    	window.onload=function(){
    		slideshow.auto=false;
    		slideshow.speed=5;
    		slideshow.link="linkhover";
    		slideshow.info="information";
    		slideshow.thumbs="slider";
    		slideshow.left="slideleft";
    		slideshow.right="slideright";
    		slideshow.scrollSpeed=4;
    		slideshow.spacing=5;
    		slideshow.active="#aaa";
    		slideshow.init("slideshow","image","imgprev","imgnext","imglink");
    	}
    </script>
     
     
     
     
     
    <script type="text/javascript">
    	$(\'slideshow-table\').style.display=\'none\';
    	$(\'nav-table\').style.display=\'block\';
    	var slideshow-table=new TINY.slideshow("slideshow-table");
    	window.onload=function(){
    		slideshow-table.auto=false;
    		slideshow-table.speed=5;
    		slideshow-table.link="linkhover";
    		slideshow-table.info="information";
    		slideshow-table.thumbs="slider";
    		slideshow-table.left="slideleft";
    		slideshow-table.right="slideright";
    		slideshow-table.scrollSpeed=4;
    		slideshow-table.spacing=5;
    		slideshow-table.active="#aaa";
    		slideshow-table.init("slideshow-table","image-table","imgprev-table","imgnext-table","imglink-table");
    	}
    </script>
    merci.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Bonjour,
    • tout d'abord tu pourrais avoir la correction de répondre à ta précédente discussion : plusieurs diaporama boostrap dans même page.

    • Pour poursuivre tu sors d'où cette façon d'écrire ton code en échappant les « quote » ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(\'slideshow\').style.display=\'none\';

  3. #3
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    bonjour,

    désolé l'ancien est un autre diaporama que j'ai abandonnée par rapport a mon projet.

    les cotes sont simplement du a la configuration de ma page que j'ai personnalisé.

    j'ai changer mon code est cela a donner du mieux mais les images n'apparaissent pas meme si maintenant j'ai bien le cadre de mon diaporama 2.

    Code : 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
     <script type="text/javascript">
    	$('Slideshow2').style.display='none';
    	$('Navtable').style.display='block';
    	var Slideshow2=new TINY.slideshow2("Slideshow2");
    	window.onload=function(){
    		Slideshow2.auto=false;
    		Slideshow2.speed=5;
    		Slideshow2.link="Linkhover2";
    		Slideshow2.info="Information2";
    		Slideshow2.thumbs="Slider2";
    		Slideshow2.left="Slideleft2";
    		Slideshow2.right="Slideright2";
    		Slideshow2.scrollSpeed=4;
    		Slideshow2.spacing=5;
    		Slideshow2.active="#aaa2";
    		Slideshow2.init("Slideshow2","Image2","Imgprev2","Imgnext2","Imglink2");
    	}
    </script>
    voici le js:
    Code : 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
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    var TINY={};
     
    function $(i){return document.getElementById(i)}
    function $$(e,p){p=p||document; return p.getElementsByTagName(e)}
     
    TINY.slideshow=function(n){
    	this.infoSpeed=this.imgSpeed=this.speed=10;
    	this.thumbOpacity=this.navHover=100;
    	this.navOpacity=30;
    	this.scrollSpeed=5;
    	this.letterbox='#000';
    	this.n=n;
    	this.c=0;
    	this.a=[]
    };
     
    TINY.slideshow.prototype={
    	init:function(s,z,b,f,q){
    		s=$(s);
    		var m=$$('li',s), i=0, w=0;
    		this.l=m.length;
    		this.q=$(q);
    		this.f=$(z);
    		this.r=$(this.info);
    		this.o=parseInt(TINY.style.val(z,'width'));
    		if(this.thumbs){
    			var u=$(this.left), r=$(this.right);
    			u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
    			u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');
    			r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');
    			this.p=$(this.thumbs)
    		}
    		for(i;i<this.l;i++){
    			this.a[i]={};
    			var h=m[i], a=this.a[i];
    			a.t=$$('h3',h)[0].innerHTML;
    			a.d=$$('p',h)[0].innerHTML;
    			a.l=$$('a',h)[0]?$$('a',h)[0].href:'';
    			a.p=$$('span',h)[0].innerHTML;
    			if(this.thumbs){
    				var g=$$('img',h)[0];
    				this.p.appendChild(g);
    				w+=parseInt(g.offsetWidth);
    				if(i!=this.l-1){
    					g.style.marginRight=this.spacing+'px';
    					w+=this.spacing
    				}
    				this.p.style.width=w+'px';
    				g.style.opacity=this.thumbOpacity/100;
    				g.style.filter='alpha(opacity='+this.thumbOpacity+')';
    				g.onmouseover=new Function('TINY.alpha.set(this,100,5)');
    				g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');
    				g.onclick=new Function(this.n+'.pr('+i+',1)')
    			}
    		}
    		if(b&&f){
    			b=$(b);
    			f=$(f);
    			b.style.opacity=f.style.opacity=this.navOpacity/100;
    			b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';
    			b.onmouseover=f.onmouseover=new Function('TINY.alpha.set(this,'+this.navHover+',5)');
    			b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');
    			b.onclick=new Function(this.n+'.mv(-1,1)');
    			f.onclick=new Function(this.n+'.mv(1,1)')
    		}
    		this.auto?this.is(0,0):this.is(0,1)
    	},
    	mv:function(d,c){
    		var t=this.c+d;
    		this.c=t=t<0?this.l-1:t>this.l-1?0:t;
    		this.pr(t,c)
    	},
    	pr:function(t,c){
    		clearTimeout(this.lt);
    		if(c){
    			clearTimeout(this.at)
    		}
    		this.c=t;
    		this.is(t,c)
    	},
    	is:function(s,c){
    		if(this.info){
    			TINY.height.set(this.r,1,this.infoSpeed/2,-1)
    		}
    		var i=new Image();
    		i.style.opacity=0;
    		i.style.filter='alpha(opacity=0)';
    		this.i=i;
    		i.onload=new Function(this.n+'.le('+s+','+c+')');
    		i.src=this.a[s].p;
    		if(this.thumbs){
    			var a=$$('img',this.p), l=a.length, x=0;
    			for(x;x<l;x++){
    				a[x].style.borderColor=x!=s?'':this.active
    			}
    		}
    	},
    	le:function(s,c){
    		this.f.appendChild(this.i);
    		var w=this.o-parseInt(this.i.offsetWidth);
    		if(w>0){
    			var l=Math.floor(w/2);
    			this.i.style.borderLeft=l+'px solid '+this.letterbox;
    			this.i.style.borderRight=(w-l)+'px solid '+this.letterbox
    		}
    		TINY.alpha.set(this.i,100,this.imgSpeed);
    		var n=new Function(this.n+'.nf('+s+')');
    		this.lt=setTimeout(n,this.imgSpeed*100);
    		if(!c){
    			this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)
    		}
    		if(this.a[s].l!=''){
    			this.q.onclick=new Function('window.location="'+this.a[s].l+'"');
    			this.q.onmouseover=new Function('this.className="'+this.link+'"');
    			this.q.onmouseout=new Function('this.className=""');
    			this.q.style.cursor='pointer'
    		}else{
    			this.q.onclick=this.q.onmouseover=null;
    			this.q.style.cursor='default'
    		}
    		var m=$$('img',this.f);
    		if(m.length>2){
    			this.f.removeChild(m[0])
    		}
    	},
    	nf:function(s){
    		if(this.info){
    			s=this.a[s];
    			$$('h3',this.r)[0].innerHTML=s.t;
    			$$('p',this.r)[0].innerHTML=s.d;
    			this.r.style.height='auto';
    			var h=parseInt(this.r.offsetHeight);
    			this.r.style.height=0;
    			TINY.height.set(this.r,h,this.infoSpeed,0)
    		}
    	}
    };
     
    TINY.scroll=function(){
    	return{
    		init:function(e,d,s){
    			e=typeof e=='object'?e:$(e); var p=e.style.left||TINY.style.val(e,'left'); e.style.left=p;
    			var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0; e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)
    		},
    		mv:function(e,l,d,s){
    			var c=parseInt(e.style.left); if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c); i=i<s?i:s; var n=c-i*d; e.style.left=n+'px'}
    		},
    		cl:function(e){e=typeof e=='object'?e:$(e); clearInterval(e.si)}
    	}
    }();
     
    TINY.height=function(){
    	return{
    		set:function(e,h,s,d){
    			e=typeof e=='object'?e:$(e); var oh=e.offsetHeight, ho=e.style.height||TINY.style.val(e,'height');
    			ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1; clearInterval(e.si); e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)
    		},
    		tw:function(e,h,ho,hd,s){
    			var oh=e.offsetHeight-ho;
    			if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}
    		}
    	}
    }();
     
    TINY.alpha=function(){
    	return{
    		set:function(e,a,s){
    			e=typeof e=='object'?e:$(e); var o=e.style.opacity||TINY.style.val(e,'opacity'),
    			d=a>o*100?1:-1; e.style.opacity=o; clearInterval(e.ai); e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)
    		},
    		tw:function(e,a,d,s){
    			var o=Math.round(e.style.opacity*100);
    			if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d; e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'}
    		}
    	}
    }();
     
    TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e); return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();
    merci

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    désolé l'ancien est un autre diaporama que j'ai abandonnée par rapport a mon projet.
    Clos donc cette discussion et un petit mot d'explication serait le bienvenu.


    Revenons à ta discussion, visiblement tu n'as pas d'autre choix que d’initialiser plusieurs TINY
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var slide_1 = new TINY.slideshow2("Slideshow1");
    var slide_2 = new TINY.slideshow2("Slideshow2");
    en faisant attention aux ID (uniques) misent sur tes éléments.

  5. #5
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    Bonjour, Desole mais je ne peux pas clore la discutions car comme je l'explique le deuxième diaporama resté vide avec que du blanc aucune image n'apparaît.Donc je pense que l'initialisation des deux n'est pas Bonne quelqu'un a une idée ?

    Merci

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Dialogue de sourd !
    Desole mais je ne peux pas clore la discutions...
    je parlais de cette discussion plusieurs diaporama boostrap dans même page.

    Donc je pense que l'initialisation des deux n'est pas Bonne quelqu'un a une idée ?
    montre nous ton code HTML/JS, de préférence allégé.

  7. #7
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    voici le code :

    Code : 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
     
     
     
    <script type="text/javascript">
    	$("slideshow1").style.display="none";
    	$("navpiscine").style.display="block";
    	var slideshow1=new TINY.slideshow("slideshow1");
    	window.onload=function(){
    		slideshow1.auto=false;
    		slideshow1.speed=5;
    		slideshow1.link="linkhover";
    		slideshow1.info="information";
    		slideshow1.thumbs="slider";
    		slideshow1.left="slideleft";
    		slideshow1.right="slideright";
    		slideshow1.scrollSpeed=4;
    		slideshow1.spacing=5;
    		slideshow1.active="#aaa";
    		slideshow1.init("slideshow1","image","imgprev","imgnext","imglink");
    	}
    </script>
     
     
     
     
    <script type="text/javascript">
    	$("Slideshow2").style.display="none";
    	$("Navtable").style.display="block";
    	var Slideshow2=new TINY.slideshow("Slideshow2");
    	window.onload=function(){
    		Slideshow2.auto=false;
    		Slideshow2.speed=5;
    		Slideshow2.link="Linkhover2";
    		Slideshow2.info="Information2";
    		Slideshow2.thumbs="Slider2";
    		Slideshow2.left="Slideleft2";
    		Slideshow2.right="Slideright2";
    		Slideshow2.scrollSpeed=4;
    		Slideshow2.spacing=5;
    		Slideshow2.active="#aaa";
    		Slideshow2.init("Slideshow2","Image2","Imgprev2","Imgnext2","Imglink2");
    	}
    </script>

    voici l'exemple :

    http://test3.webcreation66.com/transats.php

    http://www.scriptiny.com/2008/12/javascript-slideshow/

    Merci pour votre aide.

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Pour commencer ce que je te propose est de vérifier le code HTML et de la corriger : Nu Html Checker.

    Le deuxième point à corriger et l'écrasement de la fonction onload de window.

  9. #9
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    merci je vais regarder le lien envoyer a force de recherche j'ai trouver ceci :

    http://www.forumweb.pl/html/kilka-ga...-stronie,69705

    mais même en suivant le dernier code qui a l'air d être bon cela ne fonctionne pas.

    Si je comprend c'est mon initialisation qui n'est pas correct mais je ne vois pas faire autrement.

    merci.

  10. #10
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    voici le code js que j'ai oublier de transmettre :
    Code : 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
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    var TINY={};
     
    function $(i){return document.getElementById(i)}
    function $$(e,p){p=p||document; return p.getElementsByTagName(e)}
     
    TINY.slideshow=function(n){
    	this.infoSpeed=this.imgSpeed=this.speed=10;
    	this.thumbOpacity=this.navHover=100;
    	this.navOpacity=30;
    	this.scrollSpeed=5;
    	this.letterbox='#000';
    	this.n=n;
    	this.c=0;
    	this.a=[]
    };
     
    TINY.slideshow.prototype={
    	init:function(s,z,b,f,q){
    		s=$(s);
    		var m=$$('li',s), i=0, w=0;
    		this.l=m.length;
    		this.q=$(q);
    		this.f=$(z);
    		this.r=$(this.info);
    		this.o=parseInt(TINY.style.val(z,'width'));
    		if(this.thumbs){
    			var u=$(this.left), r=$(this.right);
    			u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
    			u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');
    			r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');
    			this.p=$(this.thumbs)
    		}
    		for(i;i<this.l;i++){
    			this.a[i]={};
    			var h=m[i], a=this.a[i];
    			a.t=$$('h3',h)[0].innerHTML;
    			a.d=$$('p',h)[0].innerHTML;
    			a.l=$$('a',h)[0]?$$('a',h)[0].href:'';
    			a.p=$$('span',h)[0].innerHTML;
    			if(this.thumbs){
    				var g=$$('img',h)[0];
    				this.p.appendChild(g);
    				w+=parseInt(g.offsetWidth);
    				if(i!=this.l-1){
    					g.style.marginRight=this.spacing+'px';
    					w+=this.spacing
    				}
    				this.p.style.width=w+'px';
    				g.style.opacity=this.thumbOpacity/100;
    				g.style.filter='alpha(opacity='+this.thumbOpacity+')';
    				g.onmouseover=new Function('TINY.alpha.set(this,100,5)');
    				g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');
    				g.onclick=new Function(this.n+'.pr('+i+',1)')
    			}
    		}
    		if(b&&f){
    			b=$(b);
    			f=$(f);
    			b.style.opacity=f.style.opacity=this.navOpacity/100;
    			b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';
    			b.onmouseover=f.onmouseover=new Function('TINY.alpha.set(this,'+this.navHover+',5)');
    			b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');
    			b.onclick=new Function(this.n+'.mv(-1,1)');
    			f.onclick=new Function(this.n+'.mv(1,1)')
    		}
    		this.auto?this.is(0,0):this.is(0,1)
    	},
    	mv:function(d,c){
    		var t=this.c+d;
    		this.c=t=t<0?this.l-1:t>this.l-1?0:t;
    		this.pr(t,c)
    	},
    	pr:function(t,c){
    		clearTimeout(this.lt);
    		if(c){
    			clearTimeout(this.at)
    		}
    		this.c=t;
    		this.is(t,c)
    	},
    	is:function(s,c){
    		if(this.info){
    			TINY.height.set(this.r,1,this.infoSpeed/2,-1)
    		}
    		var i=new Image();
    		i.style.opacity=0;
    		i.style.filter='alpha(opacity=0)';
    		this.i=i;
    		i.onload=new Function(this.n+'.le('+s+','+c+')');
    		i.src=this.a[s].p;
    		if(this.thumbs){
    			var a=$$('img',this.p), l=a.length, x=0;
    			for(x;x<l;x++){
    				a[x].style.borderColor=x!=s?'':this.active
    			}
    		}
    	},
    	le:function(s,c){
    		this.f.appendChild(this.i);
    		var w=this.o-parseInt(this.i.offsetWidth);
    		if(w>0){
    			var l=Math.floor(w/2);
    			this.i.style.borderLeft=l+'px solid '+this.letterbox;
    			this.i.style.borderRight=(w-l)+'px solid '+this.letterbox
    		}
    		TINY.alpha.set(this.i,100,this.imgSpeed);
    		var n=new Function(this.n+'.nf('+s+')');
    		this.lt=setTimeout(n,this.imgSpeed*100);
    		if(!c){
    			this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)
    		}
    		if(this.a[s].l!=''){
    			this.q.onclick=new Function('window.location="'+this.a[s].l+'"');
    			this.q.onmouseover=new Function('this.className="'+this.link+'"');
    			this.q.onmouseout=new Function('this.className=""');
    			this.q.style.cursor='pointer'
    		}else{
    			this.q.onclick=this.q.onmouseover=null;
    			this.q.style.cursor='default'
    		}
    		var m=$$('img',this.f);
    		if(m.length>2){
    			this.f.removeChild(m[0])
    		}
    	},
    	nf:function(s){
    		if(this.info){
    			s=this.a[s];
    			$$('h3',this.r)[0].innerHTML=s.t;
    			$$('p',this.r)[0].innerHTML=s.d;
    			this.r.style.height='auto';
    			var h=parseInt(this.r.offsetHeight);
    			this.r.style.height=0;
    			TINY.height.set(this.r,h,this.infoSpeed,0)
    		}
    	}
    };
     
    TINY.scroll=function(){
    	return{
    		init:function(e,d,s){
    			e=typeof e=='object'?e:$(e); var p=e.style.left||TINY.style.val(e,'left'); e.style.left=p;
    			var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0; e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)
    		},
    		mv:function(e,l,d,s){
    			var c=parseInt(e.style.left); if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c); i=i<s?i:s; var n=c-i*d; e.style.left=n+'px'}
    		},
    		cl:function(e){e=typeof e=='object'?e:$(e); clearInterval(e.si)}
    	}
    }();
     
    TINY.height=function(){
    	return{
    		set:function(e,h,s,d){
    			e=typeof e=='object'?e:$(e); var oh=e.offsetHeight, ho=e.style.height||TINY.style.val(e,'height');
    			ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1; clearInterval(e.si); e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)
    		},
    		tw:function(e,h,ho,hd,s){
    			var oh=e.offsetHeight-ho;
    			if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}
    		}
    	}
    }();
     
    TINY.alpha=function(){
    	return{
    		set:function(e,a,s){
    			e=typeof e=='object'?e:$(e); var o=e.style.opacity||TINY.style.val(e,'opacity'),
    			d=a>o*100?1:-1; e.style.opacity=o; clearInterval(e.ai); e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)
    		},
    		tw:function(e,a,d,s){
    			var o=Math.round(e.style.opacity*100);
    			if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d; e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'}
    		}
    	}
    }();
     
    TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e); return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();
    merci.

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    j'ai trouver ceci : ...
    Désolé je ne lis pas le Polonais

    Si je comprend c'est mon initialisation qui n'est pas correct mais je ne vois pas faire autrement.
    Ce n'est pas seulement cela il y a un problème avec l'application du CSS.

    TOUS les styles de tes éléments doivent être déclarés pour que le résultat soit viable. En absence de « class » tu as la possibilité de rajouter les sélecteurs de ton deuxième au CSS existant ce qui donnerait :
    Code css : 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
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    #wrapper {
      display: none;
      width: 900px;
      margin: 0 auto;
      padding: 35px 0 0 0;
    }
    #wrapper * {
      margin: 0;
      padding: 0;
    }
    #fullsize2,
    #fullsize {
      position: relative;
      padding: 0;
    }
    #information2,
    #information {
      z-index: 96;
      float: right;
      position: absolute;
      top: 5px;
      right: 10px;
      width: 42%;
      height: 0;
      padding: 0 10px;
      overflow: hidden;
      color: #000;
    }
    #information2 h3,
    #information h3 {
      padding: 3px 0 2px 3px;
      font: normal bold 2em Arial,Georgia,Helvetica,sans-serif;
      letter-spacing: -1px;
      color: #666;
    }
    #information2 p,
    #information p {
      float: right;
      padding: 0 0 5px 3px;
      font: normal 14px/22px "Lucida Sans",Arial,Helvetica,sans-serif;
      line-height: 140%;
      color: #000;
    }
    #information,
    #information .important {
      font-weight: bold;
    }
    #image2,
    #image {
      width: 450px;
      height: 280px;
    }
    #image2 img,
    #image img {
      z-index: 25;
      position: absolute;
      top: 20px;
      left: 40px;
      width: 450px;
      height: 250px;
      padding: 1px;
      border: 7px solid #CCC;
      background: #FFF;
    }
    .imgnav {
      z-index: 95;
      position: absolute;
      width: 25%;
      height: 180px;
      cursor: pointer;
    }
    #imgprev2,
    #imgprev {
      left: 0;
      background: none;
    }
    #imgnext2,
    #imgnext {
      right: 0;
      background: none;
    }
    #imglink2,
    #imglink {
      z-index: 90;
      position: absolute;
      width: 100%;
      height: 150px;
      opacity: .4;
      filter: alpha(opacity=40);
    }
    .linkhover {
    }
    #thumbnails2,
    #thumbnails {
      height: 48px;
      margin-top: 35px;
    }
    #slideleft2,
    #slideleft {
      float: left;
      width: 20px;
      height: 26px;
      margin-top: 40px;
      padding-left: 12px;
      background: url(../images/leftp.gif) top center no-repeat;
    }
    #slideleft2:hover,
    #slideleft:hover {
    }
    #slideright2,
    #slideright {
      float: right;
      width: 25px;
      height: 26px;
      margin-top: 40px;
      padding-right: 0;
      background: url(../images/rightp.gif) top center no-repeat;
    }
    #slideright2:hover,
    #slideright:hover {
    }
    #slidearea2,
    #slidearea {
      float: left;
      position: relative;
      width: 835px;
      height: 81px;
      margin-left: 3px;
      overflow: hidden;
    }
    html* #slidearea2,
    html* #slidearea {
      margin-left: 0;
    }
    .slider_bg {
      height: 458px;
      margin: 20px 0 0 0;
      border: 1px solid red;
      background-color: white;
    }
    #slider2,
    #slider {
      position: absolute;
      left: 0;
    }
    #slider2 img,
    #slider img {
      width: 80px;
      height: 50px;
      margin-top: 15px;
      padding: 1px;
      border: 3px solid #D8D8D8;
      background: #FFF;
      cursor: pointer;
    }
    .readmoremain {
      float: right;
      width: 88px;
      height: 22px;
      padding-top: 10px;
      border: 0;
      background: url(../images/readmore.gif) no-repeat;
    }


  12. #12
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    Merci j'ai mis le code les diaporamas affichent que du blanc.
    http://test3.webcreation66.com/transats.php

    pense-tu que j'ai oublié quelque chose ?

    MERCI.

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    pense-tu que j'ai oublié quelque chose ?
    Oui je pensais que tu le verrais, les ID sont sensibles à la casse Imgprev2 != imgprev2 par exemple.

  14. #14
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    je viens de corrigé désolé pas de grand changement veut tu que je te redonne le code modifié.

    Des flèches sont apparu sur le 1er diaporama.

    Merci.

  15. #15
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    voici le code html:

    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
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    <div class="bg1">
    			<div class="main">
    <article id="content">
    <h2>Transats (bain de soleil) G&D</h2><br />
     
     
          <div class="container_16">
     
     
                <!--end:menu grid -->
                <div class="clear">&nbsp;</div>
                <div class="grid_16">
                      <!--start:featured slider grid -->
                      <div class="slider_bg pngfix">
                            <!--start:slider_bg -->
     
                            <ul id="slideshow1">
     
                                  <!--start:slideshow -->
                                  <li>
                                        <!--start:slideshow content and image -->
                                        <h3>Modèle vague</h3>
                                        <span>transat/entreprise-inox-perpignan-piscine-transat-spa-inox-gd-8.jpg</span>
                                        <!--an image only -->
                                        <p>
    									Dimension : L 177cm x 166cm x H 510 en haut du dossier.<br />
    									Tube rond diamètre 42.4 x(2mm) pour l encadrement et 48.3x(2mm)pour les pieds 1.5 mm
    									Tôle perforé en 1.5 mm pour l assise.<br />
    									Finition miroir ou brossé.<br /><br />
    									<span class="important">Tarif :</span> 1475€
    									<br /><br /><a href="#transat" class="button1">Lire plus</a>
    									</p><br />
     
                                        <img src="transat/entreprise-inox-perpignan-piscine-transat-spa-inox-gd-8.jpg" alt="img-1" />
                                        <!--an image thumbnail only -->
                                  </li>
                                  <!--end:slideshow content and image -->
                                  <li>
                                        <!--start:slideshow content and image -->
                                        <h3>Modèle vague</h3>
                                        <span>transat/entreprise-inox-perpignan-piscine-transat-spa-inox-gd-9.jpg</span>
                                        <p>Dimension : L 177cm x 166cm x H 510 en haut du dossier.<br />
    									Tube rond diamètre 42.4 x(2mm) pour l encadrement et 48.3x(2mm)pour les pieds 1.5 mm
    									Tôle perforé en 1.5 mm pour l assise.<br />
    									Finition miroir ou brossé.<br /><br />
    									<span class="important">Tarif :</span> 1475€
    									<br /><br /><a href="#transat" class="button1">Lire plus</a>
    									</p><br />
                                        <img src="transat/entreprise-inox-perpignan-piscine-transat-spa-inox-gd-9.jpg" alt="img-2" />
                                        <!--an image thumbnail only -->
                                  </li>                              <!--end:slideshow content and image -->
     
     
     
                            </ul>
                            <!--end:slideshow -->
                            <div id="wrapper">
                                  <!--start:nav-piscine -->
                                  <div id="fullsize">
                                        <!--start:fullsize -->
                                        <div id="imgprev" class="imgnav pngfix" title="Previous"></div>
                                        <div id="imglink"></div>
                                        <div id="imgnext" class="imgnav pngfix" title="Next"></div>
                                        <div id="image"></div>
                                        <div id="information">
                                              <!--start:information -->
                                              <h3></h3>
                                              <p></p>
                                        </div>
                                        <!--end:information -->
                                  </div>
                                  <!--end:fullsize -->
                                  <div id="thumbnails">
                                        <!--start:thumbnails -->
                                        <div id="slideleft" title="Slide Left"></div>
                                        <div id="slidearea">
                                              <!--start:slidearea -->
                                              <div id="slider"></div>
                                        </div>
                                        <!--start:slidearea -->
                                        <div id="slideright" title="Slide Right"></div>
                                  </div>
                                  <!--end:thumbnails -->
                            </div>
                            <!--end:nav-piscine -->
                      </div>
                      <!--end:slider_bg -->
                </div>
                <!--start:featured slider grid -->
                <!--start:featured slider script -->
                <script type="text/javascript">
            $("slideshow1").style.display="none";
            $("wrapper").style.display="block";
            var slideshow1=new TINY.slideshow("slideshow1");
            window.onload=function(){
                    slideshow1.auto=false;
                    slideshow1.speed=5;
                    slideshow1.link="linkhover";
                    slideshow1.info="information";
                    slideshow1.thumbs="slider";
                    slideshow1.left="slideleft";
                    slideshow1.right="slideright";
                    slideshow1.scrollSpeed=4;
                    slideshow1.spacing=5;
                    slideshow1.active="#aaa";
                    slideshow1.init("slideshow1","image","imgprev","imgnext","imglink");
            }
    </script>
                <!--send:featured slider script -->
          </div>
          <!--end:header container -->
     
     
     
    <div class="clear"></div>
    </article>
    </div>
    </div>
     
    <br />
    <div class="bg1">
    <div class="main">
    <article id="content">
    <h2>Les transats (bain de soleil) G&D</h2>
    <p id="transat">
    <h1>Les modèles de transats</h1>
    Les 3 modèles : vague, dune et île sont réalisés entièrement  en inox 316L leurs finitions irréprochable se décline soit en poli-miroir ou en brossé d une classe intemporelle et résolument moderne.<br />
    ces 3 modèles sans compromis vous accompagneront pour des décennie d utilisation.<br /><br />
    Une remise de 30% sur le tarif HT a partir de 10 transats pour les professionnels.<br /><br />
    </p>
    </article>
    </div>
    </div>
     
     
     
     
     
     
     
     
     
     
     
     
    <div class="bg1">
    			<div class="main">
    <article id="content">
    <h2>Table basse / inox coloris</h2><br />
     
     
          <div class="container_16">
     
     
     
                <div class="clear">&nbsp;</div>
                <div class="grid_16">
     
                      <div class="slider_bg pngfix">
     
                            <ul id="slideshow2">
     
                                  <li>
     
                                        <h3>Modèle vague</h3>
                                        <span>transat/entreprise-inox-perpignan-piscine-transat-spa-inox-gd-8.jpg</span>
     
                                        <p>
    									Dimension : L 177cm x 166cm x H 510 en haut du dossier.<br />
    									Tube rond diamètre 42.4 x(2mm) pour l encadrement et 48.3x(2mm)pour les pieds 1.5 mm
    									Tôle perforé en 1.5 mm pour l assise.<br />
    									Finition miroir ou brossé.<br /><br />
    									<span class="important">Tarif :</span> 1475€
    									<br /><br /><a href="#transat" class="button1">Lire plus</a>
    									</p><br />
     
                                        <img src="transat/entreprise-inox-perpignan-piscine-transat-spa-inox-gd-8.jpg" alt="img-1" />
     
                                  </li>
     
                                  <li>
     
                                        <h3>Modèle vague</h3>
                                        <span>transat/entreprise-inox-perpignan-piscine-transat-spa-inox-gd-9.jpg</span>
                                        <p>Dimension : L 177cm x 166cm x H 510 en haut du dossier.<br />
    									Tube rond diamètre 42.4 x(2mm) pour l encadrement et 48.3x(2mm)pour les pieds 1.5 mm
    									Tôle perforé en 1.5 mm pour l assise.<br />
    									Finition miroir ou brossé.<br /><br />
    									<span class="important">Tarif :</span> 1475€
    									<br /><br /><a href="#transat" class="button1">Lire plus</a>
    									</p><br />
                                        <img src="transat/entreprise-inox-perpignan-piscine-transat-spa-inox-gd-9.jpg" alt="img-2" />
     
                                  </li>                             
     
     
                            </ul>
                            <!--end:slideshow -->
                            <div id="wrapper">
     
                                  <div id="fullsize">
     
                                        <div id="imgprev2" class="imgnav pngfix" title="Previous"></div>
                                        <div id="imglink2"></div>
                                        <div id="imgnext2" class="imgnav pngfix" title="Next"></div>
                                        <div id="image2"></div>
                                        <div id="information2">
     
                                              <h3></h3>
                                              <p></p>
                                        </div>
     
                                  </div>
                                  <!--end:fullsize -->
                                  <div id="thumbnails">
     
                                        <div id="Slideleft2" title="Slide Left"></div>
                                        <div id="slidearea2">
     
                                              <div id="Slider2"></div>
                                        </div>
     
                                        <div id="slideright2" title="Slide Right"></div>
                                  </div>
     
                            </div>
     
                      </div>
     
                </div>
     
          </div>
     
       <script type="text/javascript">
        $("slideshow2").style.display="none";
        $("wrapper").style.display="block";
        var slideshow2=new TINY.slideshow("slideshow2");
        window.onload=function(){
         slideshow2.auto=false;
            slideshow2.speed=5;
            slideshow2.link="linkhover2";
            slideshow2.info="information2";
            slideshow2.thumbs="slider2";
            slideshow2.left="slideleft2";
            slideshow2.right="slideright2";
            slideshow2.scrollSpeed=4;
            slideshow2.spacing=5;
            Slideshow2.active="#aaa";
            slideshow2.init("slideshow2","image2","imgprev2","imgnext2","imglink2");
        }
    </script>

    merci.

  16. #16
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Tu n'as toujours pas regroupé tes initialisations dans le même
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    window.onload=function(){
    };
    de plus il te reste des ID incorrectes ou en double, extrait
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="thumbnails">
      <div id="Slideleft2" title="Slide Left"></div>
      <div id="slidearea2">
        <div id="Slider2"></div>
      </div>
      <div id="slideright2" title="Slide Right"></div>
    </div>
    Je crois qu'il faut que tu te prennes en main sereinement

  17. #17
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    désolé je verifié chaque ligne et mit tout dans le même onload mais je ne sais pas si je m'y suis bien pris, aucun changement pour le moment :

    Code : 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
     <script type="text/javascript">
     
        $("slideshow2").style.display="none";
        $("wrapper").style.display="block";
        var slideshow2=new TINY.slideshow("slideshow2");
     
     
    	$("slideshow1").style.display="none";
    	$("wrapper").style.display="block";
    	var slideshow1=new TINY.slideshow("slideshow1");
     
     
        window.onload=function(){
    		slideshow1.auto=false;
            slideshow2.auto=false;
     
    		slideshow1.speed=5;
            slideshow2.speed=5;
     
    		slideshow1.link="linkhover1";
            slideshow2.link="linkhover2";
     
            slideshow1.info="information1";
    		slideshow2.info="information2";
     
    		slideshow1.thumbs="slider1";
            slideshow2.thumbs="slider2";
     
    		slideshow1.left="slideleft1";
            slideshow2.left="slideleft2";
     
    		slideshow2.right="slideright1";
            slideshow2.right="slideright2";
     
    		slideshow1.scrollSpeed=4;
            slideshow2.scrollSpeed=4;
     
    		slideshow1.spacing=5;
            slideshow2.spacing=5;
     
    		Slideshow1.active="#aaa";
            Slideshow2.active="#aaa";
     
    		slideshow1.init("slideshow1","image1","imgprev1","imgnext1","imglink1");
            slideshow2.init("slideshow2","image2","imgprev2","imgnext2","imglink2");
     
        }
    </script>
    la seule chose est le wrapper doit je aussi le mettre en unique comme dans le css il n'y etait pas je ne sais pas ?

    Merci encore pour ton aide.

  18. #18
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    après plusieurs lecture j'ai compris que le code devait etre ainsi :

    Le init doit etre slideshow, je suis reparti sur le code de base du site :
    http://www.scriptiny.com/2008/12/javascript-slideshow/

    slideshow.init("slideshow","image","imgprev","imgnext","imglink");
    slideshow.init("slideshow2","image2","imgprev2","imgnext2","imglink2");

    mais le probleme est que les image du 1er diaporama ne s'affiche pas mais maintenant la structure s'affiche bien sur les 2 diaporamas.

    je l'ai mis en ligne voici l'adresse :
    http://test3.webcreation66.com/test/

  19. #19
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    pourquoi te compliques-tu la vie avec un slideshow :
    • qui date apparemment de 2008,
    • avec des options très limitées et quasiment pas de documentation,
    • et où il est dit nulle part qu'on puisse en mettre plusieurs sur une page ?

    De plus, ce type de slideshow est "has been"...

    Tu peux facilementen trouver des plus récents, responsive, en jQuery, et qu'on peut dupliquer sur une page...

    Par exemple :

  20. #20
    Membre habitué
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    Points : 149
    Points
    149
    Par défaut
    Merci le plus important pour moi et que du texte(assez long) est à droite est change en même temps que l'image.

    http://bxslider.com/examples/thumbnail-pager-2

    celui-ci ressemble a ce que j'avais mais je vais avoir une vingtaine d'image c'est pour cela que je voulais qui le carousel du bas soit defilant.

    j'ai trouver cela mais peut-on remplacer les point par des images du slider au dessus ?
    http://www.htmldrive.net/items/show/...nt-Slider.html

    Merci.

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Plusieurs diaporama sur même page web
    Par Ganseky dans le forum jQuery
    Réponses: 0
    Dernier message: 31/01/2014, 17h47
  2. [MySQL] afficher et cacher plusieurs txts dans même page après requête bdd
    Par noceb dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 05/02/2013, 17h09
  3. [XL-2007] coder un traitement plusieurs fois à une même page web en vba
    Par skipeemed dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 03/02/2011, 11h13
  4. Application de plusieurs styles à une même page html
    Par melek_net dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 29/03/2008, 13h04
  5. Est-il possible d'ouvrir plusieurs fois la même page en cliquant sur un même lien ?
    Par aweb01 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 16/05/2006, 21h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo