SwSlideshow
download
INTRODUCTION
Includes a slideshow loosely adapted from http://davidwalsh.name/slideshow-preload-images, and a thumbnail tape as I call it, just like SwThumbScroll. The packaged version is the one from the following example.
Features:
- Image loading in the background
- Navigation with mouse or keyboard
- Deep linking (each picture has its own URL)
- PHP Script to generate thumbnails and reduced images (optional)
A more complex version include SwFolderMenu can be viewed here: http://pics.standupweb.net
My roommate is shooting a lot of pictures, I had the idea to make a flipbook based on some of his pictures. I did this by adapting these scripts: look at http://flipbook.standupweb.net
FEEDBACK: Comment on post or sign up and go to the forum section: click here
click here to view an example
STEP BY STEP INSTRUCTIONS
1- Create a section in your HTML with the following divs:
<div id='wrap'><div id='swSlideShow'></div></div>
<div id='thumbScrollWrap'><div id='swThumbScroll'></div></div>
2- CSS: Copy, paste and adapt:
* {margin:0; padding:0}
body {; background-color:#000; color:#fff}
a {outline:none}
#wrap {position:relative; margin:0 auto; width: 830px; height: 100%}
#swSlideShow { position: absolute; top:10px; }
#progress { margin:10px; text-align:center; }
#slideshow-holder { width: 830px}
img.download { border:3px solid #000}
img.download:hover { border:3px solid #5ba4ad}
#swThumbScroll div.left-arrow { font-size: 0px; line-height: 0%; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 40px solid #bbb; height: 0px; width: 0px; padding:0; margin:0px; z-index:100; margin:20px; filter: alpha(opacity = 70); opacity:0.7; }
#swThumbScroll div.right-arrow { font-size: 0px; line-height: 0%; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 40px solid #bbb; height: 0px; width: 0px; padding:0; margin:0px; z-index:100; margin:20px; filter: alpha(opacity = 70); opacity:0.7; }
#swThumbScroll div.left-arrow:hover { filter: alpha(opacity = 85); opacity:0.85; }
#swThumbScroll div.right-arrow:hover { filter: alpha(opacity = 85); opacity:0.85; }
#thumbScrollWrap {width: 99%; height: 84px; background-color: #000; position:absolute; bottom:20px;}
#swThumbScroll {position:relative; margin:0 auto; width:830px;}
#swThumbScroll img:hover, #swThumbScroll img.selected {border:2px solid #5ba4ad}
#swThumbScroll img {border:2px solid #000}
3- copy and include the .js files (preferably right before </body>)
<script src="lib/mootools/mootools-1.2.4-core-jm.js" type="text/javascript"></script>
<script src="lib/mootools/mootools-1.2.4.4-more-assets.js" type="text/javascript"> </script>
<script src="lib/mootools/mootools-1.2.4.4-more-fx-scroll.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swThumbScroll.js"></script>
<script type="text/javascript" src="js/swSlideShow.js"></script>
<script type="text/javascript" src="js/swInitSlideShow.js"></script>
4- include the script to init the slideshow
- include this after the lines included in step 4
<script language="JavaScript">
window.addEvent('domready',function() {var init = new SwInitSlideShow();});
</script>
5- Upload your pictures
Your pictures must be inside the folder 'gal' located in the root folder
You can also change the location of this folder (see step 6)
Here is what the script expects:
- inside 'gal': thumbnails - height:80px, can be modified in the CSS
- inside 'gal/original': original size for the pictures - can be several MB, so won't be loaded in the slideshow, but available when the user clicks on the pictures.
- inside 'gal/image': images as shown in the slideshow - height:700px to fit the majority of the screens in full size, this speeds up page load
6- Tell the javascript which pictures are part of the slideshow
replace the line 2 of the script in step 4 by:
window.addEvent('domready',function() {var init = new SwInitSlideShow({<OPTION>:<VALUE>, <OPTION>:<VALUE>...});});
where <OPTION> can be:
content: list of the pictures to display, defaults to:
{"fileList":["100_0138.JPG", "100_0141.JPG", "100_0146.JPG", "100_0184.JPG", "101_1940.JPG", "101_1942.JPG", "Premier jour des vacances 13.07.2007 023.jpg", "Premier jour des vacances 13.07.2007 045.jpg", "Premier jour des vacances 13.07.2007 056.jpg", "velo heidelberg.jpg", "verbrecher.jpg"]}
path: indicate the folder where to find the pictures, defaults to: 'gal'
-> Note: You can use a script to retrieve the content dynamically instead, look at SwFolderMenu
7- (optional): Picture convertion
The picture hierachy described in step 5 can be achieved be a running script:
- Simply upload your picture in their original format (jpg, png, gif)
- run the following script: lib/php/checkNewPic.php
- check your gal folder, it should have created 3 folders: original, tmp_batchResize, image
- if you want to add pictures, add them to tmp_batchResize and run the script again
-> note that this script can use memory and CPU pretty intensively, most likely, if you use a shared server, they won't allow you to use it. You can use it locally on a LAMP server and then upload the package (that's what I am doing at least)
