2 noobslides auf der selben seite

[Geri345]

Hallo,

ich will 2x die slideshow auf einer seite haben, kriege aber bloß eine zum laufen. die 2 zeigt zwar die thumbs korrekt an, reagiert aber nicht:
hier der Code:

javascript:

<script type="text/javascript">	window.addEvent('domready',function(){
	
	var startItem = 3; //or   0   or any
		var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').set('opacity',0.8);
		var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
		var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);
		var nS7 = new noobSlide({
			box: $('box7'),
			items: [0,1,2,3,4,5,6,7],
			handles: $$('#thumbs_handles7 span'),
			fxOptions: fxOptions7,
			onWalk: function(currentItem){
				thumbsFx.start(currentItem*60-568);
			},
			startItem: startItem
		});
		//walk to first with fx
		nS7.walk(0);
		
	});	
	</script>
    
    <script type="text/javascript">
	window.addEvent('domready',function(){
	
	var startItem = 4; //or   0   or any
		var thumbs_mask72 = $('thumbs_mask72').setStyle('left',(startItem*60-568)+'px').set('opacity',0.8);
		var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
		var thumbsFx = new Fx.Tween(thumbs_mask72,fxOptions7);
		var nS7 = new noobSlide({
			box: $('box72'),
			items: [0,1,2,3,4,5,6,7],
			handles: $$('#thumbs_handles72 span'),
			fxOptions: fxOptions7,
			onWalk: function(currentItem){
				thumbsFx.start(currentItem*60-568);
			},
			startItem: startItem
		});
		//walk to first with fx
		nS7.walk(0);
		
	});	
	</script>

und hier der html_code

<div id="gallery_links"><!--GALLERY-LINKS-->                <div class="sample"><!--SAMPLE-->	<div class="mask6"><!--MASK6-->		<div id="box7"><!--BOX7-->			<span><img src="img/bild1.jpg" alt="Photo" /></span>			<span><img src="img/bild2.jpg" alt="Photo" /></span>			<span><img src="img/bild3.jpg" alt="Photo" /></span>			<span><img src="img/bild4.jpg" alt="Photo" /></span>
		</div><!--BOX7-ENDE-->	</div><!--MASK6-ENDE-->
	<div id="thumbs7"><!--THUMBS7-->		<div class="thumbs"><!--THUMBS-->			<div><img src="img/bild1.jpg" alt="Photo Thumb" /></div>			<div><img src="img/bild2.jpg" alt="Photo Thumb" /></div>			<div><img src="img/bild3.jpg" alt="Photo Thumb" /></div>			<div><img src="img/bild4.jpg" alt="Photo Thumb" /></div>
		</div><!--THUMBS-ENDE-->
		<div id="thumbs_mask7"></div>
		<p id="thumbs_handles7">			<span></span>			<span></span>			<span></span>			<span></span>		</p>	</div><!--THUMBS7-ENDE--></div><!--SAMPLE-ENDE-->                </div><!--GALLERY-LINKS-ENDE-->

<div id="gallery_rechts"><!--GALLERY-LINKS-->                <div class="sample"><!--SAMPLE-->	<div class="mask6"><!--MASK6-->		<div id="box72"><!--BOX7-->			<span><img src="img/bild5.jpg" alt="Photo" /></span>			<span><img src="img/bild6.jpg" alt="Photo" /></span>			<span><img src="img/bild7.jpg" alt="Photo" /></span>			<span><img src="img/bild8.jpg" alt="Photo" /></span>
		</div><!--BOX7-ENDE-->	</div><!--MASK6-ENDE-->
	<div id="thumbs7"><!--THUMBS7-->		<div class="thumbs"><!--THUMBS-->			<div><img src="img/bild5.jpg" alt="Photo Thumb" /></div>			<div><img src="img/bild6.jpg" alt="Photo Thumb" /></div>			<div><img src="img/bild7.jpg" alt="Photo Thumb" /></div>			<div><img src="img/bild8.jpg" alt="Photo Thumb" /></div>
		</div><!--THUMBS-ENDE-->
		<div id="thumbs_mask72"></div>
		<p id="thumbs_handles72">			<span></span>			<span></span>			<span></span>			<span></span>		</p>	</div><!--THUMBS7-ENDE--></div><!--SAMPLE-ENDE-->                </div><!--GALLERY-LINKS-ENDE-->

 

[threadi]

Wenn Du das so aufbaust, musst Du glaube ich auch die anderen Variablen anpassen. Also statt fxOptions7 im zweiten Fall fxOptions72 schreiben etc. Ansonsten schau auch mal in die JavaScript-Fehlerkonsole.

 

[Geri345]

ja, wollte ich auch anpassen, aber zu fxOptions7 finde ich nirgends einen punkt, den ich kopieren und ändern könnten um ein individuelles slide zu erhalten. wo und wie ändere ich den? bzw was muss ich insgesamt noch alles umändern? oder gäbe es einen leichteren Weg?

 

[Sempervivum]

oder gäbe es einen leichteren Weg?

Leichter wäre es sicherlich, eine Slideshow zu verwenden, die das Anlegen mehrerer Instanzen gleich unterstützt. Z. B. eine von diesen:
Javascript: Slideshow
JQuery Cycle Plugin
jQuery content slider carousel image slideshow | bxSlider
Viele Grüße - Ulrich