Oláa todos, estou com um projeto no qual o template do site possui um slideshow, mas um mesmo não apresenta nenhuma opção de inserção de link, ou seja, ele mostra um slideshow mas ao clicar nas imagens não leva a lugar nenhuma, e eu desejava que ao clicar na imagem o user fosse levado a um caminho de minha preferencia. já tentei diversos modos e os mesmo so dão erros. alguém pode me ajudar como fazer o slideshow com um linkpor favor? para saberem como funciona o slideshow podem visualizar direto no site ainda em construção http://portal.rendersbrasil.com.br código do arquivo slideshow.js var SlideShow = new Class({
getOptions: function(){
return {
effect: 'fade', //fade|wipe|slide|random
duration: 2000,
transition: Fx.Transitions.linear,
direction: 'right', //top|right|bottom|left|random
color: false,
wait: 5000,
loop: false,
thumbnails: false,
thumbnailCls: 'outline',
backgroundSlider: false,
loadingCls: 'loading',
onClick: false
};
},
initialize: function(container, images, options){
this.setOptions(this.getOptions(), options);
this.container = $(container);
this.container.setStyles({
position: 'relative',
overflow: 'hidden'
});
if(this.options.onClick){
this.container.addEvent('click', function(){
this.options.onClick(this.imageLoaded);
}.bind(this));
}
this.imagesHolder = new Element('div').setStyles({
position: 'absolute',
overflow: 'hidden',
top: this.container.getStyle('height'),
left: 0,
width: '0px',
height: '0px',
display: 'none'
}).injectInside(this.container);
if($type(images) == 'string' && !this.options.thumbnails){
var imageList = [];
$$('.'+images).each(function(el){
imageList.push(el.src);
el.injectInside(this.imagesHolder);
},this);
this.images = imageList;
}else if($type(images) == 'string' && this.options.thumbnails){
var imageList = [];
var srcList = [];
this.thumbnails = $$('.'+images);
this.thumbnails.each(function(el,i){
srcList.push(el.href);
imageList.push(el.getElement('img'));
el.href = 'java script:;';
el.addEvent('click',function(){
this.stop();
this.play(i);
}.bind(this,el,i));
},this);
this.images = srcList;
this.thumbnailImages = imageList;
if(this.options.backgroundSlider){
this.bgSlider = new BackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}});
this.bgSlider.set(this.thumbnailImages[0]);
}
}else{
this.images = images;
}
this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
position: 'absolute',
top: 0,
left: 0,
zIndex: 3,
display: 'none',
width: this.container.getStyle('width'),
height: this.container.getStyle('height')
}).injectInside(this.container);
this.oldImage = new Element('div').setStyles({
position: 'absolute',
overflow: 'hidden',
top: 0,
left: 0,
opacity: 0,
width: this.container.getStyle('width'),
height: this.container.getStyle('height')
}).injectInside(this.container);
this.newImage = this.oldImage.clone();
this.newImage.injectInside(this.container);
this.timer = 0;
this.image = -1;
this.imageLoaded = 0;
this.stopped = true;
this.started = false;
this.animating = false;
},
load: function(){
$clear(this.timer);
this.loading.setStyle('display','block');
this.image++;
var img = this.images[this.image];
delete this.imageObj;
doLoad = true;
this.imagesHolder.getElements('img').each(function(el){
var src = this.images[this.image];
if(el.src == src){
this.imageObj = el;
doLoad = false;
this.add = false;
this.show();
}
},this);
if(doLoad){
this.add = true;
this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});
}
},
show: function(add){
if(this.add){
this.imageObj.injectInside(this.imagesHolder);
}
this.newImage.setStyles({
zIndex: 1,
opacity: 0
});
var img = this.newImage.getElement('img');
if(img){
img.replaceWith(this.imageObj.clone());
}else{
var obj = this.imageObj.clone();
obj.injectInside(this.newImage);
}
this.imageLoaded = this.image;
this.loading.setStyle('display','none');
if(this.options.thumbnails){
if(this.options.backgroundSlider){
var elT = this.thumbnailImages[this.image];
this.bgSlider.move(elT);
this.bgSlider.setStart(elT);
}else{
this.thumbnails.each(function(el,i){
el.removeClass(this.options.thumbnailCls);
if(i == this.image){
el.addClass(this.options.thumbnailCls);
}
},this);
}
}
this.effect();
},
wait: function(){
this.timer = this.load.delay(this.options.wait,this);
},
play: function(num){
if(this.stopped){
if(num > -1){this.image = num-1};
if(this.image < this.images.length){
this.stopped = false;
if(this.started){
this.next();
}else{
this.load();
}
this.started = true;
}
}
},
stop: function(){
$clear(this.timer);
this.stopped = true;
},
next: function(wait){
var doNext = true;
if(wait && this.stopped){
doNext = false;
}
if(this.animating){
doNext = false;
}
if(doNext){
this.cloneImage();
$clear(this.timer);
if(this.image < this.images.length-1){
if(wait){
this.wait();
}else{
this.load();
}
}else{
if(this.options.loop){
this.image = -1;
if(wait){
this.wait();
}else{
this.load();
}
}else{
this.stopped = true;
}
}
}
},
previous: function(){
if(this.imageLoaded == 0){
this.image = this.images.length-2;
}else{
this.image = this.imageLoaded-2;
}
this.next();
},
cloneImage: function(){
var img = this.oldImage.getElement('img');
if(img){
img.replaceWith(this.imageObj.clone());
}else{
var obj = this.imageObj.clone();
obj.injectInside(this.oldImage);
}
this.oldImage.setStyles({
zIndex: 0,
top: 0,
left: 0,
opacity: 1
});
this.newImage.setStyles({opacity:0});
},
effect: function(){
this.animating = true;
this.effectObj = this.newImage.effects({
duration: this.options.duration,
transition: this.options.transition
});
var myFxTypes = ['fade','wipe','slide'];
var myFxDir = ['top','right','bottom','left'];
if(this.options.effect == 'fade'){
this.fade();
}else if(this.options.effect == 'wipe'){
if(this.options.direction == 'random'){
this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
}else{
this.setup(this.options.direction);
}
this.wipe();
}else if(this.options.effect == 'slide'){
if(this.options.direction == 'random'){
this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
}else{
this.setup(this.options.direction);
}
this.slide();
}else if(this.options.effect == 'random'){
var type = myFxTypes[Math.floor(Math.random()*(2+1))];
if(type != 'fade'){
var dir = myFxDir[Math.floor(Math.random()*(3+1))];
if(this.options.direction == 'random'){
this.setup(dir);
}else{
this.setup(this.options.direction);
}
}else{
this.setup();
}
this[type]();
}
},
setup: function(dir){
if(dir == 'top'){
this.top = -this.container.getStyle('height').toInt();
this.left = 0;
this.topOut = this.container.getStyle('height').toInt();
this.leftOut = 0;
}else if(dir == 'right'){
this.top = 0;
this.left = this.container.getStyle('width').toInt();
this.topOut = 0;
this.leftOut = -this.container.getStyle('width').toInt();
}else if(dir == 'bottom'){
this.top = this.container.getStyle('height').toInt();
this.left = 0;
this.topOut = -this.container.getStyle('height').toInt();
this.leftOut = 0;
}else if(dir == 'left'){
this.top = 0;
this.left = -this.container.getStyle('width').toInt();
this.topOut = 0;
this.leftOut = this.container.getStyle('width').toInt();
}else{
this.top = 0;
this.left = 0;
this.topOut = 0;
this.leftOut = 0;
}
},
fade: function(){
this.effectObj.start({
opacity: [0,1]
});
this.resetAnimation.delay(this.options.duration+90,this);
if(!this.stopped){
this.next.delay(this.options.duration+100,this,true);
}
},
wipe: function(){
this.oldImage.effects({
duration: this.options.duration,
transition: this.options.transition
}).start({
top: [0,this.topOut],
left: [0, this.leftOut]
})
this.effectObj.start({
top: [this.top,0],
left: [this.left,0],
opacity: [1,1]
},this);
this.resetAnimation.delay(this.options.duration+90,this);
if(!this.stopped){
this.next.delay(this.options.duration+100,this,true);
}
},
slide: function(){
this.effectObj.start({
top: [this.top,0],
left: [this.left,0],
opacity: [1,1]
},this);
this.resetAnimation.delay(this.options.duration+90,this);
if(!this.stopped){
this.next.delay(this.options.duration+100,this,true);
}
},
resetAnimation: function(){
this.animating = false;
}
});
SlideShow.implement(new Options);
SlideShow.implement(new Events);
/*************************************************************/
codigo da pagina index.php (a pagina que apresenta o slideshow)
