Ninja Slider / Posts /

Specify the starting image slide of image slider by page URL query string

0

Just to give quick context: we need the unique URLs so that when people share these pages on social media outlets, the links will lead directly to certain videos.

I've seen on your forums that there is a way to have each image/video in the gallery have their own unique URL that will lead directly to whichever one is specified when the page loads: http://www.menucool.com/2510/Display-a-particular-slide-that-is-specified-in-the-current-URL

I have tried implementing this but it doesn't seem to be working. My Javascript knowledge is very limited so I'm having difficulty pinpointing what the problem is.

Dan  9 years ago   viewed: 9546    

9 Answers

0

The post link you listed is for JavaScript Image Slider, not for this Ninja Slider. That is why your code doesn't work.

Suppose your page URL contains the query string like this in the page URL: ?slide=2 (or &slide=2) . Then you can add the following script to your page that will direct the image slider to show the specified slide when the page loads. 

Note: The index number in the Ninja Slider built-in function, nslider.slide(index), is 0-based. So 2 means the third slide.

<script type="text/javascript"> function switchSlide() { if (typeof nslider != "undefined" && typeof nslider.getSlides() != "undefined") { var query = location.search; var n = query.indexOf('slide='); if (n != -1) { var index = parseInt(query.substr(n 6)); nslider.slide(index); } else return; } else { setTimeout(switchSlide, 10); } } //run the function switchSlide(); </script>

The above code block can be added either inside the <head>...</head> section, or within the <body></body> section. 

Milo   9 years ago
0

Another simpler and cleaner approach: Just open the ninja-slider.js with Notepad, add the following block before the var nsOptions = {...} block, and change the startSlide: 0 to startSlide: _index:

(Assuming the query string is the same as the one in another approach: ?slide=n or &slide=n.

var _index = 0; var _query = location.search; var _n = _query.indexOf('slide='); if (_n != -1) { _index = parseInt(_query.substr(_n + 6)); } var nsOptions = { sliderId: "ninja-slider", effect: "slide", autoAdvance: true, pauseOnHover: true, pauseTime: 3000, speed: "default", startSlide: _index, aspectRatio: "fixed", circular: true, touchCircular: true, mobileNav: false, before: null, after: null, multipleImages: { screenWidth: [0, 600], path: ["/md/", "/lg/"] }, license: "b2e981" };
Milo   9 years ago
0
Milo, thanks for the quick and thorough response to my post!  As far as I know, however, I haven't implemented the Ninja Slider into my own site.  The current one's I'm using are the JS Image Slider in combination with the MC Video Plugin.  Are you saying I would need to install the Ninja Slider instead for this to work the way I need it to?
Dan   9 years ago
0
Yes you can make a similar code changes for the JavaScript Image Slider either.
Milo   9 years ago
0

Can you tell me how to do this with the latest version of ninja-slider.js for demo 1?  Using the above code I can link to individual slides but the linked slide is not the slide in the URL.  Thank you.

Chuck   8 years ago
0

I have added Milo's script to my javascript, but am still having trouble linking to a particular slide. My link to a given slide looks like this:

<a> href="index.html?slide=73"></a>

However, it still takes me to the first slide in my slideshow. Any thoughts on what I am doing wrong?

Thanks!

Katie   8 years ago
0

I found your code contains a fatal error:

<a> href="index.html?slide=73"></a>

should be:

<a href="index.html?slide=73"></a>

Sarmad   8 years ago
0

Yes, that was my mistake when writing the reply. My code does read:

<a href="index.html?slide=73"></a>

However, it does not work.

Katie   8 years ago
0

I'm using the demo 3 content slider in order to have image mapped slides. The image mapping is working well, but I can't seem to link back to the slide with the image map.

Any insight into what might be going wrong? Thanks!

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