I can't seem to follow the above instructions and make this work. Can I have an example of what the .js file should look like as I've tried a combination of the above and none of them work. Also, what would I need to change in the html page as well? When I click on my images regardless of whether it's the first group of images or the second group, they all cycle through as if the images existed in one group?
We don't have examples to show how to include two ninja sliders in the same page. But we have one (the demo 1 in the download package of www.menucool.com/jquery-slider) to show how to include two thumbnail sliders in one page.
If you can hardly understand it, you need to hire a web developer to do it. A basic HTML, JavaScript and CSS knowledge is surely required.
yes, I've read the instructions (a number of times). That property is set (True). I just copied the existing nsOptions, I tried it with False as well.
The problems I see are:
1). there is no way to tell 'function lightbox(idx)' which slider the images are for.
2). there is no way to tell id="fsBtn" which slider the lightbox applies to
3). 'function fsIconClick(isFullscreen)' has "ninja-slider" hardcoded in it, so for multiple sliders you cant say which one it applies to.
I have added code to solve 1) and 2), but unable to for 3).
Most importantly... even if you only have just 1 slider, if you rename it everywhere to nsOptions1, #ninja-slider1, etc., it no longer displays correctly. Its selected, but isn't displayed full screen properly (only partially without any image), there are no side scroll bars, and it doesn't collapse. So I don't think it supports multiple sliders.
For your 3) issue, I will pass in another parameter, ninjaSldr, into the fsIconClick function. Then the demo code in Demo 8 will be:
function fsIconClick(isFullscreen, ninjsSldr) {
//Note: fsIconClick is the default event handler of the fullscreen button
if (isFullscreen) {
ninjaSldr.parentNode.style.display = "none";
}
}
Please pay attention to the Demo 8 page. If its code has been changed to the above code, you can download the package again and using the new ninja-slider.js inside the package.
For the not collapsing issues, I wonder if you have updated the CSS files properly. Would you please create a testing page that contains two sliders, then Zip the folder and send it to johnwcb1(at)gmail(dot)com?
If you are using lightbox, you need to initiate the slider by the lightbox's popup event handler, something like the onTabSelected Event Handler in www.menucool.com/jquery-tabs#Div3, or the lightbox(idx) function in Demo 8.
Does anyone have a solution? I'm stuck and I also tried everything and could not make more than one slider to work...
"Surely multiple sliders should work in one page.(...)" Do not believe, if so, please give us your thoughts (code) for the basic structure.. because I think everyone here is trying but not getting anywhere... :(
Thanks in advance..
Does anyone have a solution? I'm stuck and I also tried everything and could not make more than one slider to work...
"Surely multiple sliders should work in one page.(...)" Do not believe, if so, please give us your thoughts (code) for the basic structure.. because I think everyone here is trying but not getting anywhere... :(
Thanks in advance..
Hello,
What does it mean "Notice you also need to style them differently with the css selector #ninja-slider and #ninja-slider2." ? How do I do that ?
So I feel like I have a basic knowledge of HTML and CSS, and I'm learning JavaScript. I currently have two modal sliders from demo 8 on one site. I've changed my IDs in the css and html to differentiate between "ninja-slider" and "ninja-slider2." I've also made the changes you listed in the javascript. Do I need to change the bit of javascript that is in the html page as well? (The portion with document.getElementById("ninja-slider")). I've tried changing it and leaving it. My thumbnails are correct for both galleries, but clicking on the thumbnails to the second gallery brings up the images from the first gallery. Any suggestions?
I don't know what is the usage you are using the code document.getElementById("ninja-slider")). If you have that piece of code, you must be pointing to the correct slider id.
Just evaluating this before buying a license. Only show stopper so far is being able to have multiple sliders on same page for demo 8 example.
Have made changes as above, duplicating nsOptions and nslider in ninja-slider.js, and my css to 2, 3, <n>, etc. But clearly it requires more changes than that.
I added an extra param to lightbox(idx) to pass in the relevent value to append for document.getElementById("ninja-slider<n>"), but it does not function.
Are you sure it works for multiple sliders on one page? As I cant get it to work, and I'm a professional web developer who understands js and css fairly well.
Surely multiple sliders should work in one page. The problem for your case might be the lightbox. Sliders in lightbox are not {display:none;} when page is loading so the sliders might not be properly initiated. You can fix this by properly setting the initSliderByCallingInitFunc option in the ninja-slider.js. Please read and follow the instructions in http://www.menucool.com/responsive-slider.
I'm trying to make several ninja sliders on one opage work as well an face the following problem:
Sliders 2 and 3 are displayed, but only with the first image and the expand button. They miss the prev/next arrows, and there is no way to click to the next image. The reason might be that the prev an next arrows are placed in divs with ids - but divs wit id can only be used once on a page, correct? Do you have an idea?
Just figured it out myself: You need to use one css file for every instance of ninja slider and use ninja-slider2 ... ninja-slider3 in every occurancy of ninja-slider within.
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;
If your question is related to the Ninja Slider, click:
Ask new question: Ninja SliderOtherwise navigate to one of the following forum categories, and post your question there.
##