jquery cycle - can you target certain “slide” from other page?

Question

So I've tried searching here, and I've found similar problems, but not like mine actually, that I could use.. So the thing is I'm using jquery cycle plugin, and all is working great. So this is jquery I am using on page, let's say page.html

$(function() {
    $('#rotation').cycle({ 
        fx:'scrollRight',
        timeout: 0,
        speed: 500,
        startingSlide: 0
    });

    $('#goto1').click(function() { 
        $('#rotation').cycle(0);

        return false;
    });

    $('#goto2').click(function() { 
        $('#rotation').cycle(1); 

        return false;
    });
});

Your guess is that I'm using navigation like this to go through that:

<li><a href="#" id="goto1">Link1</a></li>
<li><a href="#" id="goto2">Link2</a></li>

and finaly div structure would be

<div id="rotation">
    <div> Content of first cycle </div>
    <div> Content of second cycle </div>
</div>

And that workds fine. Now my question is, can I target, let's say, div two from index.html? Page is not php, my idea was to create a href from index to page.html#goto2 and somehow use that, but since its not php I do'nt know how would I do that... If someone knows a trick I would be grateful. Thanks.

Answer 1

Send querystring as ?tab=1 , tab=2 , tab=3 according to the tab you want

Now set the tab according to QueryString value change tabs. For simplicity we added id's to the anchor inside list and attach href to each anchor dynamically.

    // Run this on document ready.
    var listItemsofThumbnail = $("ul.sidebarTabset li");

    listItemsofThumbnail.each(function (idx) {
        var licount = idx + 1;
        $(this).addClass("currentactive1_s" + licount)
        var linkurl = $(this).find("a").attr("href");
         $(this).find("a").attr("href", linkurl + "?tab=" + licount);
     });


    var currenturl = window.location.href;
    var QuerystringValue = getParameterByName("tab");

    switchImages(QuerystringValue);

    // document ready end.

    function switchImages(tab) {
       if (tab == null || tab == undefined || tab == 0) tab = 1; // catch any bad data
           DeactivateAllTab();
           ActivateTab(tab - 1);
       }


     // Dsiplays the li 
    function ActivateTab(i) {
         if (!($("#slider1 li#currentactive1_s" + i).hasClass("currentactive1_on"))) {
              $("#slider1 li#currentactive1_s" + i).addClass("currentactive1_on");
              $("#slider1 li#currentactive1_s" + i).css({ "float": "left", "position": "relative", "opacity": 1, "zIndex": 2, "display": "list-item" });
          }
         var thumbnailindex = i + 1;
         if (!($(".sidebarTabset li.currentactive1_s" + thumbnailindex).hasClass("active"))) {
            $(".sidebarTabset li.currentactive1_s" + thumbnailindex).addClass("active");
         }

     }

     // Hides the li
     function DeactivateAllTab() {
        $("#slider1 > li").each(function () { 
          $(this).removeClass("currentactive1_on");
          $(this).css({ "float": "none", "position": "absolute", "opacity": 0, "zIndex": 0 });
});
        $(".sidebarTabset li").each(function () {
           if ($(this).hasClass("active")) {
               $(this).removeClass("active");
            }
        });

     }

Now our jquery cycle was adding class currentactive1_on_tab name automatically, so we used it for mapping the thumbnails with the slides. Also, we were changing the css accordingly in our activate and deactivate functions - in order to work like the jquery cycle.

Let me know if you have any questions.