Unable to make the code work please help.

Question

1.00/5 (2 votes)

See more:

I have a folder with over 500 images, I want to display the images into a slider. usually the long method is to write the names of all the 500 files and then get it displayed bu then i want to increase the images sizes to lets say over 1000 then i have to write another 500 names and this continue. so another way is to use a script to get all the names of images starting with img_ and store them into an array and then randomize the array when u press the next button on the slider and display it. i am not able to do that. nothing is being displayed. help please.

JavaScript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- directorySlider Javascript file -->
<script src="js/directorySlider.js"></script>
<script src="js/directorySlider.min.js"></script>
<script>
    $('#slider-main').directorySlider({
        animation: 'fade',
        filebase: 'img_',
        directory: 'images/',
        extension: 'jpg',
        numslides: 5,
        height: 240, 
        width:  320,
        timeout: 2000
    })
 </script>
 </head>
 <body>
<div class="directorySlider" id="slider-main"></div>
</body>
</html>

What I have tried:

JavaScript

/**
 * directorySlider v0.9 - Loads all images in a specified directory and creates a slide show
 * Author: Justin W. Hall
 * http://www.justinwhall.com/directory-jquery-slider/
 *
 * License: GPL v3
 */

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

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

       // set slideshow dimensions if set
       if (config.height) {
        $(elem).css('height', config.height);
       }
       if (config.width) {
        $(elem).css('width', config.width);
       }

       $(elem).css('overflow', 'hidden');

       // Get slides
       var slides = [],
       slideNumber = 1;

       while(slideNumber <= config.numslides){
         slides.push('<img src="' + config.directory + config.filebase + slideNumber + '.' + config.extension + '" />');
         slideNumber++;
       }

       // append slideshow
       // apply slide wrap 1st
       var slideWrap = $('<div class="' + elemId + '-slide-wrap"></div>');
           slideWrap.appendTo(elem);

        // append slide and position absolutley
       $.each(slides, function(index, val) {
         $(val).css({
           position: 'absolute',
           top: 0,
           left: 0,
           width: config.width // ADDED THIS SO WE DON'T NEED TO HAVE ALL IMAGES WITH SAME HEIGHT & WIDTH
         }).appendTo(slideWrap);
       });

    setInterval(function(){
       var firstSlide = elem.find('img:first-child'),
           lastSlide = elem.find('img:last-child');
       // Apply animation
       switch(config.animation){

        case 'fade':
            $(lastSlide).animate({
              opacity: 0},
              config.speed, function() {
              $(this).insertBefore(firstSlide).css('opacity', 1);
            });
        break;

        case 'uncover':
            lastSlide.animate({
              marginLeft: -$(this).width()},
              config.speed, function() {
              $(this).insertBefore(firstSlide).css('marginLeft', 0);
            });
            break;
        default:
            $(lastSlide).animate({
              opacity: 0},
              config.speed, function() {
              $(this).insertBefore(firstSlide).css('opacity', 1);
            });
       }
    }, config.timeout);

   };

   $.fn.directorySlider = function(options)
   {
       return this.each(function()
       {
           var element = $(this);

           // Return early if this element already has a plugin instance
           if (element.data('directoryslider')) return;

           // pass options to plugin constructor
           var directoryslider = new directorySlider(this, options);

           // Store plugin object in this element's data
           element.data('directoryslider', directoryslider);

       });
   };
})(jQuery);

this is the javascript. still it won't show any output

Posted 4-Apr-16 20:38pm

spyketrash141

Updated 5-Apr-16 23:20pm

Sinisa Hajnal

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 5-Apr-16 2:55am

Code dump. Nothing to talk about. What to look at, without knowing the goal of it, anything? And why..?
—SA

spyketrash141 5-Apr-16 23:58pm

i have a folder with over 500 images , i want to display the images into a slider. usually the long method is to write the names of all the 500 files and then get it displayed bu then i want to increase the images sizes to lets say over 1000 then i have to write another 500 names and this continue. so another way is to use a script to get all the names of images starting with img_ and store them into an array and then randomize the array when u press the next button on the slider and display it. i am not able to do that. nothing is being displayed. help please.

F-ES Sitecore 5-Apr-16 5:10am

Have you followed the implementation instructions? Do you have the right files with the right filenames in the right folder of your webserver? Your question indicates you don't know how to implement this plugin so the documentation is usually the first place to start.

spyketrash141 5-Apr-16 23:59pm

yes i followed and i have the files names correct and i am not missing any files , it still displays a blank webpage.

F-ES Sitecore 6-Apr-16 4:37am

Use the browser's dev tools (F12 in Chrome or IE) to inspect the img elements and look at their src attributes and see if you have images at those urls. Copy and paste the url in the src attribute to see if it works in the browser normally and go from there.

Patrice T 5-Apr-16 6:12am

And you plan to explain what you want this code to do ?

spyketrash141 6-Apr-16 0:00am

i have a folder with over 500 images , i want to display the images into a slider. usually the long method is to write the names of all the 500 files and then get it displayed bu then i want to increase the images sizes to lets say over 1000 then i have to write another 500 names and this continue. so another way is to use a script to get all the names of images starting with img_ and store them into an array and then randomize the array when u press the next button on the slider and display it. i am not able to do that. nothing is being displayed. help please.

Sinisa Hajnal 6-Apr-16 2:32am

I moved this comment to the question itself. In general, it is not useful to just dump the code without any explanation. You can see that the first thing you received are questions along the line "what are you trying to do?" or "wtf are you talking about?"

There are plenty of examples of javascript getting filenames. Search around. Don't look for slider examples, but for how to get filenames into an array.

spyketrash141 6-Apr-16 2:46am

can you give me a sample project where a similar code has been implimented. i mean displaying numerous random images in a single slider using arrays.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jaket-cp · Answer 1 · 2016-04-05T23:20:00

From your sample code I could see you are using the code before the document was loaded or the div "slider-main".

HTML

<div class="directorySlider" id="slider-main"></div>

I created a quick test environment to see if that was the case.
I got it to work by placing the code in between:

JavaScript

$(document).ready(function () {
	//code here
})
;

Please have a read of:
$( document ).ready() | jQuery Learning Center[^]

Also ensure the code is pointing to the correct path.
Here is a "Quick Reminder About File Paths":
Quick Reminder About File Paths | CSS-Tricks[^].

Hope that helps you out.

Unable to make the code work please help.

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us