Links not working when using jquery cycle plugin

Question

I have this HTML code :

<div class="headerPages">
        <div style="right: 0px">
          <ul dir="rtl">
            <li class="headerLinksItem"><img src="images/numbers/1.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="subscribes.php">1</a></li>
            <li class="headerLinksItem"><img src="images/numbers/2.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="advertisement.php">2</a></li>
            <li class="headerLinksItem"><img src="images/numbers/3.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="contactPage.php">3</a></li>
            <li class="headerLinksItem"><img src="images/numbers/4.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="newsBar.php">4</a></li>
          </ul>
        </div>
        <div style="right: 0px; opacity: 0">
          <ul dir="rtl">
            <li class="headerLinksItem"><img src="images/numbers/1.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="manageAlbums.php">5</a></li>
            <li class="headerLinksItem"><img src="images/numbers/2.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="words.php">6</a></li>
            <li class="headerLinksItem"><img src="images/numbers/3.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="addVideo.php?type=1">7</a></li>
            <li class="headerLinksItem"><img src="images/numbers/4.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="addVideo.php?type=2">8</a></li>
          </ul>
        </div>
        <div style="right: 0px; opacity: 0">
          <ul dir="rtl">
            <li class="headerLinksItem"><img src="images/numbers/1.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="infoControl.php">9</a></li>
            <li class="headerLinksItem"><img src="images/numbers/2.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="partners.php">10</a></li>
            <li class="headerLinksItem"><img src="images/numbers/3.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="personalPage.php">11</a></li>
            <li class="headerLinksItem"><img src="images/numbers/4.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="manageVotes.php">12</a></li>
          </ul>
        </div>
        <div style="right: 0px; opacity: 0">
          <ul dir="rtl">
            <li class="headerLinksItem"><img src="images/numbers/1.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="main.php">13</a></li>
          </ul>
        </div>
      </div>

and this javascript code:

$('.headerPages').cycle({
        timeout: 0,
        next:   '#next',
        prev:   '#prev'
});

every thing is working fine but when I am trying to click links in each slide, I can't and I get links from the prev slide because of the opacity it's set to 0 and the z-index property like layers as this plugin work.

I tried to use cssAfter, cssBefore and it's not working also

any idea how to solve this problem?

Your markup is invalid. `br` tags can't be directly contained by `ul` tags (`ul` [can **only** directly contain](http://www.w3.org/TR/html5/grouping-content.html#the-ul-element) `li` tags). Invalid markup can make manipulation with JavaScript and the DOM (directly, or with a library) problematic, esp. cross-browser. So step 1 would be to correct the markup the point where it passes [validation](http://validator.w3.org) either completely, or "just" with attribute errors but not structural ones. — T.J. Crowder, Jun 08 '11 at 13:59
I removed all `br` elements and I am still facing the same problem — Saleh, Jun 08 '11 at 14:02

score 1 · Answer 1 · answered Jun 21 '16 at 14:46

1

I´ve came across the same problem today and found out that cycle sets a class for the active slide. So you easily can use CSS instead of the callback function:

.cycle-slide-active {
    z-index: 1001 !important;
}

answered Jun 21 '16 at 14:46

Status4

175
1
12

Brilliant. Worked great here! – Etienne Dupuis Jul 15 '20 at 14:37

score 0 · Accepted Answer · answered Jun 23 '11 at 22:45

I had the exact same issue with this otherwise perfect plugin. After a bit of fumbling, I settled for a solution using the after callback to automatically reset the z-index. It should be doable using cssAfter as well.

$(document).ready(function() {
    $('#slideshow').cycle({ 
        // options there,
        after: onAfter
    });
});


function onAfter(out)
{
    // Dyamically set the greater z-index for the current slide.
    // Works with any number of slides.

    $(this).css('z-index', Number($(out).css('z-index'))+1);
    $(out).css('z-index', Number($(out).css('z-index'))-1);
};

Links not working when using jquery cycle plugin

2 Answers2