javascriptjqueryhtmlimagejquery-slider

How to pass the argument to the jQuery slider function on page load in following scenario?

I've used one image slider. In HTML code of this jQuery image slider there is one hidden field which contains the numerical value. This numerical value is nothing but the time in seconds for which each slider image should display. Once the time finishes the next image will display.

The HTML and jQuery code for it is as follows :

HTML code :

<input type="hidden" name="brand_slider_time" id="brand_slider_time" value="10">
<div class="leaderboard">
  <ul id="demo1">
    <li><a href="#slide1"><img src="img/Slid1.png" alt="Lorem Ipsum"></a></li>
    <li><a href="#slide2"><img src="img/Slid2.png"  alt="Lorem Ipsum"></a></li>
    <li><a href="#slide3"><img src="img/slid3.png" alt="Lorem Ipsum"></a></li>
  </ul>
</div>

jQuery code :

$(function() {
  var demo1 = $("#demo1").slippry({
    transition: 'fade',
    useCSS: true,
    speed: 1000,
    pause: 3000,
    auto: true,
    preload: 'visible'
  });
  $('.stop').click(function () {
    demo1.stopAuto();
  });
  $('.start').click(function () {
    demo1.startAuto();
  });
  $('.prev').click(function () {
    demo1.goToPrevSlide();
    return false;
  });
  $('.next').click(function () {
    demo1.goToNextSlide();
    return false;
  });
  $('.reset').click(function () {
    demo1.destroySlider();
    return false;
  });
  $('.reload').click(function () {
    demo1.reloadSlider();
    return false;
  });
  $('.init').click(function () {
    demo1 = $("#demo1").slippry();
    return false;
  });
});

The necessary jQuery and CSS files have been already included.

For passing the value of hidden field as a n argument to the slider function I tried the code below in same file but it didn't work out for me.

$(document).ready(function() {
  var val = $('#brand_slider_time').val() * 1000;
  demo1.destroySlider();
  demo1 = $("#demo1").slippry({
    pause: val
  });
});

I wrote this code above the slider function code in a same file.

How should I pass this value of 10 seconds to the jQuery slider function and use this value into a function such that each image from slider will appear for 10 seconds?

Thanks for spending some of your valuable time in understanding my issue. If you need any more information regarding this issue please let me know.

Any kind of hep would be highly appreciated. Waiting for your precious replies.

Solution

  • I perfectly made it work by taking hidden field value FIDDLE

    apply pause: 10000,

    Here it means 10 second pause,then next image.

    Try modified code . And enjoy :) I checked and it worked .10 secs. per img

    <!DOCTYPE html>
<html>
    <head>
        <title>slippry demo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="../dist/slippry.min.js"></script>
        <script src="//use.edgefonts.net/cabin;source-sans-pro:n2,i2,n3,n4,n6,n7,n9.js"></script>
        <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="../dist/slippry.css">
    </head>
    <body>      
        <section class="demo_wrapper">
            <article class="demo_block">
                <input type="hidden" name="brand_slider_time" id="brand_slider_time" value="10">

                <h1>Simple demo with default setups</h1>
                <a href="#glob" class='prev'>Prev</a> / <a href="#glob" class='next'>Next</a> 
        || <a href="#glob" class='init'>Init</a> | <a href="#glob" class='reset'>Destroy</a> | <a href="#glob" class='reload'>Reload</a>
        || <a href="#glob" class='stop'>Stop</a> | <a href="#glob" class='start'>Start</a>
            <ul id="demo1">
                <li><a href="#slide1"><img src="img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>
                <li><a href="#slide2"><img src="img/image-2.jpg"  alt="This is caption 2"></a></li>
                <li><a href="#slide3"><img src="img/image-4.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li>
            </ul>
            </article>
        </section>      

        <script>
            $(function() {
                var demo1 = $("#demo1").slippry({
                    transition: 'fade',
                    useCSS: true,
                    speed: 1000,
                    pause: $('#brand_slider_time').val() * 1000,
                    auto: true,
                    preload: 'visible'
                });

                $('.stop').click(function () {
                    demo1.stopAuto();
                });

                $('.start').click(function () {
                    demo1.startAuto();
                });

                $('.prev').click(function () {
                    demo1.goToPrevSlide();
                    return false;
                });
                $('.next').click(function () {
                    demo1.goToNextSlide();
                    return false;
                });
                $('.reset').click(function () {
                    demo1.destroySlider();
                    return false;
                });
                $('.reload').click(function () {
                    demo1.reloadSlider();
                    return false;
                });
                $('.init').click(function () {
                    demo1 = $("#demo1").slippry();
                    return false;
                });
            });
        </script>
    </body>
</html>