1 JS-Gallerie 2mal auf einer Seite implementieren

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo zusammen,

ich habe (mal wieder) ein Problem!

Ich möchte eine JS-Gallerie 2 mal auf einer Seite einbinden.

Ich habe mich bislang für diese entschieden:
http://www.scriptiny.com/2011/01/javascript-slider/
Klein, schnell, macht was sie soll - aber eben nur mit ein mal eingebunden.

Was muss ich tun, damit ich 2 Gallery-Leisten auf einer Seite habe?
Nur die Divs kopieren und eine andere id - das klappt nicht…

also vermute ich, dass ich im js script Änderungen vornehmen muss…

Kann mir mal jemand ein wenig auf die Sprünge helfen - bitte??

Momentan habe ich den EIndruck - je tiefer ich in JS vordringe, umso undurchsichtiger wird das Ganze… :-/

Oder weiss jemand eine 2-zeilige Gallerie, bei der ich die 2 Bänder individuell klicken kann?? Tante Gockerl und Onkel Yuchhuuuuu haben bislang leider geschwiegen…

Für sachdienliche Hinweise bin ich wie immer überaus dankbar!

Viele Grüße

Midir

Ich habe hier mal den Code:

CSS:

* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#555; background:#ddd}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:673px; margin:50px auto}
#container {position:relative; background:#fff; padding:32px; height:235px; border-right:1px solid #ccc; border-bottom:1px solid #ccc}
.sliderbutton {float:left; width:25px; height:235px; cursor:stuck_out_tongue:ointer}
#slideleft {background:url(images/icons.gif) -50px -265px no-repeat}
#slideleft:hover {background-position:-0 -265px}
#slideright {background:url(images/icons.gif) 0 90px no-repeat}
#slideright:hover {background-position:-50px 90px}
#slider {float:left; position:relative; overflow:auto; width:558px; height:235px}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:558px; height:235px}
.pagination {position:absolute; top:40px; right:61px; list-style:none; height:25px}
.pagination li {float:left; cursor:stuck_out_tongue:ointer; height:8px; width:8px; background:#ccc; margin:0 4px 0 0; border:1px solid #fff}
.pagination li:hover, li.current {background:#fff}

#Zeile1 { position:absolute; top:0px; left:0px}
#Zeile2 { position:absolute; top:300px; left:0px}

/* Hier meine bisherigen Tests…
#wrapper2 {width:673px; margin:50px auto}
#container2 {position:relative; background:#fff; padding:32px; height:235px; border-right:1px solid #ccc; border-bottom:1px solid #ccc}
.pagination2 {position:absolute; top:40px; right:61px; list-style:none; height:25px}
.pagination2 li {float:left; cursor:stuck_out_tongue:ointer; height:8px; width:8px; background:#ccc; margin:0 4px 0 0; border:1px solid #fff}
#slider2 {float:left; position:relative; overflow:auto; width:558px; height:235px}

*/

HTML:

TinySlider - JavaScript Slideshow

var slideshow=new TINY.slider.slide(‚slideshow‘,{
id:‚slider‘,
auto:4,
resume:false,
vertical:false,
navid:‚pagination‘,
activeclass:‚current‘,
position:0,
rewind:false,
elastic:true,
left:‚slideleft‘,
right:‚slideright‘
});

// obere Funktion kopiert - aber es geht nicht…
//var slideshow=new TINY.slider.slide(‚slideshow2‘,{
// id:‚slider2‘,
// auto:4,
// resume:false,
// vertical:false,
// navid:‚pagination‘,
// activeclass:‚current‘,
// position:0,
// rewind:false,
// elastic:true,
// left:‚slideleft‘,
// right:‚slideright‘
//});

=============================================

JS:

//var TINY={};
//
//function T$(i){return document.getElementById(i)}
//function T$$(e,p){return p.getElementsByTagName(e)}
//
//TINY.slider=function(){

// Diesen Bereich kopieren und umbenennen??

var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.slider=function(){
function slide(n,p){this.n=n; this.init§}
slide.prototype.init=function§{
var s=this.x=T$(p.id), u=this.u=T$$(‚ul‘,s)[0], c=this.m=T$$(‚li‘,u), l=c.length, i=this.l=this.c=0; this.b=1;
if(p.navid&&p.activeclass){this.g=T$$(‚li‘,T$(p.navid)); this.s=p.activeclass}
this.a=p.auto||0; this.p=p.resume||0; this.r=p.rewind||0; this.e=p.elastic||false; this.v=p.vertical||0; s.style.overflow=‚hidden‘;
for(i;ithis.l&&this.b>1){
v=(this.l*(this.b-1))+p; p=v
}
}
var t=this.v?v*this.h*-1:v*this.w*-1, d=p1&&this.c%this.l==0){this.clear()}
}
}else{
var v=o-Math.ceil(Math.abs(t-o)*.1)*d+‚px‘;
this.v?this.u.style.top=v:this.u.style.left=v
}
},
slide.prototype.clear=function(){
var c=T$$(‚li‘,this.u), t=i=c.length; this.v?this.u.style.top=0:this.u.style.left=0; this.b=1; this.c=0;
for(i;i>0;i–){
var e=c[i-1];
if(t>this.l&&e.parentNode==this.u){this.u.removeChild(e); t–}
}
},
slide.prototype.sel=function(i){
var e=T$(i); e.onselectstart=e.onmousedown=function(){return false}
}
return{slide:slide}
}();

#2

Hallo Midir,

in der Tat müsstest Du da jede Menge ändern, wenn Du ein 2. SliderObject aufmachst. Keine ID darf 2x vorkommen und es ist ja nicht nur die Slider ID … ebenso unterschiedliche Functions-Aufrufe … also jede viele Änderungsarbeiten … und auf den ersten Blick kann ich Dir nicht sagen, ob es dann auch funktioniert.

Viel einfacher:
Du machst je Slider eine eigene Seite und bindest diese als oder ein.

mfg
Klaus

#3

Merci
Danke Klaus,

einfach nen zusätzlichen iframe - und gut ists :wink:

klappt!

Grüße

Midir

#4

Hallo Midir,

einfach nen zusätzlichen iframe - und gut ists :wink:

habe mir in der Zwischenzeit die Codes mal genauer angeschaut

allein die Styles für den 2. Slider zu definieren … wäre schon Grund genug einen iframe zu nehmen

habe es mal mit getestet, vorher den bißchen am css geändert.
Passte gut in (width:620px; height:240px) rein.
Und noch jede Platz für einen 3. oder 4. :smile:)

Gruß
Klaus