Photo Slider Tutorial

Step 1 – Pick Your Photos

First we need to start off with some images. You’ll want these images to be thumbnails that also have a larger view available. In this tutorial I’m using a thumbnail size of 50×50 and a full view of 600×400. You can have any size for the “full view” but the thumbnails must all be the same size. We’ll start with 4 thumbnails.

It’s worth noting that you can easily use the photo slider to query a server script to load the images. If you want to see an example of this you can view my wife’s wedding portfolio. If you examine the slideshow.js you’ll see it fires off a call to a PHP script “fetch.php” using image ids.

Step 2 – Import Your Images

Now we need to tell our photo slider which images we want to use. Here we can either set them directly using the bucket hash or we can give it an array of image ids.

in the <head> tag

view plainprint?
  1. <link rel="stylesheet" type="text/css" media="screen" href="photoslider.css" />
  2. <script type="text/javascript" src="jquery.js"></script>
  3. <script type="text/javascript" src="photoslider.js"></script> 
in the <body> tag
view plainprint?
  1. <div class="photoslider" id="default"></div>
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. //change the 'baseURL' to reflect the host and or path to your images
  5. FOTO.Slider.baseURL = 'http://example.com/path/';
  6. //set images by filling our bucket directly
  7. FOTO.Slider.bucket = {
  8. 'default': {
  9. 0: {'thumb': 't_0.jpg', 'main': '0.jpg', 'caption': 'Opie'},
  10. 1: {'thumb': 't_1.jpg', 'main': '1.jpg'},
  11. 2: {'thumb': 't_2.jpg', 'main': '2.jpg', 'caption': 'Trash the Dress'},
  12. 3: {'thumb': 't_3.jpg', 'main': '3.jpg'}
  13. }
  14. };
  15. });
  16. </script> 
If your image urls can fit into a pattern you can use the importBucketFromIds which uses the thumbURL and mainURL string to determine how to generate the url. If you’re generating the ids it makes importing much easier. If you want captions on your images set the caption in the bucket.

Step 3 – Load the Photo Slider

view plainprint?
  1. FOTO.Slider.reload('default'); 

Optional – Slideshow

If you want to you can add slideshow controls, along with automatically playing on load.

view plainprint?
  1. //enable the slideshow and build the controls
  2. FOTO.Slider.enableSlideshow('default');
  3. //automatically play
  4. FOTO.Slider.play('default');

Optional – Preload Images

If you want the images to start pre-loading before a user clicks on them, run the preloadImages method.

view plainprint?
  1. FOTO.Slider.preloadImages('default'); 

Finished Look

Now everything is complete, so just load up your page.

 

 

Full JavaScript Code Used in Example

view plainprint?
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. var ids = new Array(0,1,2,3);
  4. FOTO.Slider.importBucketFromIds('default',ids);
  5. FOTO.Slider.reload('default');
  6. FOTO.Slider.preloadImages('default');
  7. FOTO.Slider.enableSlideshow('default');
  8. });
  9. </script> 
Download:
  • jquery
  • photoslider.js
  • photoslider.css
Have everything in one package, you can download the:opiefoto.com/articles/assets/slider/photoslider.tar.gz
Be Sociable, Share!

Leave a comment