Image Slideshow : Adding image remembering
Hello guys,
I am using Javascript TINYSlideshow script and I want to add it some extra functionality. As you can see on site http://nabyteksdusi.cz/test.php when you click on image, it sends you on site with enlarged one. If you want to get back with back arrow, the gallery is starting on first image. And I want to extend the Slideshow function of remembering the image id (?), so when you get back, you see an image where you ended. I think that a getCookie function is needed, but I am pretty new to using javascript, so I will appreciate any kind of help to make it work.
Here is the javascript code:
Code:
var SKRIPT={};
function $(i){return document.getElementById(i)}
function $$(e,p){p=p||document; return p.getElementsByTagName(e)}
SKRIPT.slideshow=function(n){
this.infoSpeed=this.imgSpeed=this.speed=2;
this.thumbOpacity=this.navHover=100;
this.navOpacity=50;
this.letterbox='#000';
this.persist=true;
this.n=n;
this.c=0;
this.a=[]
};
SKRIPT.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(SKRIPT.style.val(z,'width'));
if(this.thumbs){
var u=$(this.left), r=$(this.right);
u.onmouseover=new Function('SKRIPT.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
u.onmouseout=r.onmouseout=new Function('SKRIPT.scroll.cl("'+this.thumbs+'")');
r.onmouseover=new Function('SKRIPT.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.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('SKRIPT.alpha.set(this,100,5)');
g.onmouseout=new Function('SKRIPT.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('SKRIPT.alpha.set(this,'+this.navHover+',5)');
b.onmouseout=f.onmouseout=new Function('SKRIPT.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){
SKRIPT.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
}
SKRIPT.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];
this.r.style.height='auto';
var h=parseInt(this.r.offsetHeight);
this.r.style.height=0;
SKRIPT.height.set(this.r,h,this.infoSpeed,0)
}
}
};
SKRIPT.height=function(){
return{
set:function(e,h,s,d){
e=typeof e=='object'?e:$(e); var oh=e.offsetHeight, ho=e.style.height||SKRIPT.style.val(e,'height');
ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1; clearInterval(e.si); e.si=setInterval(function(){SKRIPT.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'}}
}
}
}();
SKRIPT.alpha=function(){
return{
set:function(e,a,s){
e=typeof e=='object'?e:$(e); var o=e.style.opacity||SKRIPT.style.val(e,'opacity'),
d=a>o*100?1:-1; e.style.opacity=o; clearInterval(e.ai); e.ai=setInterval(function(){SKRIPT.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+')'}
}
}
}();
SKRIPT.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)}}}();
Thanks in advance.
M.
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Bookmarks