Reply
Thu 27 Feb, 2014 07:21 am
I have a slideshow in my website which is working fine, but I am wanting to add fade in/out animation to it. Here is what code I have already, can someone please tell me what code I need to add or take out to make this happen? Thanks
/*Slide Show Code*/
var currImg = 0;
var captionText = new Array(
"The Callanish Standing Stones, dating back as far as 3000BC",
"Lews Castle was built in 1847 for Sir James Matheson who owned the Island",
"The Gearrannan Black Houses",
"Tolsta/Garry Beach, which is located on the North East of Lewis",
"Sunset over Lewis",
"The MV Isle of Lewis, This Calmac ferry that runs from Stornoway to Ullapool on the Scottish mainland daily " ,
"Valtos Beach " ,
"A new born lamb in Spring." ,
"The Callanish Stones on a stary night.",
"The Carloway Broch",
"Uig Lodge & Beach.",
"Stornoway at Night.",
"Lewis Sunset.",
"Lewis Surf.",
"Highland Cow.",
"Tranquil Sea.",
"Beach with Northern Lights"
)
function slideShow() {
document.getElementById("imgCaption").innerHTML = captionText[0];
document.getElementById("prevLink").onclick = previousImg;
document.getElementById("nextLink").onclick = nextImg;
}
function previousImg() {
newImg(-1);
}
function nextImg() {
newImg(1);
}
function newImg(direction) {
var imgNum = captionText.length;
currImg = currImg + direction;
if (currImg < 0) {
currImg = imgNum-1;
}
if (currImg == imgNum) {
currImg = 0;
}
document.getElementById("slideshow").src = "images/image" + currImg + ".jpg";
document.getElementById("imgCaption").innerHTML = captionText[currImg];
}