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

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    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
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    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 éprouvé
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    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
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    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 éprouvé
    Inscrit en
    Janvier 2008
    Messages
    1 159
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 1 159
    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
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    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é.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Plusieurs diaporama sur même page web
    Par Ganseky dans le forum jQuery
    Réponses: 0
    Dernier message: 31/01/2014, 16h47
  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, 16h09
  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, 10h13
  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, 12h04
  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, 20h05

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