Question

Is there a way to allow users to specify how many slides they want the slider to have. As well as from which HTML page they want the content to be loaded in each slide using an AJAX call in jQuery.

Because the slide i made uses the jQuery .load() call to load content into each specific slide whenever it comes into view, and sets the window.location.hash to a certain value for each slide; I would like the users to be able to specify the values for these two things.

In other words specify the URL address the .load() method pulls for each slide, as well as what the hash tag will be when each slide shows.

The .load() URL address is meant to be different for each slide as well as the hash tag.

So for example: Slide to slide number two, the content from a url specified only for slide two is loaded and the hash tag is changed to some user specified value.

Slide to slide number three, the content from a url specified value for slide three is loaded, and hash tag is changed to some other user specified value.

Is there a way to achieve these things by allowing the user to chose the amount of slides they want to have instead of having a set amount of slides?

Also is there a way to have the user specifications sorted in a array such as:

    var slideshash = ["#userSpecifiedHash1", "#userSpecifiedHash2"];

If anybody can give me an idea how this can be done, or if its possible; or direct me to an article or tutorial related to this, i would be grateful.

Answer 1

I find path.js routing library to be extremely helpful in situations like you explained. Loading certain content and calling functions based on urls/hash tags is made easy…

There are a few samples located on the project GitHub @ HERE

Edits:

I’m not too sure on your logic behind your hashes but here is how I would do it with PathJS and jQuery. Keep in mind that in this example, we are simply adding more routes and not taking them away…

    <script type="text/javascript">
    var slidehash = new Array();

    function go(){  
            Path.map(slidehash[0]).to(function(){
                alert("#1 hash found: "+slidehash[0]);
            });
            Path.map(slidehash[1]).to(function(){
                alert("#2 hash found: "+slidehash[1]);
            });
            Path.map(slidehash[2]).to(function(){
                alert("#3 hash found: "+slidehash[2]);
            });
        Path.listen();
    }

    $(function() {  
        $('#save').click(function() {
            slidehash[0]=$(".changeMe:eq(0)").val();
            slidehash[1]=$(".changeMe:eq(1)").val();
            slidehash[2]=$(".changeMe:eq(2)").val();
            go();           
        });

    });
    </script>
<ul id="inputList">
    <li><input class="changeMe" type="text" value="#/test"></li>
    <li><input class="changeMe" type="text" value=""></li>
    <li><input class="changeMe" type="text" value=""></li>
</ul>
<p><input id="save" type="button" value="Assign hashbang!" /></p>
</script>