Directory jQuery Slider

Posted on

Loads all images in a specified directory and creates a slide show

Current Version: 0.9

Github Page: https://github.com/justinwhall/directorySlider

About

I occasionally work on an application that is, for all intent and purposes, a CMS. This application and its subsequent ’sites’ all use the same exact markup. There is some flexibility with some custom fields, but for reasons not relavant to this post, I wanted a jQuery slide show that:

1) Adds all images from a specified directory.
2) Could be called like so $(‘class-or-id’).directorySlider({object:options});

And thus, the Directory Slider was born…

How to use?

Step 1: Link required files

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- directorySlider Javascript file -->
<script src="/js/directorySlider.js"></script>

Step 2: Create HTML markup

<div class="directorySlider"></div>

Step 3: Call Directory Slider

$(document).ready(function(){
  $('.directorySlider').directorySlider();
});

Configuration Options

animation Type of Animation.

default: 'fade'
options: 'fade', 'uncover'

filebase Type base of all files in you directoy. Ex: for files slide_01.jpg, slide_02.jpg and slide_03.jpg the filebase would be ‘slide_’ and for img_01.png, img_02.png and img_03.png the filebase would be ‘img_’.

default: 'slide_'
options: string

extension The file extension of the files you are using.

default: 'jpg'
options: any image format (string)

directory The directory of your slides.

default: null
options: '/path/to/slides/folder'

numslides Number of slides in directory.

default: null
options: integer

Optional Options

speed Slide transition speed in milliseconds.

default: 1000
options: integer

timeout Time between slides.

default: 4000
options: integer

height Height of your slideshow in pixels.

default: null
options: integer

width Width of your slideshow in pixels.

default: null
options: integer
 

IMPORTANT PLEASE READ:

If you are seeking support or have any question at all in regards to this script, please provide a LIVE URL otherwise there is just no way to provide helpful feedback. Support questions here via email or on github without a live URL will be ignored. Sorry.


Tags: , , ,

