Menu icon Foundation
Link inside Orbit content slider do not work

Link inside an Orbit content slider do not seem to work, does anyone now if it is possible to make them work?

Orbitsliderlink

Link inside an Orbit content slider do not seem to work, does anyone now if it is possible to make them work?

Rafi Benkual almost 6 years ago

Links do work on the docs page. Can you post your code?

To link to a particular slide in your Orbit slider you will need to add a 'data-orbit-slide' attribute to each slide. Then anywhere on your page you can use 'data-orbit-link' to link to that slide.

Here is a working example:
http://cdpn.io/dkwqp

Click edit this pen to see code.

Jon Sharpe almost 6 years ago

I do not want to link to a slide, I want to link FROM a slide to another part of the page, like this...
HTML
<ul class="example-orbit-content" data-orbit>
<li data-orbit-slide="headline-1">
<div>
<a href="#part1">See part 1</a>
</div>
</li>
<li data-orbit-slide="headline-2">
<div>
<a href="#part2">See part 2</a>
</div>
</li>
<li data-orbit-slide="headline-3">
<div>
<a href="#part3">See part 3</a>
</div>
</li>
</ul>

These links do not work.

Rafi Benkual almost 6 years ago

I see, Linking from orbit to a spot in the page is not supported.
You can use regular html bookmark links
in general to link within a page.
HTML
<a name="part1">CLICK HERE</a>

Orbit can link to another page. Has anyone else figured out how to do this?

Marten almost 6 years ago

I have this problem. As soon as I add a link inside a slide, Orbit adds an empty slide in the beginning. So instead I get 3 slides with the first blank instead of the actual 2 slides in the html.

My html looks exaclty as Jon Sharpes html above except my links are to other pages or sites. As soon as I remove the anchor tag it works as expected.

???

Raul Santamaria almost 6 years ago

Well, I solved it with this:

<li id="mylink">
    <img src="myimage.jpg" />
</li>
<li>
...
</li>

And then I used Jquery click() to open the page

    $('#mylink').click(function() {
        $('#myModal').foundation('reveal', 'open');
    });

Actually I opened a modal, but you should be able to open a page with

window.location.href = "file2.html"

Josh Winn over 5 years ago

I found another thread which gave a solution to this.

.orbit-container .orbit-slides-container > *.active{ z-index: 9999; }

The problem seems related to the z-index on the active slide. I first noticed when my hover states were not showing up (inside a child div of the list item). Then I saw that only the last slide's link was registering when hovering over any other slide. Not sure if this needs some sort of bug report or not. I'm using FoundationPress (set up a day or two ago) which should be on 5.2.1.

Trying To Be Helpful over 5 years ago

Thanks Josh!

Having same issue = where each caption contained a link to a sub-page -- but only the last slide's caption/link was being registered. Guess it had to do with the stacking/z-index order, because my slides and captions would change, but the link stayed the same (like an invisible layer over the others).
= but Josh's CSS fix above solved the issue!

EDIT: Josh's fix works for Chrome, but not Firefox » I had to add a higher z-index to both

.orbit-container .orbit-prev, .orbit-container .orbit-next { ... }
.orbit-container .orbit-timer { ... }

to get the controls to show OVER the active image

Vlasta Novak over 5 years ago

Nice fix, Josh. Should this be mentioned as a bug?