Hi all
I have a javascript/html image gallery and i need to add jquery to make the transitions between images nicer. I am thinking a cross fade or something would be great but we aren’t allowed to use plugins it all has to be coded by us. I am stuck on even where to start… any help would be fantastic. i have included my html and javascript. I think the best way would somehow to have the trigger on the play button but once again im so stuck i don’t even know where to start.
function next()//everytime the big image is clicked it changes
{
i++;//adds another big image to the next one everytime it is clicked on and loops around
if(i>=imageSorce.length)
{
i = 0;
}
document.getElementById("slide").src = "Assets/images/big/"+i+".jpg";
document.getElementById('captionarea').innerHTML=caption[i];//adds captions
clearTimeout(startSlideshow.timer);
document.getElementById("stop").disabled=true;
document.getElementById("stop").className += ' disabled';
document.getElementById("play").disabled=false;
document.getElementById("play").className = 'play';
}
function changeImage(evt,el)//changes the big image each time a thumbnail is clicked
{
evt.preventDefault(evt);//fail gracefully when javascript is turned off.
var elem = document.getElementById("slide");
elem.src = "Assets/images/big/"+el+".jpg";
document.getElementById('captionarea').innerHTML=caption[el];//adds captions when a thumbnail is pressed.
i = el;
clearTimeout(startSlideshow.timer);
document.getElementById("stop").disabled=true;
document.getElementById("stop").className += ' disabled';
document.getElementById("play").disabled=false;
document.getElementById("play").className = 'play';
}
var i = 0, imageSorce = [], preload = [];//add an array to cycle through the images
imageSorce[0]="Assets/images/big/0.jpg";
imageSorce[1]="Assets/images/big/1.jpg";
imageSorce[2]="Assets/images/big/2.jpg";
imageSorce[3]="Assets/images/big/3.jpg";
imageSorce[4]="Assets/images/big/4.jpg";
imageSorce[5]="Assets/images/big/5.jpg";
imageSorce[6]="Assets/images/big/6.jpg";
imageSorce[7]="Assets/images/big/7.jpg";
var caption = [];//an array of captions to add to each image that was defined above in another array
caption[0]="Matiatia Bay, Waiheke Islands main entry point"
caption[1]="Beautiful White sand Oneroa beach"
caption[2]="View overlooking Matiatia Bay"
caption[3]="Look out point over Palm Beach"
caption[4]="Enclosure bay one of Waihekes quietest beaches"
caption[5]="Sandy Bay, a great place for a picnic!"
caption[6]="Boat Sheds at Oneroa Beach"
caption[7]="Te Whau, Waihekes most prestigious vineyard with the best view."
for (var j=0; j<imageSorce.length;j++)
{
preload[j] = new Image;
preload[j].src = imageSorce[j];
}
function mode(param)//begining of play and stop feature.
{
smode=param;
}
function startSlideshow()//starts slideshow when the play button is pressed.
{
if(smode=="play")
{
i++;
if(i>=imageSorce.length)
{
i=0;
}
document.getElementById("play").disabled=true;
document.getElementById("play").className += ' disabled';//disables the play button when it has been clicked once
document.getElementById("stop").disabled=false;
document.getElementById("stop").className = 'stop';
document.getElementById("slide").src=imageSorce[i];
document.getElementById('captionarea').innerHTML=caption[i];//adds captions when the gallery is played.
startSlideshow.timer = setTimeout(startSlideshow, 3000);//sets the time inbetween each slide
}
else if(smode=="stop")//stops slideshow when the stop button is pressed.
{
clearTimeout(startSlideshow.timer);
document.getElementById("stop").disabled=true;
document.getElementById("stop").className += ' disabled';//disables the play button when the page is loaded.
document.getElementById("play").disabled=false;
document.getElementById("play").className = 'play';
}
}
<div id="gallery">
<img id="slide" src="Assets/images/big/0.jpg" onClick="next();">
<span id="captionarea">caption one</span>
<br />
</div>
<div id="button">
<input id="play" class="play" type="button" value="" onClick="mode('play');startSlideshow();" />
<input id="stop" class="stop disabled" type="button" value="" disabled onclick="mode('stop');startSlideshow();" />
</div>
<div id="thumb">
<ul class="thumbnail">
<li><a href="Assets/images/big/0.jpg" onClick="changeImage(event,'0');"><img class="thumb" src="Assets/images/thumbs/0.jpg" /></a></li>
<li><a href="Assets/images/big/1.jpg" onClick="changeImage(event,'1');"><img class="thumb" src="Assets/images/thumbs/1.jpg" /></a></li>
<li><a href="Assets/images/big/2.jpg" onClick="changeImage(event,'2');"><img class="thumb" src="Assets/images/thumbs/2.jpg" /></a></li>
<li><a href="Assets/images/big/3.jpg" onClick="changeImage(event,'3');"><img class="thumb" src="Assets/images/thumbs/3.jpg" /></a></li>
<li><a href="Assets/images/big/4.jpg" onClick="changeImage(event,'4');"><img class="thumb" src="Assets/images/thumbs/4.jpg" /></a></li>
<li><a href="Assets/images/big/5.jpg" onClick="changeImage(event,'5');"><img class="thumb" src="Assets/images/thumbs/5.jpg" /></a></li>
<li><a href="Assets/images/big/6.jpg" onClick="changeImage(event,'6');"><img class="thumb" src="Assets/images/thumbs/6.jpg" /></a></li>
<li><a href="Assets/images/big/7.jpg" onClick="changeImage(event,'7');"><img class="thumb" src="Assets/images/thumbs/7.jpg" /></a></li>
</ul>
</div><!-- thumb-->
</div><!--gallery-->