JQuery Cross Slide Effect

This effect uses a JQuery plug-in along with the basic JQuery code, so it's an additional javascript file that you have to include in the head tag on your page. You can view my code to see how it is implemented. You must create a block level element such as a div that has an image that's the same size as your gallery images in its background. This will be viewable until all the gallery images have loaded.


JQuery Slide and Fade

This effect uses the same JQuery plug-in along with the basic JQuery code. It just requires a bit of a different set-up for the block-level element and the starting image needs to be smaller than the gallery images so that the effect looks good.


Ken Burns Effect

If you had success with coding the previous slide show effect then you're ready for the most complicated option. CrossSlide can be brought up to the full visual power of a so-called Ken Burns effect: panning, zooming and fading each image to specific points, to guide the eye of the viewer and convey meaning: