Menu icon Foundation
Deeplink to Orbit Slide from other Page

Hey everybody,

 

I am just setting up this artists page for a friend and I would like to open the single pictures in a slider on another detail page.

So for example if I click on the 2. picture (on desktop from left to right) I want to open the detail page with the slider showing the 2. slide (and not the first one)

Here is the draft site:

http://www.tassiloeichler.de/alex/

 

I already tried to implement this function here but it does not seem to work:

https://foundation.zurb.com/forum/posts/1041-going-crazy-with-orbit

 

I think this might be a good approach, i added the script and send the url variable. but its for bootstrap and not working yet:

https://forums.adobe.com/thread/2234603 

 

I transfer the parameter for example like this:

http://www.tassiloeichler.de/alex/detail.php?slide=2

 

And on this target page I put an ID on the orbit:

<div id="myCarousel" class="orbit" role="region" aria-label="Work" data-orbit data-auto-play="false">

 

And I use this java-script on this target page:

 

  $(document).ready(function(){

  $('#myCarousel').carousel(window.location.hash.substring(1));

  });

    

But it does not work, I recognized that the variable „slide“ does not appear in the script, but I don’t where to put it … 

So how can I do it in foundation? Has anybody an idea? Thanks a lot in advance, best regards

 

Tassilo

deeplinkOrbitOther Page

Hey everybody,

 

I am just setting up this artists page for a friend and I would like to open the single pictures in a slider on another detail page.

So for example if I click on the 2. picture (on desktop from left to right) I want to open the detail page with the slider showing the 2. slide (and not the first one)

Here is the draft site:

http://www.tassiloeichler.de/alex/

 

I already tried to implement this function here but it does not seem to work:

https://foundation.zurb.com/forum/posts/1041-going-crazy-with-orbit

 

I think this might be a good approach, i added the script and send the url variable. but its for bootstrap and not working yet:

https://forums.adobe.com/thread/2234603 

 

I transfer the parameter for example like this:

http://www.tassiloeichler.de/alex/detail.php?slide=2

 

And on this target page I put an ID on the orbit:

<div id="myCarousel" class="orbit" role="region" aria-label="Work" data-orbit data-auto-play="false">

 

And I use this java-script on this target page:

 

  $(document).ready(function(){

  $('#myCarousel').carousel(window.location.hash.substring(1));

  });

    

But it does not work, I recognized that the variable „slide“ does not appear in the script, but I don’t where to put it … 

So how can I do it in foundation? Has anybody an idea? Thanks a lot in advance, best regards

 

Tassilo

This post has been closed. No new replies can be added.

Tassilo Eichler almost 2 years ago

now it works, a friend helped me:

on the detail page:

http://www.tassiloeichler.de/alex/detail.php?slide=2

I added this java-script:

 

  function getUrlVars() {

        var vars = [], hash;

        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

        for (var i = 0; i < hashes.length; i++) {

            hash = hashes[i].split('=');

            vars.push(hash[0]);

            vars[hash[0]] = hash[1];

        }

        return vars;

      }

 

    window.onload = function () {

        var active = parseInt(getUrlVars().slide)+1;

        $('li.is-active.orbit-slide').removeClass('is-active').hide();

        $(`[data-orbit-slide=${active}]`).addClass('is-active').show();

    }

 

and on the index page

http://www.tassiloeichler.de/alex/

i set the numbers of the slides without the starting "0".

 

<ul id="container" class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">

      <li>

        <a data-orbit-link="1" href="detail.php"><img src="img/01.jpg"></a>

      </li>

      <li>

        <a data-orbit-link="2" href="detail.php?slide=1"><img src="img/02.jpg"></a>

      </li>

      <li>

        <a data-orbit-link="3" href="detail.php?slide=2"><img src="img/03.jpg"></a>

      </li>

...

 

</u>

 

Enjoy, best

Tassilo