Javascript Image Slider / Posts /

Pass in an image URL dynamically and ask slider to slide to it

114
I want to pass in an image URL dynamically, and then call a function that will tell the slider to slide to the passed in image. Is that possible and how?
Joel  11 years ago   viewed: 46768    

7 Answers

36
i am also looking for that
fer
  10 years ago
-7
Please read http://www.menucool.com/2510/Display-a-particular-slide-that-is-specified-in-the-current-URL
Milo   10 years ago
6

Yes, the slider's built-in function imageSlider.displaySlide() can help. You need to wrap it into a customized function:

<script> var mcSlides = []; function getSlides() { if (mcSlides.length == 0) { var slider = document.getElementById("slider"); var children = slider.childNodes; for (var i = 0; i < children.length; i++) { //assume slider's immediate children are all <img>, no <a> if (children[i].tagName == "IMG") mcSlides.push(children[i]); } } return mcSlides; } function display(imgSrc, idx) { mcSlides = getSlides(); mcSlides[idx].src = imgSrc; imageSlider.displaySlide(idx, true, true); } </script>

Usage:

In your HTML code, you can call display('imgs/imgNew.jpg', idx) on page load, or respond to a button's click event: <input type="button" value="Display imgNew" onclick="display('imgs/imgNew.jpg', 2)" />


Note: 

1. the index of the slides is 0-based. If you want to display the imgNew.jpg as the second slide in the slider, the idx should be 3.
2. demo 4 (http://www.menucool.com/slider/javascript-image-slider-demo4) has a brief introduction of the built-in functions and event handlers. Below gives you more details about the displaySlide function.

displaySlide accepts three parameters: 
  1. slideIndex: the index of the slide that you want to display;
  2. forceDisplay: if it is not set to true(or omitted), there will be no respond if you are calling this function at the time that the slider is in its transition animation.
  3. defaultEffect: set it to true. Otherwise, the effect will be either "9" or "10".

PS:

Maybe beforeSlideChange event handler is also useful if you want to trigger the display function at a specific point. See aforementioned demo 4 for details.

milo   11 years ago
0

hi Milo,

your code worked only for one image slide, I was not able to click on the next button multiple time for multiple slides.

in the below example, I want each time I click on the >, it should slide to a new image("images/image-slider-x.jpg" for x = 1 to n).  So I am trying to find out if it's possible to use your slider if I don't have a set of images defined when the page is loaded, and can images be dynamically added to the queue(sorry for lack of better word)

 

<!DOCTYPE html>
<html>
<head>
    <title>Demo 4 - with Navigation Buttons</title>
    <link href="themes/4/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/4/js-image-slider.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
<script>
  var mcSlides = [];
  function getSlides() {
      if (mcSlides.length == 0) {
          var slider = document.getElementById("slider");
          var children = slider.childNodes;
          for (var i = 0; i < children.length; i++) {
              //assume slider's immediate children are all <img>, no <a>
              if (children[i].tagName == "IMG")
                  mcSlides.push(children[i]);
          }
      }
      return mcSlides;
  }
  var i = 1;
  function display(imgSrc, idx) {
      mcSlides = getSlides();
      mcSlides[idx].src = "images/image-slider-"+i+".jpg";
   i++;
      imageSlider.displaySlide(idx, true, true);
  }
</script>
</head>
<body>
    <div id="sliderFrame">
        <!--There must at least 2 image slide within the slider-->
        <div id="slider">
            <img src="images/slider-1.jpg" />
            <img src="images/slider-2.jpg" />
        </div>
        <!--Custom navigation buttons on both sides-->
        <div class="group1-Wrapper">
            <a onclick="imageSlider.previous()" class="group1-Prev"></a>
            <a onclick="display('images/image-slider-2.jpg',1)" class="group1-Next"></a>
        </div>
       
    </div>
</body>
</html>

joel
  11 years ago
-7
I got it working by using imageSlide.reload() and imageSlider.displaySlide(..)
joel
  11 years ago
-2

Hi, This did not work for me.  I modified demo 4 as the following, when I clicked on >, nothing happened.  I do see the innerHTML of slider div tag change to the image I want to display, but the image is not displayed.

 

<!DOCTYPE html>
<html>
<head>
    <title>Demo 4 - with Navigation Buttons</title>
    <link href="themes/4/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/4/js-image-slider.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
 <script>
var idx = 1;
function display(){
 
        var slider = document.getElementById("slider");
        var children = slider.childNodes;
        var slides = [];
        for (var i = 0; i < children.length; i++) {
            slides.push(children[i]);
        }

 
 imgSrc = "images/image-slider-"+idx+".JPG";
 //alert(imgSrc);
 slides[0].src = imgSrc;
 //alert(slider.innerHTML);
 imageSlider.displaySlide(0, true, true);
 idx++;
}
</script>
</head>

 

<body>
    <div id="sliderFrame">
        <div id="slider"><img src="images/slider-1.jpg"/></div>
        <!--Custom navigation buttons on both sides-->
        <div class="group1-Wrapper">
            <a onclick="imageSlider.previous()" class="group1-Prev"></a>
            <a onclick="display()" class="group1-Next"></a>
        </div>
       
    </div>
</body>
</html>

joel
  11 years ago
-3
I made your code work with the below modification:
<!DOCTYPE html> <html> <head> <title>Demo 4 - with Navigation Buttons</title> <link href="themes/4/js-image-slider.css" rel="stylesheet" type="text/css" /> <script src="themes/4/js-image-slider.js" type="text/javascript"></script> <link href="generic.css" rel="stylesheet" type="text/css" /> <script> var mcSlides = []; function getSlides() { if (mcSlides.length == 0) { var slider = document.getElementById("slider"); var children = slider.childNodes; for (var i = 0; i < children.length; i++) { //assume slider's immediate children are all <img>, no <a> if (children[i].tagName == "IMG") mcSlides.push(children[i]); } } return mcSlides; } function display(imgSrc, idx) { mcSlides = getSlides(); mcSlides[idx].src = imgSrc; imageSlider.displaySlide(idx, true, true); } </script> </head> <body> <div id="sliderFrame"> <!--There must at least 2 image slide within the slider--> <div id="slider"> <img src="images/slider-1.jpg" /> <img src="images/slider-2.jpg" /> <img src="images/slider-3.jpg" /> <img src="images/slider-4.jpg" /> </div> <!--Custom navigation buttons on both sides--> <div class="group1-Wrapper"> <a onclick="imageSlider.previous()" class="group1-Prev"></a> <a onclick="display('images/slider-2.jpg',3)" class="group1-Next"></a> </div> </div> </body> </html>
milo   11 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:
▲