Question

I am having a little difficulty passing some client side data into a third party plug-in.

I am trying to get a plug-in option to work off a variable that is created and populated via a user clicking on the <li>‘s below.

Brief:

I have some HTML that acts as the handler for the interaction.

<ul class="subpage-list" id="intro-subpage-list">
    <li data-slide="1">slide 1</li>
    <li data-slide="2">slide 2</li>
    <li data-slide="3">slide 3</li>
    <li data-slide="4">slide 4</li>
    <li data-slide="5">slide 5</li>
    <li data-slide="6">slide 6</li>
</ul>

When the user clicks on any of the <li>‘s I have the following code:

$("#intro-subpage-list li").click(function() {
    var slideID = $(this).attr('data-slide');

    $("body").css('overflow','hidden');
    $("#intro-overlay").fadeIn(1000,function() {
        $("#intro-subpage").show();
    });
});

The HTML that loads after the JS interaction is as follows:

<div id="intro-overlay" class="overlay">
    <div id="overlay-close">X</div>
    <div id="loading"></div>
    <section id="intro-subpage">
        <div class="ls-layer">
            <img class="ls-bg" alt="layer1-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/1.jpg">
        </div>
        <div class="ls-layer">
            <img class="ls-bg" alt="layer2-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/2.jpg">
        </div>
    </section>
</div>

The code that loads and controls the plug-in is as follows:

$(".overlay section").layerSlider({
    autoStart:  false,
    imgPreload: true,
    slideDelay: '6000'
});

There is an option for this plug-in called “firstLayer” which to me makes perfect sense to be the option that would control the slider to load the correct slide dependant on the <li> that was clicked.

I have a file called functions.php that handles the HTML and a file called jquery.php that handles the plug-in and the JS.

If I have missed anything important please request and I shall edit this post with those details.

Thanks in advance.

Dan.

Answer 1

As no one was able to help with this question I went ahead and tried again for the solution to which I realised that creating my own plug-in; although time consuming, was the best option as I could tailor the plug-in to work exactly how I wanted.

Thank you to all who at least looked at the question and possibly thought about it.