This is a JS/Jquery script coupled with PHP to generate a simple image gallery with a slideshow view.

How it works:

PHP: I fill a folder with images on my server, and utilize scandir to generate an array of images. You could easily replace this with a DB query, so long as you end with an array of images.

PHP/JS: I then use php to generate JS in order to pass the php generated array to the Javascript, and pre-load the images.

Js/Jquery: I then created a few functions in JS to generate the slideshow effect.

1. StartRotate(myNumber): This functions kicks off the rotation starting with the image counter passed to it by myNumber. It also sets the timers for swapping images, and when to stop the entire animation. This is called on page load, and again on the mouseout event attached to the thumbnails.
2. getImage: This controls the animation of the image swap.
3. SwapImage: This just swaps the main image to whichever thumbnail you happen to be hovering over at the moment.
4. PHP: php is used again to loop through the array and create the thumbnails.
   • Update: I now utilize Image Magick to resize the images as thumbnails and store them in a thmb folder.