The spacegalley plugin may be old but it hasn't lost its glamour.
Unfortunatelly there is only one thing missing, the link for the rotating images.
The main problem is that this plugin uses the mouse click in order to work and we dont want to change that ( we could add arrows but nah).
The logic i used in order to make this happen is to add a link in front of the images witch the user can click and go to each href.
In order to make this happen of course we must add a link to each of the images.
<img src="/images/free wallpaper_image_3.jpg" title="image3" alt="http://www.Digi-web.gr" />
<img src="/images/free wallpaper_image_2.jpg" title="image2" alt="http://www.Digi-web.gr" />
<img src="/images/free wallpaper_image_1.jpg" title="image1" alt="http://www.Digi-web.gr" />
As you can see we achieve this by adding the link source at the images alt tag.
Now for the javascript part
I used spacegallerys after and before functions in order to invoke my custom instrunctions.
The main function is spacelink. What it does? it searches for the last image inside spacegallery plugin (this is the one it is visible) and appends each time the link from the alt atribute. So simple actually!
$(document).ready(function(){
$('#myGallery').spacegallery({loadingClass: 'loading',
perspective: 160,
after: spacelink,
before: function(){
$('.spacegallery #linkgall').remove();
}
});
$("#myGallery").mouseover(function(e){
$(this).addClass("over");
});
$("#myGallery").mouseout(function(e){
$(this).removeClass("over");
});
$('.spacegallery').live("hover", function(){
$('#linkgall').fadeIn(500);
});
spacelink();
});
function spacelink(){
var alt =$('.spacegallery').find('img:last').attr("alt");
$('.spacegallery').append('
<a href="/+ alt +">Click here</a>
');
check_vis();
}
function check_vis(){
if( $('#myGallery').hasClass("over") ){
$('#linkgall').fadeIn(500);
}
}
The rest of the functions are for the fade in and fade out of the link, just for the effect!
Finally we need to style a bit the link. Personally i like it with css3 borders so here we are.
.spacegallery a {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: block;
/*ie8 bug*/
background: url(../images/blank.gif);
}
#linkgall{
position: absolute;
bottom:5%;
right:100px;
}
#linkgall a{
background-color: #999;
width:70px;
height:20px;
line-height:18px;
color: #fff;
-o-border-radius: 5px 5px;
-moz-border-radius: 5px 5px;
border-radius: 5px 5px;
-webkit-border-radius: 5px 5px;
text-align:center;
}
