Modified Image Cross Fader - 2.5.7
This is a modified version of the slayeroffice.com's Image Crossfade script. It has been modified to allow even the novice user to create multiple galleries on a single page, simple slide show (no linked images), linking of individual images, linking of the gallery group, it opens links in the same window and allows for fadeInterval adjustments and a pause between transitions.
Script Descriptions:
This script uses the same main XFade functions just a different coding and layout format. The original script used multiple images both in the array and in the page gallery container, we don't!
Page elements have been reduced drastically to save page load time etc. Each gallery uses a single gallery container and two images. Image one - fades in and out and image links are passed to a variable as the image fades in. Image two - is basically the background image which changes when the top image is at full opacity. As the main image's opacity begins to fade, the background image's link is passed to the variable for the onclick event. So as it stands, the image fading in will always maintain the correct link!
Place the image arrays in the head, body or create a collection in an external js file.
Only two global variables to change: pause and fadeInterval the script handles the rest!!
Only two style elements to deal with: XFade_Gallery and XFade_Gallery_Img!!
This script uses the same main XFade functions just a different coding and layout format. The original script used multiple images both in the array and in the page gallery container, we don't!
Page elements have been reduced drastically to save page load time etc. Each gallery uses a single gallery container and two images. Image one - fades in and out and image links are passed to a variable as the image fades in. Image two - is basically the background image which changes when the top image is at full opacity. As the main image's opacity begins to fade, the background image's link is passed to the variable for the onclick event. So as it stands, the image fading in will always maintain the correct link!
Place the image arrays in the head, body or create a collection in an external js file.
Only two global variables to change: pause and fadeInterval the script handles the rest!!
Only two style elements to deal with: XFade_Gallery and XFade_Gallery_Img!!
Special Note On Image Links:
If viewing this page in an HTML editor you may run into an "Invalid Argument" error when clicking on image links. We have found that this is usually because most editors use a temp.html file to run. If so close editor and open page from the directory file.
If viewing this page in an HTML editor you may run into an "Invalid Argument" error when clicking on image links. We have found that this is usually because most editors use a temp.html file to run. If so close editor and open page from the directory file.
Simple Slide Show
Function call:
var gallery=new XFadeGallery('MyGallery')
Function call:
var gallery=new XFadeGallery('MyGallery')
Linking Individual Images
Function call:
var gallery=new XFadeGallery('MyGallery2',1)
Function call:
var gallery=new XFadeGallery('MyGallery2',1)
|
Individual image links are also optional. This is an example of our linked images: MyGallery2[1] = 'images/image-01.jpg|'; MyGallery2[2] = 'images/image-03.jpg'; MyGallery2[3] = 'images/image-05.jpg|image05.htm'; Notice the first two images have no link reference. If these are clicked on, the event returns void. Only the third image, if clicked on will complete the event and move to the next page. This default character is in case you forget to add the link or if you need to temporarily disable an image link to work on the page. Again the image fading in will always maintain the correct link! |
The Gallery Group Link
Function call:
var gallery=new XFadeGallery('MyGallery3',2,'http://www.dhcreationstation.com')
Function call:
var gallery=new XFadeGallery('MyGallery3',2,'http://www.dhcreationstation.com')
|
With link option "2" you can use the gallery as an introduction to a more defined gallery page by showing a few tidbits...nudge-nudge. The third argument in the function call is the page the viewer should be sent too. Sorry but we modified the whoops! out of it and will keep updating it as long as requests are made. Besides it's programmed to play nicely with our other Master Series© scripts. |
For More Updates:
If you're looking for updates, have more suggestions or maybe questions about this script,
visit it us on the web at
www.dhcreationstation.com
If you're looking for updates, have more suggestions or maybe questions about this script,
visit it us on the web at
www.dhcreationstation.com
Original Script:
Image Crossfade Redux - version 1.0
steve@slayeroffice.com
http://slayeroffice.com
Image Crossfade Redux - version 1.0
steve@slayeroffice.com
http://slayeroffice.com
Copyright © 2005 - DH Creation Station ™