Ninja Slider / Posts /

How I can Create Image Slider Dynamically with Ninja-Slider

8
I am trying to create a  a dynamic slider with Ninja-Slider as in the Demo7
of Javascript Slider by replacing the innerHTML Markup of the ninja-slider DIV and the I call  nslider.reload(). I can get it to work though, is it possible?

Chris  10 years ago   viewed: 16043    

8 Answers

2
You said you can get it to work. What's your question then?
Milo   10 years ago
3
Firstly thanks for the reply.

That was a typo. I should have written I can't get it to work.

But since my post I have partially fixed it.
I'll give you a brief description of what  I am trying to accomplish.

I have a page with 3 <SELECT> elements functioning as combo lists where a visitor to my page may choose
an 'Artist', a 'Theme' and 'Media Type' using these lists.

Then based on his/her selections I dynamicly create the Markup of the entire DIV of the ninja-slider
which is wrapped in a parent DIV called 'myslideshow' as shown bellow:

<div id="myslideshow" style="position:absolute;left:125px;top:305px;width:800px;height:474px;max-width:810px;"></div>
and the function:

<!--  POPULATE SLIDER -->
<script type="text/javascript">
    function populateSlider(prmHTML) {    
        var sliderFrame = document.getElementById("myslideshow");
        var thsiHTML = prmHTML;
        
        sliderFrame.innerHTML = thsiHTML;
//        $(thsiHTML).appendTo(sliderFrame);
//        $('#myslideshow').empty().append(thsiHTML);
//        $('#myslideshow').html(thsiHTML);

        nsOptions.startSlide=0;
        nslider.slide(0);
        nslider.reload();
    }
</script>

Where prmHTML is the Markup string created dynamically.

On page load everything works fine, the slider is created and populated with all images starts OK.
But if the visitor makes a selection and after processing of his selection via the same path as in page load
the slider is blank even though I have checked its innerHTML property and is correct.

Any ideas?
Chris
Chris   10 years ago
1
Edited again on Oct 21, 2015:

Since the release of v2015.10.21, this post is not valid anymore as we have replaced the reload() function with init(). For the solution of this question, please read the { initSliderByCallingInitFunc: false } option under the JavaScript section in the Ninja Slider home page.
I have rewritten the demo1.html page in the download package to the code as below, and found it is working quite good:
<!DOCTYPE html> <html> <head> <title></title> <link href="ninja-slider.css" rel="stylesheet" type="text/css" /> <script src="ninja-slider.js" type="text/javascript"></script> <script> function popSlider() { var html = document.getElementById('sliderMarkup').innerHTML; var wrapper = document.getElementById('ninja-slider'); wrapper.innerHTML = html; nslider.reload(); } </script> </head> <body> <div> <div id='ninja-slider'> </div> </div> <button onclick="popSlider()">Populate Slider</button> <div id="sliderMarkup" style="display:none;"> <ul><li><div data-image="img/md/1.jpg"></div></li><li><div data-image="img/md/2.jpg"></div></li></ul> </div> </body> </html>

Maybe (I am not sure) you should not call nslider.slide(0); before calling the nslider.reload();

Milo   10 years ago
-1

Hi,

What is the right way to add more images after it has been initialized?

Isaack
  8 years ago
0

The slider's markup cannot be changed once initiated.

Milo   8 years ago
-1

adding more than 5 images is possible in this? 

karthik   10 years ago
-1

there is no nslider.reload() method available and nslider.init(nsOptions) does nothing.

mahesh   8 years ago
-1

The reload() is decommissioned. It has been replaced with the init() in the new version.

Once the ninja slider has been populated, calling the nslider.init(nsOptions) will do nothing. The init function can only be called when the slider has not been initiated yet.

Milo   8 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