89 comments on Directory jQuery Slider
  • ceptronceptron boss

    Hi !

    Can you please send me an example using extension jpg and directory images and filebase bg_ ? thanks

  • 123

    Would be cool if this worked. Follow your own instructions and you’ll see that something is off.

  • unispaw

    what if you wanted multiple slideshows on one page (each with different path and filenames and different divs).. I cannot seem to do it.. after some iterations it will display everything in the same div….

  • Eric Ventson

    Confirmed. Can’t have more than one slider instance. Awesome script though, saved my day.

  • Juan

    thanks, well coded, although I’ve been wondering how to make it work without knowing the variable [numSlides]; that is, without knowing how many pictures are there in the directory.

  • Emad K.

    is it HTML or PHP file u r talking about?? i mean can i use the jQuery in “.html” file ??

  • Emad K.

    where to copy/paste call code?? which file of place??

  • SWHarrell

    Very nice and easy to use slider. I have one problem though. The slides I am using must be run in order (1-28) and they are numbered in order. However, they run in reverse through the script (28-1). I know the simple fix would be to re-number them in reverse order but, I’m looking to give the ability to someone else to add new slides to the directory in the future and reminding them to reverse order them each time will be a pain.

  • Kristīne

    Hello!
    Thank you for your effort. But i can’t get it to work! Do I have to change directorySlider.js file or only the script

    $(document).ready(function(){
    $(‘.directorySlider’).directorySlider();
    animation: ‘fade’,
    filebase: ‘slide_’,
    directory: ‘img/’,
    extension: ‘jpg’,
    numslides: 6,
    height: 200
    });
    ?
    Please pleae, explain!

  • Jay

    This CAN not work. Sorry, but this is not crazy, You upped a plugin which is not able to work.
    If you analyze the on http://www.youniquecouns....com then you all will get the result, that the slider on the presented page is built in with some "tricks"?!. You linked the slider on the page with

    "#customPageContent { visibility:visible;} 
    <div id="slider-header" class="noMobile">
    </div><div id="slider-main" class="noMobile" style="height: 200px; overflow: hidden;">
    <div class="slider-main-slide-wrap"></div>.
    

    Wraps with transparent fields..or what do you suggest should be build here, to get the slider to work, man?
    I've tried to add

     	
    opacity: .5; 
    filter:Alpha(Opacity=50);
    

    on .slider-main-slide-wrap, slider-header....and on and on..

    Also is the directory-slider on your demo-page in a FILE, not as SCRIPT in the text. ("script.js") as you described.
    Here you are "offering" the slider with two files to build it in (directorslider.js + directory..min..js) and describe to build the slider in with JQ 1.8.1.
    On youniquecounsel.. it is implanted with:

    - jquerymin.js (v.1.9.0)
    - jquery-ui.min.js (v.1.10.0)
    - script.js (the slider itself)
    - gdw.sliders.js ( changed code of "directorySlider.js" of your free-package download ?!?!)
    This is really the best thing:
    The code in your offered free-download (in file directorySlider.js) begins with:

    "(function($){
       var directorySlider = function(element, options)
       {
           var elem = $(element),
               obj = this,
               elemId = elem[0].id; "
    

    on the presented demo-page the code in the js-file for the slider (gdw.sliders.js) begins with:

    (function($){
       var directorySlider = function(element, options)
       {
        if (typeof element !== undefined) {
             var elem = $(element),
                 obj = this,
                 elemId = elem[0].id;
    

    Eheeem..I've wasted some hours of my life for this !
    I just wanted to get it working, nothing else. I'M TIRED !!
    This is insane!

    Sorry, but you own me the original files of the slider for wasting !!!!! hours !!!! of my time mate !
    You've got my mailaddy now...

    Let me know.

    Happy coding!

  • Dez In NYC

    Hey Justin,

    Thanks for the great script! I’ve started using this quite a bit in a few projects that have not allowed me to edit the HTML mark up to facilitate other options.

    @Jay – Let me get this straight. You are not competent enough to implement this plugin (that was provided to you free of charge) and b/c you don’t have skill to depbug the problems you almost certainly induced you would like the developer to PAY YOU???? That’s rich.

    I literally just used this script an hour ago.

  • Posvaldo

    Dez, Please you can send me a working sample
    Email:posvaldo@gmail.com

  • scoobysteved

    I cant get this to work at all. Can youy look at this code and tell me where I am going wrong please

    $(‘#slider-main’).directorySlider({
    animation: ‘fade’,
    directory: ‘/wp-content/gallery/301/’
    });

  • Som

    can someone help me to navigate images?

  • francis

    hello, i cant get it to work, can i ask for your help please?
    here is the code i have

    <html>
    <head>
    <!-- jQuery library (served from Google) -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><!-- directorySlider Javascript file --><script 
    
    type="text/javascript" src="/js/directorySlider.js"></script>
    
     <script type="text/javascript" language="javascript">
       
    
    
    $(document).ready(function(){
      $('.directorySlider').directorySlider();
      $('#slider-main').directorySlider({
        animation: 'fade',
        filebase: 'slide_',
        directory: '/images/',
        extension: 'jpg',
        numslides: 4,
        height: 200
    });
    });
    
    
    </script>
    </head>
    <body>
    <div class="directorySlider"></div>
    </body>
    </html>
    

  • Alex

    This is my code:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/justinwhall/directorySlider/master/directorySlider.min.js"></script>
    <script> 
    $(document).ready(function(){
      $('#directorySlider').directorySlider({
        animation: 'fade',
        filebase: 'gallery_',
        directory: 'images/gallery',
        extension: 'jpg',
        numslides: 6,
        height: 400
    });
    });
    </script>
    </head>
    <body>
    <div id="directorySlider"></div>
    </body>
    </html>
    

    It doesn’t work :(

  • Alex

    For some reason, links inside the CODE tag aren’t getting formatted properly.

    Anyway, it’s up at http://talentime.in/ds/

  • Panoone

    If anyone is interested I have converted this into a Google Gadget and added an additional user pref to specify the start number.

  • Jaspal Singh

    $(document).ready(function () {
    debugger;
    // $(‘.directorySlider’).directorySlider();
    $(‘#directorySlider’).directorySlider({
    animation: ‘fade’,
    filebase: ‘slide_’,
    directory: ‘/Images/’,
    extension: ‘jpg’,
    numslides: 6,
    height: 200
    });

    });

  • Jaspal Singh

    it’s not working

  • Jaspal Singh

    Hello justin,
    actually i want pick the images from folder dynamically, like if i add a new image in folder it will display on slider how i can i do this in Jquery.

    Please Help Me and mail me my e-mail ID jaspalsinghparmar@gmail.com and suggest me how can i do this.

    Thanks.
    Jaspal Singh

  • Jeremy Cronan

    I am trying to use this with a public folder in google drive, but nothing is showing. Does the directory have to be on the same site as the website?

    $(document).ready(function () {
    $(‘.directorySlider’).directorySlider({
    directory: ‘http://googledrive.com/host/0B_BeqsyAL65IR2lycTRnaVpJeTA’
    });
    });

  • Jeremy Cronan

    Please ignore previous comment. I found the issues.

  • nguyenhahust@gmail.com

    This code can be used more image with same name. I want add many image with other name, and i want to config numslide to auto increase base amount image. Can u help me.
    Please mail to: nguyenhahust@gmail.com.
    Thanks!

  • nguyenhahust@gmail.com

    Can you help me to write server-side component to auto increase.

  • Teddy

    help me please it doesn’t work
    Is it work on a local network?

    <!DOCTYPE html>
    <html>
    <head>
    
    <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/js/directorySlider.js"></script>
    
    <script type="text/javascript" language="javascript">
    $(document).ready(function(){
      $('.directorySlider').directorySlider();
    });
    </script>
    
    </head>
    <body>
    
    <div class="directorySlider"></div>
    
    </body>
    </html>
    

    my directorySlider.js :

    ...
     // Merge config settings
           var config = $.extend({
               animation: 'slide',
               filebase: 'slide_',
               extension: 'png',
               speed: 1000,
               timeout: 4000,
               directory: '../images',
               numslides: null,
               height: null,
               width: null
           }, options || {});
    ...
    

  • mehabubsheikh

    I am using this

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- directorySlider Javascript file -->
    <script src="mcassociation/directorySlider_master/directorySlider_master/directorySlider.js"></script>
    <script>
    $(document).ready(function(){
      $('#directorySlider').directorySlider({
        animation: 'fade',
        filebase: 'slide',
        directory: 'mcassociation/img/image2',
        extension: 'jpg',
        numslides: 2,
        height: 400
    });
    });
    </script>
    </head>
    <body>
    <div id="directorySlider"></div>
    </body>
    </html>
    

  • mehabubsheikh

    I am using this

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- directorySlider Javascript file -->
    <script src="mcassociation/directorySlider_master/directorySlider_master/directorySlider.js"></script>
    <script>
    $(document).ready(function(){
      $('#directorySlider').directorySlider({
        animation: 'fade',
        filebase: 'slide',
        directory: 'mcassociation/img/image2',
        extension: 'jpg',
        numslides: 2,
        height: 400
    });
    });
    </script>
    </head>
    <body>
    <div id="directorySlider"></div>
    </body>
    </html>
    

    But this does not work.

    Thanks
    Mehabub

  • Matt J.

    Justin, any chance you can post the HTML code for a page that just has the slider on it? The link your provided to see it in action looks great, but there are so many other elements mixed in that it’s hard to understand how the code works. Thanks!

  • Matt J.

    Never mind my previous comment, totally got it to work now. Great job on the script!

  • Matt J.

    Justin,

    Would it be easily possible to just read the images from a directory into an array regardless of their file name, and then add an option to randomly shuffle pictures through that array? Or is that going to take some painful coding?

  • frank

    Hi Justin
    This is awesome, thank you. I was wondering if you knew of a way to make each of the slides a link to a specific page. I am a programmer but have never played with jquery. Is it possible to have the method pull folders which have an image and a text file instead of only pulling image files from the specified path?

  • Mike A. Farmer

    Thanks, man, this seems to be exactly, what I’ve been looking for. I pan to export info pages from Impress as numbered images, those are to be displayed one after one in a web frame. Using the image export extension, this part is quite easy.
    Just wondering if it was possible to leave the numslides: amount open / otherwise the script should be able to auto detect the amount of images.

    Is this possible?
    Cheers
    MF

  • Mike A. Farmer

    Works fine after debugging some traps:

    1st Issue: Image path must be terminated by slash, otherwise concatination will result in directoryFilebase1.jpg (the example has no slash in the end)

    2st Issue: I thought I downloaded the js files, but actually the git link gave me the html wrapper, please check there is no HTML code in your js files.

    3rd Issue: the ajax path I copied from here, had no protocol stated (leading http: )

    4th issue: I had to copy and paste the div tags from your example to match the script.

    ASAP I will post another live sample.

  • Richard

    any one with a working sample can send a downloadable zip to view it have tried it out n oops!!!! not working.

  • whitishmink

    Hi Justin!
    Everyone keeps asking for a live sample page, so I made one with some commented annotation to help others use this great code for themselves!

    http://www.bensloboda.com/DirectorySliderTest.html

  • Cole

    Anyone want to take a look at this? I keep getting broken link images for my pictures if I get anything at all. I’ve tried a number of different solutions on here. I’ve tried the example above and I’ve tried re-titling my slides’ filebase to “tn_” and then tried “slide_”
    Here’s the site: http://colejohnsontrialsite.com/trialjquery2.html

    Thanks in advance for any help!

    <!DOCTYPE HTML>
    <html>
    <head>
    <!-- jQuery library (served from Google) -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><!-- directorySlider Javascript file --><script
    
    type="text/javascript" src="http://colejohnsontrialsite.com/directorySlider.js"></script>
    
    <script type="text/javascript">
       
    
    
    $(document).ready(function(){
     $('#slider-main').directorySlider({
       animation: 'fade',
       filebase: 'tn_',
       directory: src='http://colejohnsontrialsite.com/pictures/',
       extension: 'jpg',
       numslides: 2,
       height: 200
    });
    });
    
    
    </script>
    </head>
    <body>
    <div class="directorySlider" id="slider-main"></div>
    </body>
    </html>
    

  • harsh074

    Hi Justin!
    I am trying to link my picasa album with directory slider. but as we give a folder name in directory, i won’t be able to connect it with my picasa directory.
    can you please help me with this problem

  • Cole

    I got it to work about a day or so after posting, sorry for the confusion. But yes, then my main concern was whether it could support a few different extensions. Guess not. Still an awesome slider though! thank you

  • Ravi

    Hey Hii,I just want to ask you that would it be possible to fetch all the images from the folder itself instead of providing with the number of slides to JS. Please Help Me On This.

  • Emsellem Eric

    Hi

    DirectorySlider seems like the way for me:
    I would like to use it together with the nice fancybox jquery javascript to create galleries for my web.

    Best for me would be that the images in a certain folder are scanned and loaded automatically thus adding a code like in my html page:



    ….

    This would save me the duty to have to write this up explicitly in each of my web page. Right?

    Do you think this is feasible by adapting DirectorySlider to spit out the right code? Asking this before I myself attempt to do it (since my javascript skills are close to 0 and I am learning through such nice examples).

    thanks so much for your help here or any hint you may provide!

  • Leo B

    @Justin: Thank you for your great work. The slider works fine with your codes.

    @all: I think you should follow Justin’s guide carefully. Especially pay attention to the variables (filebase, directory, extension) you defined.

  • eyaris

    there is millions of images inside my “slide” directory. and i don’t want the script index all of the images. is there any way to get a random image for each slide from directory? it would be great!

  • arun

    $(document).ready(function(){
    $(‘.directorySlider’).directorySlider();
    animation: ‘fade’,
    filebase: ‘slide_’,
    directory: ‘images/highlite/’,
    extension: ‘jpg’,
    numslides: 3,
    height: 200
    });

  • arun

    leo B pls attach your codes

  • Rajkumar

    I have user these numslides: 2, i got the result but, numslides:7 is not working still i have seven slides in my folder.. pls help me, and another thing i want to know to vjew all images like(png,jpeg,jpg,gif..).

    I don’t want to use–> filebase: ‘slide_’, because i want to view all images in particular directory not a specified file base

  • Indie UrbanMusic

    Wanted to make sure and say thanks

  • Thomas

    Hi Justin, what a great idea! I’ve visited your site, because I was searching for a jQuery gallery, auto created from all images in a specified folder. No slider, just a static gallery with a lightbox zoom. So i find only serverside solutions or fix done in html source – no mix betwen your idea and a gallery. I just want do send you a wish ;) … “please make a version, who creats a gallery”
    I am not a javascript professional – just use jQuery a bit, thats why I can’t do it myself.
    Regards from Bern, Switzerland

  • Scooterdc29

    Can I get a zip of a the html and jQuery

  • ladele

    Yo, thank you for sharing this, saved me quite some time.
    I took the liberty however of making some changes, and it is now fully responsive, full window compatible and supports resize events.
    Also i integrated keyboard control (just the space bar for pause / resume) and styled / installed a css3 image-free loading… thingy; that will play it (had an issue there, working on it) only when all slides are loaded.

    Being grateful, wanted to share my edited version, im using it here: http://ladelegacion.mx/raudo/ if anyones interested, feel free to take it.
    Its in spanish tho, so… once youre at the welcome screen, click anywhere and it will bring up 3 buttons; “div. grafica” and “div. industrial” are the ones using it. Beware tho ive only tried it on chrome (both windows and mac).

    Greets

  • Anon

    The fix to the order of the slides displayed is in the following snippet… Add a reverse to the array so it loops in the opposite order to assign the css attributes. (in directorySlider.js file)

            // append slide and position absolutely
           $.each(slides.reverse(), function(index, val) {
             $(val).css({
               position: 'absolute',
               top: 0,
               left: 0
             }).appendTo(slideWrap);
           });
    

  • Vijay Ramesh

    This is an awesome jquery(java script) plugin, Thanks a lot for developing it.

    I would like to know if we can change the “directory” attribute on click event.

  • Arun kumar

    i want to find the number of images inside my folder and store the the value to a variable ‘n’ and pass it to the ” numslides: n ” and also I want to add pagination..let me know if any doubt or query

  • vb078

    The extension limit make me sad :’( thanks for you good work

  • vb078

    I just can use one filetype (jpg/ png/ gif) I rename all my files in .gif for the moment (:
    So right now I try to stop the directoryslider.js in one div.container
    to lanch an other folder-scanning in the same container… (reset by pressing a key)
    But I dont kno how to do that :’(

    I will give you a live url soon. If you have some ideas…

    thanks for watching

  • Ivan

    Great code, it work’s fine!. just how do i append default code to some div or id?. I’ve got slider works in top left corner of website

  • Ivan

    i got it working, different div’s, different folder appended to div. Dunno how to post code here to share?

  • Steven

    Great script but you have to add a feature to your configuration for Here: //append slide and position absolutely. : I had to change it in the script so the slide show shows up where I needed it instead of 0px X 0px location. :)

  • Rick Howell

    I love this addon you created. It works perfectly and I was able to integrate it into the project I am working on. One thing I was able to make a change with was to use an external text file to allow for changes to the slide count to me made without having to open and modify a complex ASP.NET file. A quick sample of the code I used is here

    $(document).ready(function(){
        $.get("slideCount.txt", function(count){
            $(".slides").directorySlider({
                animation: 'slide',
                filebase:  'img_',
                extension: 'jpg',
                directory: '/mfg_display/checklist/test/',
                numslides: count,
                height: 362,
                width:  483,
                timeout: 5000
            });
        });
    });
    

  • akamble2610Aniket Kamble

    hey just want to know is it free of cost? it means is there any licence or any other terms and condition related issue with it to use it officially.

  • TJ

    Excellent plugin, looks like it will solve my issue (displaying 5,000+ images for 200+ products, organized into folders on the server).

    However… does it load all images at once, or load each one as it’s called up by the user? I would like to implement some galleries with a LOT of images (100+), and I’m concerned about loading time. If there is a way to load images in the background, or use a CDN, I would love to see an example. Thank you!