Wie kann man Slider individuell einstellen?

Hallo,
ich habe einen Quellcode vor einem Jahr hier aus dem Forum ( von Daniel www.omba.de.tl) auf meiner Seite eingebaut. Hat und klappt immer noch einwandfrei.

Bei diesem Slider muss man einen Teil des Codes im Feld " Text über Design " einfügen.
Dort wird auch festgelegt wie schnell die Bilder wechseln sollen, soweit so gut.

Jetzt möchte ich einen zweiten Slider einbauen, wo die Bilder doppelt so schnell wechseln sollen, der erste Slider soll aber bleiben wie er ist.

Gibt es eine Möglichkeit mit diesem Code unterschiedliche Zeiten einzustellen?
Wenn ja wie und wo?

Ich habe mal den Code hier aufgelistet:

Dieser Teil wird auf die Seite gesetzt wo er erscheinen soll (ist hier gekürzt):

<style type="text/css">
<!--

.clear {clear:both;}

#gallery {position:relative; height: 360px; }

#gallery a {float:left; position:absolute; }

#gallery a img {border:none;}

#gallery a.show {z-index:500;}

#gallery .caption {
z-index: 600;
background-color: #;
color: #fff;
height: 100px;
width: 100%;
position: absolute;
bottom: 0; }

#gallery .caption .content {margin:5px;}

#gallery .caption .content h3 {margin:0; padding:0; color:#ffffff; }
-->
</style>
<div id="gallery">
<div style="text-align: left;"><a class="show" href="#"> <img width="580" height="360" rel="&lt;h3&gt;Weihnachtsfeier 2013" title="" alt="a" src="http://img.webme.com/pic/a/aikidotvd/xxxx.jpg" /> </a> <a href="#"> <img width="580" height="360" rel="&lt;h3&gt;Weihnachtsfeier 2013" title="" alt=" " src="http://img.webme.com/pic/a/aikidotvd/xxxxx.jpg" /> </a> <a href="#"> <img width="580" height="360" rel="&lt;h3&gt;Weihnachtsfeier 2013" title="" alt=" " src="http://img.webme.com/pic/a/aikidotvd/xcxxcxc.jpg" /> </a>
</a></div>
<div class="caption">
<div class="content">&nbsp;</div>
</div>
</div>
<div class="clear">&nbsp;</div>
---------------------------------------------------------------------------------

Das ist der Teil der im "Text über Design" eingefügt wird:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow() {

//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});

//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});

//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});

//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);

//Bilderwechsel Zeit 5000 = 5 sekunden
setInterval('gallery()',5000);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

//Get next image caption
var caption = next.find('img').attr('rel');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );

//Display the content
$('#gallery .content').html(caption);}

</script>

Ich hoffe es ist deutlich worum es mir geht.
Sollte etwas nicht klar sein dann bitte fragen.
Gruß Eric

Hallo Eric,

ich habe mir den Code mal angesehen und so umgeschrieben, sodass dieser beliebig oft genutzt werden kann.
Damit das alles auch funktioniert, muss du jedoch deine vorhandenen Slideshows leicht verändert.

Zunächst mal zum Slider selbst:

Über den Slideshows (nur 1x pro Seite!):

Slideshow 1:

Text über dem Design:

Was Du an deinen jetzigen Slidern verändert musst:
Grün = Hinzufügen
Gelb = Verändern

Weitere Slideshow einbinden:
Um eine weitere Slideshow einzubinden, kannst du den Code von Slideshow 1 nehmen, jedoch muss eine andere ID verwendet werden (z.B. gallery2 anstatt gallery).

Zusätzlich muss dann noch ein Teil des Javascript Codes verändert werden:

Hierbei ist 'gallery2' logischerweise die ID der neuen Slideshow.


Ich hoffe du kannst damit etwas anfangen - falls nicht, kannst du mich ruhig anschreiben.
MfG Dennis14e
______________

Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert.