jcarousel - how can i make an image link in the carousel stay active

Have been succesful in adding a jcarousel to navigate around my html site which is built with dynamic template. However, i need an image link to appear active when i am on the page it is linked to so the viewer knows where they are. Also, whenever i go to a new page the jcarousel goes back to the beginning of its scroll position when i need it to stay in the last postion it was in. Hope that makes sense. I found a great demo here which i have downloaded, but can't figure how to remove the elements i want from the image gallery in the demo. http://blog.themeforest.net/tutorials/how-to-integrate-the-jquery-galleria-and-jcarousel-plugins/ Hope you can help!

Solution

Something like this should get you started.

EDIT

Here is a more complete example. Now the start value is pulled from your url.

For instance. If the URL to your website is www.mysite.com/page2.html, you can add on a URL parameter (in this case 'startVal') which can be accessed via JavaScript.

So your URL will look like "www.mysite.com/page2.html?startVal=2" where startVal=2 determines which item in the carousel is set as the selected start item.

<script type="text/javascript">

var $sel = null;
$(document).ready(function () {

    // This function helps pull out items from your URL. (in this case 'startVal') 
    $.urlParam = function (name) {
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if(results == null){ //if results is null then return "0"
            return 0;
        }
        return results[1] || 0;
    }

    //Get the value of startVal from the QueryString. (in the example below, it would return 2)
    //EXAMPLE: www.mysite.com/page2.html?startVal=2
    var startVal = parseInt($.urlParam('startVal'));

    $('#mycarousel').jcarousel({
        start: startVal //Use the value of startVal to determine which item the carousel should default to on page load.
    });

    //Get the image you wish to default as selected, again we do this based off the startVal we received from the URL
    $sel = $('#mycarousel li:nth-child(' + startVal + ')').find('img');
    $sel.css('border', 'solid 2px blue'); //Here we can format it however we want

    //This function assigns a click event to each item in the carousel and changes which one is selected. 
    $('#mycarousel img').click(function () {
        $sel.css('border', 'solid 0px white');
        $(this).css('border', 'solid 2px blue');
        $sel = $(this);
    });
});

</script>

EDIT

You'll also need to add in your own validation. Right now, I don't check to see if "startVal" is null, or that the requested start index is in the range of available items.

EDIT

So for each URL on your site, you'll need to add a querystring parameter to determine which item in the Carousel is selected.

Examples:

www.mysite.com/page1.html?startVal=1
www.mysite.com/page2.html?startVal=2
www.mysite.com/page3.html?startVal=3
www.mysite.com/page4.html?startVal=4

You'll need to validate that the requested item actually exists. Otherwise if the URL requests item number 698 (www.mysite.com/page4.html?startVal=689) it won't exist and you may get errors.

Didn't mean to make this more confusing, but I hope this added some clarity.