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: , , ,

Justin W Hall

Justin W Hall

Mostly a front-end web application developer by day. Sometimes asleep by night.

View Full Profile →

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Your turn. Join the conversation.
Questions? Post 'em bellow or find me on Twitter.
To post code: <pre> <code> Your code here </code></pre>
  • http://gravatar.com/ceptron ceptronceptron boss

    Hi !

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

  • http://www.justinwhall.com Justin W. Hall

    Sure, here is an example I am using right now:

    		$('#slider-main').directorySlider({
    			animation: 'fade',
    			filebase: 'slide_',
    			directory: '/thedentalsitecontent/themes/184/images/homeslides/',
    			extension: 'jpg',
    			numslides: 6,
    			height: 200
    		});
    

    Remember, everything is case sensitive.

  • 123

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

  • http://www.justinwhall.com Justin W. Hall

    I use it all the time. What problems are you having?

  • http://www.justinwhall.com Justin W. Hall
  • http://gravatar.com/unispaw 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….

  • http://www.justinwhall.com Justin W. Hall

    Hey unispaw,

    You should be able to just create an additional slider object so slider 1 might look like:

    $('#slider-one').directorySlider({
        //config options
    });
    

    And slider 2 would be:

    $('#slider-two').directorySlider({
        //config options
    });
    

    With that being siad, I haven’t tested it. Feel free to open an issue ont he github page if that doesn’t work as I’ll be more likely to remember addressing it eventually. When time permits, I’d like to make this script a more robust. I’ve received a few requestes for a feature that would load all images in a folder without specifying the number of slides.

  • http://www.justinwhall.com Justin W. Hall

    Nope. Nevermind, you are right . Looks like that does indeed cause weird results. Going to make this happen as soon as I have time though.

  • http://www.hostgator.com Eric Ventson

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

  • http://www.justinwhall.com Justin W. Hall

    Fixed now. Variable scope issue. Thought I was going crazy when I saw the slides jumping from one slide show to another. Can’t really think of a good way (read efficient) way for the script to automatically use all images in a folder no matter the count with out some sort of server side help.

    Github repo updated.

  • 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.

  • http://www.justinwhall.com Justin W. Hall

    You are not alone. I mean you could make an ajax call for each incrementing number until it fails, but that’s rather resource heavy. It’s probably best to do what you are talking about server-side.

  • 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??

  • http://www.justinwhall.com Justin W. Hall

    Hey Emad,

    You can use this with whatever server-side language of your choice. Or straight up HTML for that matter. You’ll want something like the following in the document your are viewing.

    $('#slider-main').directorySlider({
        animation: 'fade',
        filebase: 'slide_',
        directory: '/thedentalsitecontent/themes/184/images/homeslides/',
        extension: 'jpg',
        numslides: 6,
        height: 200
    });
    
  • 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.

  • http://www.justinwhall.com Justin W. Hall

    I see. Probs something to do with the loop that outputs the images. That’s something I can change eventually. Add it as a request in GitHub and I’ll be less likely to forget about it.

  • david
  • http://www.justinwhall.com Justin W. Hall

    Hey David, what is it you are trying to say? Typo(s) in your post perhaps? Also, both of those plugins require a PHP to work. This script requires no server-side code.

  • 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!

  • http://www.justus.me 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!

  • http://www.woothemes.com/ 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

  • http://harleyfatbob.wordpress.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/’
    });

  • http://www.justinwhall.com Justin W. Hall

    @jay – I’m sorry but your post is very confusing. I’m not really sure where to start in terms of responding. If you have a URL I’d be happy to provide you FREE support for the FREE script that I’ve offered you.

    @posvaldo & scoobysteved – Send me a url as well and I can take a look. Tough to say what’s going wrong with the code you’ve attached scooby, with out seeing all the other variables at play.

  • 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>
    
  • http://www.justinwhall.com Justin W. Hall

    Hi Fancis –

    Are you familiar with jQuery? You are calling directorySlider twice. It should look more like:

    $(document).ready(function(){
      $('#slider-main').directorySlider({
        animation: 'fade',
        filebase: 'slide_',
        directory: '/images/',
        extension: 'jpg',
        numslides: 4,
        height: 200
    });
    });
    
  • 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 :(

  • http://www.justinwhall.com Justin W. Hall

    Alex – I really need a live link.

    This however is never going to work for a number of reasons. For one, you have a

    <a>

    in your head.

    <script type="text/javascript" src="<a href="http://code.jquery.com/jquery-1.8.2.min.js"></script>" rel="nofollow">http://code.jquery.com/jquery-1.8.2.min.js"></script></a>;
    <script type="text/javascript" src="<a href="https://raw.github.com/justinwhall/directorySlider/master/directorySlider.min.js"></script>" rel="nofollow">https://raw.github.com/justinwhall/directorySlider/master/directorySlider.min.js"></script></a>;
    <script>
    
  • 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

  • http://www.justinwhall.com Justin W. Hall

    @Jaspal, Please read the last paragraph of this post and get back to me :)

    @Panoone, do you have a link for this? I’d be interested in seeing it. Perhaps you could submit your code to github?

  • 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

  • http://www.justinwhall.com Justin W. Hall

    Jaspal, you would really need some sort of server-side component to do that.

  • 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!

  • http://www.justinwhall.com Justin W. Hall

    Hey There, If you want the number of slides to auto increase, you’d really need a server-side component to be involved here.

  • nguyenhahust@gmail.com

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

  • http://www.justinwhall.com Justin W. Hall

    Um well that depends on the server side language and wether or not you’d be willing to hire me.

  • 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 || {});
    ...
    
  • http://www.justinwhall.com Justin W. Hall

    Hard to say without seeing a live link but you shouldn’t be changing directorySlider.js. You should be passing an object when calling the plugin like so:

      $('#directorySlider').directorySlider({
        animation: 'fade',
        filebase: 'gallery_',
        directory: 'images/gallery',
        extension: 'jpg',
        numslides: 6,
        height: 400
    });
    
  • http://www.mcassociation.in 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>
    
  • http://www.mcassociation.in 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!

  • http://www.justinwhall.com Justin W. Hall

    Thanks Matt. As time permits, I’m going to add a stripped down demo. Just been busy!

  • http://www.justinwhall.com Justin W. Hall

    mehabubsheikh – I can’t help you without a live URL.

  • 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?

  • http://www.justinwhall.com Justin W. Hall

    Matt- You could shuffle. That would be easy enough to add as a feature. However, without some sort of server-side component there is just no way to check to see how many slides there are, pull in regardless of name etc…

  • 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.

  • http://gravatar.com/whitishmink 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

  • http://gravatar.com/colej4586 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>
    
  • http://gravatar.com/harsh074 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

  • http://www.justinwhall.com Justin W. Hall

    @cole –

    The code you have above is different that what you have here: http://colejohnsontrialsite.com/trialjquery2.html

    Your code on that URL is:

    $(document).ready(function(){
      $('#slider-main').directorySlider({
        animation: 'fade',
        filebase: 'tn_',
        directory: 'justinhallpictures/',
        extension: 'jpg , png',
        numslides: 2,
        height: 200
    });
    });
    

    The problem here is the extension property. This has to be ONE extension. Not a comma separated list. In other words use all jpg or all png.

  • http://gravatar.com/colej4586 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!

  • http://www.justinwhall.com Justin W. Hall

    Ravi and Emsellem – I’ve already answered your question a few times already. You need some sort of server-side component to auto-detect the number of slides in a directory.

  • http://joomlart.com 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!

  • http://www.justinwhall.com Justin W. Hall

    @eyaris –

    You can set the ‘numslides’ to whatever you’d like. There is no way to randomize the slides currently.

  • 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

  • https://www.facebook.com/indieurbanmusicTV Indie UrbanMusic

    Wanted to make sure and say thanks

  • http://www.fin.be.ch 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

  • http://gravatar.com/ladele 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

  • Pingback: Background Image Slideshow Problem - DesignersTalk()

  • vb078

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

  • http://www.justinwhall.com Justin W. Hall

    What do you mean extension limit? You can use any extension supported by browsers.

  • 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

  • http://N/A 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

  • http://N/A 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. :)

  • http://gravatar.com/prefect12 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
            });
        });
    });
    
  • http://gravatar.com/akamble2610 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!

  • http://www.justinwhall.com Justin W. Hall

    This plugin is free to use. Currently it loads all images at once.

  • JC

    Hi Justin, Is there anyway to add controls to this plugin? Next, Prev, Pause, Resume?

  • http://www.justinwhall.com Justin W. Hall

    Hi JC, Currently there are no option for controls.

  • Marcus

    can someone please post working code other than the one from Justin (which doesn’t work for me). Thank you in advance! Markus

  • https://plus.google.com/100707804375336077576 Rick Howell

    Marcus can you post the code you are using? I have had no problems with using it at all.

  • http://www.justinwhall.com Justin W. Hall

    Marcus, can you post a link or like rick said, the code you are using.

  • http://www.incisoriitaliani.it Diego

    Hello I am trying to install your plugin jquery, but I can not make it work, here is the link to the page:
    http://www.incisoriitaliani.it/concorrenti-exlibris2014.asp

    Here is a link to an image that the slider has to load:
    http://www.incisoriitaliani.it/Immagini/exlibris2014/1a.jpg

    Where I’m wrong?
    Thanks in advance

    Diego

  • http://www.justinwhall.com Justin W. Hall

    Hi Diego. You have a syntax error in the way you are calling the plugin.

      $('.directorySlider').directorySlider();  //Error here
        animation: 'fade',
        directory: '/Immagini/exlibris2014/',
    	extension: 'jpg',
        numslides: 114,
        height: 470
    });
    
    

    It should be:

      $('.directorySlider').directorySlider({
        animation: 'fade',
        directory: '/Immagini/exlibris2014/',
    	extension: 'jpg',
        numslides: 114,
        height: 470
    });
    
  • Jazzzz20

    Please add a “sample html page” in your github

  • http://gravatar.com/beneybeney Beney

    What If no image is in the folder. How to put a default image in that case.

  • http://www.justinwhall.com Justin W. Hall

    If there are no images then why would you be using the plugin?

  • http://gravatar.com/beneybeney Beney

    I Wonder why Last Image displays first… Is it possible to display slide_01 first.

  • http://www.justinwhall.com Justin W. Hall

    Ya, known issue. Just need to reverse the array. Starting from line 54 you can replace that code with:

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

    And it will reverse it. I’ll commit that to gitHub eventually.

  • http://gravatar.com/beneybeney Beney

    Thank you Justin W. Hall

  • caicom

    why isnt there a sample in your github? obviously that will answer everyones question….
    If one can deploy your sample on their local test server it will shed alot of light

  • http://www.justinwhall.com Justin W. Hall

    Because I’ve been busy doing billable work to pay the bills! You welcome to contribute. It’s on gitHub for just that!

  • Greg

    For those that can’t get this to work (as was the case for me), note that your pics need to be named 1.jpg, 2.jpg, 3.jpg,…and so on. I’m using jpg as an example, but you can also have any other type of image (ex: png), so long as all your pics have the same extension (as defined by the “extension” parameter in the code below).

    Here’s a functioning html page to test the slider:

    Slider Test

    $(document).ready(function(){
    $(‘.directorySlider’).directorySlider({
    animation: ‘fade’,
    directory: ‘img/test/’,
    extension: ‘jpg’,
    numslides: 4,
    filebase: ”,
    speed: 3000
    });
    });

    Worked for me!

  • Greg

    Looks like all the html tags were stripped from the code I posted above. Not sure how to post the code (noob here :-)). I’ll try re-posting with the code between quotes…

    Slider Test

    $(document).ready(function(){
    $(‘.directorySlider’).directorySlider({
    animation: ‘fade’,
    directory: ‘img/test/’,
    extension: ‘jpg’,
    numslides: 4,
    filebase: ”,
    speed: 3000
    });
    });

  • Selvanayagam

    HI Justin,
    It works fine for me.
    It would be better if Next, Prev controls are available for this plugin. Is there any possible to add?

  • Augusto

    Hey Justin! Thanks a lot for your help.

    I was able to create a dynamic slider so it’s automatically updated every time I post a new pic on my site.

    Great Job Man!

    Regards from Brazil!

  • Wade

    I thank you very much for this nice code. I have added my own php code into the mix to determine how many pictures there are. I have also put a size restriction in the directorSlider.js I appreciate your work on this.

  • http://www.justinwhall.com Justin W. Hall

    Wade, would be interested in sharing your code. I would update this page and github!

  • https://plus.google.com/+DanielVoyles Daniel Voyles

    My comment was deleted from March 12th, 2015. Good thing I kept a copy in my email, or my informational comment would be lost forever.

  • http://www.justinwhall.com Justin W. Hall

    Looks as though it did. Wasn’t on purpose. This post get’s a lot of comments.

  • http://gravatar.com/ramllo ramllo

    hey Justin! I cant get this code to work. I cant post a live link becauseim working locally with xampp.The slider wont appear, im not sure what im doing wrong here, Thanks in advance!

    &lt;div style=&quot;width: 100%; height: 200px;&quot; class=&quot;directorySlider&quot;&gt;
    		
    			&lt;script type=&quot;text/javascript&quot;&gt;
    				$(document).ready(function(){
     				$('.directorySlider').directorySlider({
       				animation: 'slide',
       				filebase: 'event_',
       				directory: src='../images/slides/',
       				extension: 'jpg',
       				numslides: 3,
    				});
    				});
    			&lt;/script&gt;
    
    		&lt;/div&gt;
  • http://gravatar.com/prefect12 Rick

    You have a syntax error in your code. After numslides: 3 you have a comma and it should not.

  • http://gravatar.com/akabhirav akabhirav

    can I use this with multiple file extensions like jpg,gif,png,bmp.

  • Matts

    Hi Justin, I just used your code to create a full screen slideshow for a corporate lunchroom that can run completely automatic, even if new files are added.
    Our customer exports a PowerPoint presentation as PNG into the slides folder on the web server directly after which the script picks it up.

    Since a few of you above have asked for an automatic count, I’ll drop my simple code here. It uses PHP to count so obviously, you need PHP!

    &lt;script type=&quot;text/javascript&quot;&gt; 
    	$(document).ready(function(){ 
    		$('#slider-main').directorySlider({ 
    			animation: 'uncover', 
    			filebase: 'Dia', 
    			directory: src='/slides/', 
    			extension: 'PNG',
    			timeout: '15000',
    			numslides: &lt;?php $fi = new FilesystemIterator(slides, FilesystemIterator::SKIP_DOTS);printf(&quot;%d&quot;, iterator_count($fi)); ?&gt;,
    		}); 
    	});
    &lt;/script&gt; 

    Thanks again! And hope the automatic slidecount is helpful.

  • Mitchell

    Hey mate, I’m trying to get this working entirely locally, but I can’t seem to get it to run. Any suggestions or help would be awesome.

    &lt;!DOCTYPE HTML&gt;
    &lt;html&gt;
    &lt;head&gt;
    
    &lt;!-- jQuery library --&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/directorySlider-master/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt; 
    
    &lt;!-- directorySlider Javascript file --&gt;
    &lt;script 
    type=&quot;text/javascript&quot; src=&quot;/directorySlider-master/directorySlider.js&quot;&gt;&lt;/script&gt;
     
     &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&gt;
        
     
     
    $(document).ready(function(){
      $('#slider-main').directorySlider({
        animation: 'fade',
        filebase: 'slide_',
        directory: '/directorySlider-master/img/',
        extension: 'jpg',
        numslides: 5,
        height: 200
    });
    });
     
     
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class=&quot;directorySlider&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    
  • http://www.facebook.com/663509038 Paul No’one

    You’ve specified an ID selector in your JavaScript but it doesn’t appear in the HTML.

    &lt;div id=&quot;slider-main&quot; /&gt;

    And when posting code, please enclose it in CODE tags as requested in the very large blue text above the Reply box. 😉

  • http://www.justinwhall.com Justin W. Hall

    ^^
    Ha. Yes please.

  • http://www.facebook.com/663509038 Paul No’one

    Hmm. The tag that wraps the code blocks is causing HTML to render literally after entity conversion.

    Without using CODE tags: My HTML

    With CODE tags:

     &lt;pre&gt;My HTML&lt;/pre&gt;
  • http://www.justinwhall.com Justin W Hall

    You’re right. Something got Borked. I’ve made the switch to disqus. Easier to manage comments.

    And easier to write code

    And easier to write code

  • jjconti

    So, this require to rename the photos in the directory to match the expected names?

  • http://www.justinwhall.com Justin W Hall

    Yes. Unless you employ a server-side language, there is now ay around this.

  • Jonathan Andersson

    Isn’t there any demo of this available?