SwFolderMenu
download
INTRODUCTION
This piece of Javascript 'swFolderMenu.js' works together with some PHP to create a folder tree based on a given directory on the server and it creates a menu out of it. The select event allows to take action whenever a folder is selected. I used swThumbScroll.js to show the thumbnail of the pictures in this directory
FEEDBACK: Comment on post or sign up and go to the forum section: click here
EXAMPLE
STEP BY STEP
1- Create a section in your HTML with the following div:
<div id='swFolderMenu'></div>
2- CSS: Copy, paste and adapt:
#swThumbScroll {width: 630px; height: 80px; background-color: #000; margin: 0 auto; }
#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; }
#swThumbScroll img:hover, #swThumbScroll img.selected {border:2px solid #5ba4ad}
#swThumbScroll img {border:2px solid #000}
3- JSON call to retrieve the directory content
This requires you to put getDirectoryContent.php in the same directory than your html/php file
4- 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 type="text/javascript" src="js/swFolderMenu.js"></script>
5- include the script to init the slideshow
- include this after the lines included in step 4
<script language="JavaScript">
window.addEvent('domready',function() {
var fm = new SwFolderMenu('swFolderMenu', 'images/misc');
});
</script>
- first argument is the id of the div where you want the menu to be included
- second argument is the path relative to your php/html file where you want the folder tree to be created from
6- (optional): Deep linking
replace the 3 line of the script in step 5 by:
var fm = new SwFolderMenu('swFolderMenu', 'images/misc', {location:window.location.hash}});
-> if the URL contains a #, the string after the # will be taken as root folder for the menu
-> Note that in the example we give we are not passing window.hash.location directly because the # contains more than just the root folder, it also contains the picture index, so we need to split the values first
7- (optional) Use the 'onSelect' callback by adapting the SwAnimatedMenu instantiation:
- replace the 3rd line of the script in step 5 by:
var fm = new SwFolderMenu('swFolderMenu', 'images/misc', {onSelect : function(swFolderMenu){<YOUR_CODE>}});
- replace <YOUR_CODE> by what you want to do when the user clicks on an item of your list item
- you can use:
- swFolderMenu.dirContent: object containing the content of the folder as described in getDirectoryContent.php
- swFolderMenu.currentPath: path to the currently selected directory
