Jcarousel - how can I make the image link in the carousel remain active?

Question

Successfully added jcarousel to navigate the html site, which is built using a dynamic template. However, I need the image link to be active when I’m on the page with which it is connected, so that the viewer knows where they are. Also, whenever I go to a new page, jcarousel goes back to the beginning of its scroll position when I need it to stay in the last position it was in. Hope this makes sense. I found a great demo here that I downloaded, but can't figure out 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/ I hope you can help!

Answer 1

Something like this should start.

EDIT

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

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

Thus, your URL will look like "www.mysite.com/page2.html?startVal=2", where startVal = 2 determines which element in the carousel is set as the selected starting element.

<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

. , "startVal" null, .

, URL querystring, , .

:

• 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

, . , URL- 698 (www.mysite.com/page4.html?startVal=689), , .

, , , .