Link back to a certain point of a Javascript controlled page

Question

I'm using this template from codyhouse: https://codyhouse.co/gem/pointy-slider/

I'm using the slider to link to other external pages - the problem I have is when I send the user back to the template it reverts to the first slider.

I've tried using the # id a link to go back to a certain point of the template but the .hidden .visible attribute in the JS stopping this technique from working.

Is there a solution to link back to a certain slide?

So, if I understand well, you want that e.g. when the user clicks on slide 8, the web site goes to detail page. Then, when it goes back or clicks on "Back to Projects", the carousel should begin from slide 8, right? — Alessio Cantarella, Feb 10 '16 at 14:22

score 0 · Accepted Answer · answered Feb 10 '16 at 10:17

0

This piece of code is used for pagination (numbers at the bottom):

sliderPagination.on('click', function(event){
    event.preventDefault();
    var selected = $(this),
    index = selected.index();
    updateSlider(index, sliderPagination, slides);
});

This means you can use this code by calling updateSlider with the parameters you need.

I'd suggest altering the source to store index, sliderPagination, slides in a cookie and on navigating to the page again first checking if there is no cookie in session

answered Feb 10 '16 at 10:17

online Thomas

8,864
6
44
85

if you provide a fiddle, I will provide an example – online Thomas Feb 10 '16 at 14:34
@KitDebuse it doesn't have multiple pages – online Thomas Feb 10 '16 at 14:55
@KitDebuse https://jsfiddle.net/Lugy30nz/5/ Shows where I added a line to go back to the page on index 3 (4th page / 0-based) You can store this in a cookie like this: http://www.w3schools.com/js/js_cookies.asp – online Thomas Feb 11 '16 at 09:27
@KitDebuse Could you ask it more clearly or even better yet: in a new question (please link it here then, because otherwise I don't notice) – online Thomas Feb 12 '16 at 14:21
@KitDebuse http://stackoverflow.com/questions/11581543/passing-javascript-variables-between-pages as I said: cookies (or local storage). If the variable is not set, let it default to the first page! – online Thomas Feb 12 '16 at 14:52

score 0 · Answer 2 · answered Feb 10 '16 at 21:11

You could store the carousel index (i.e. 0, 1, ..., N - 1) in a sessionStorage variable (e.g. carouselIndex) when you click on it.

Then, when you return in the page, retrieve the carouselIndex and assign to it the active class.

HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <!-- etc. -->
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active" data-index="0">
            <img src="img1.jpg" alt="First slide">
            <div class="carousel-caption">First slide</div>
        </div>
        <div class="item">
            <img src="img2.jpg" alt="Second slide">
            <div class="carousel-caption">Second slide</div>
        </div>
        <!-- etc. -->
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

JS (with jQuery):

$(function() {
    var carouselIndex = sessionStorage.getItem("carouselIndex");
    if (!!carouselIndex) {
        $("#myCarousel").carousel(carouselIndex);
    }
    $("#myCarousel .item").click(function() {
        sessionStorage.setItem("carouselIndex", $(this).attr("data-id"));
    });
});

Link back to a certain point of a Javascript controlled page

2 Answers2