Home/ Questions/Q 6058265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:34:50+00:00

I have this HTML code : <div class=headerPages> <div style=right: 0px> <ul dir=rtl> <li

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
};
    • 0