- HubPages»
- Technology»
- Computers & Software»
- Computer Science & Programming»
- Programming Languages
Javascript: Fade transition between images.
This is another simple javascript that will give a transistion effect when the user clicks "next" between images. It's a neat effect, which adds a little more to the standard image display.
The example has 6 static image links, and one default start image.
Javascript Example:
Place the following javascript between the <head></head> tags of your web page. Change the NumberOfImages variable to the number of images you are using. Change the [img] variable to reflect the location and image name. [img]0 will be your first image. If you have 10 images, you will end up wih [img]9 as the last variable with the image reference.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
var NumberOfImages = 6
var img = new Array(NumberOfImages)
img[0] = "images/image1.jpg"
img[1] = "images/image2.jpg"
img[2] = "images/image3.jpg"
img[3] = "images/image4.jpg"
img[4] = "images/image5.jpg"
img[5] = "images/image6.jpg"
var imgNumber = 0
function NextImage()
{
imgNumber++
if (imgNumber == NumberOfImages)
imgNumber = 0
document.images["MyImages"].src = img[imgNumber]
$('#myimag').fadeOut( function() {
$('#myimag').fadeIn();
});
}
function PreviousImage()
{
imgNumber--
if (imgNumber < 0)
imgNumber = NumberOfImages - 1
document.images["MyImages"].src = img[imgNumber]
$('#myimag').fadeOut( function() {
$('#myimag').fadeIn();
});
}
</script>HTML Example:
Below is the <html> example that will display the image(s) and link to navigate "next' or "previous". Note, the <img src> tag with the beginning or default image.
<IMG SRC="images/startimage.jpg" NAME="MyImages" width="300" height="300" id="myimag"> <br> <a href="javascript:PreviousImage()">Previous</a> <a href="javascript:NextImage()">Next</a>
- Javascript: Pop-up window from a HTML link
- Javascript: How to create a simple slide show with clickable links
- Javascript: Pop up Message Box On Submit
- Javascript: How to disable Right Click option
- Javascript: Controlling the number of characters entered into a HTML form field.
- Javascript: How to refresh parent window from a pop-up after closing pop-up
- Javascript: Rotate a different image when the page is reloaded
- Javascript: Drop Down Menu List
- Javascript: A simple calendar with today's date highlighted.
- Javascript: How to hide and show other form fields with a select box with Javascript and HTML
Summary
You could use Coldfusion and make this javascript a more dynamic display. Rather than a list of static images, you could dynamically list through a directory, or query a database. It's a neat and simple little javascript.
