2

Edit: I figured this out. jQuery Cycle plugin adds a z-index to every item it works through, thus the first item always had the highest z-index, messing up all the links. Removing the z-index functionality from the plugin has fixed it.

Hi there,

I'm currently building a cycling div using jQuery cycle that has a few inside links. Basically, we have a large banner and then within that large banner I have some absolute positioned div's containing a product, thumbnail to a video, etc. I also have custom paging.

All this works wonderfully, almost. My problem right now is that when the it rotates to the second div, the link in the same position from the first one takes precedence and overlaps the second div's link, therefore rendering it useless for any user interactivity.

Here's the basics of my code to better lay it out. I've also outlined my position placements as in response to the answer below.

    #rotation {
         position: relative;
    }

     .rotation_item {
         position: relative;
     }

     .rotation_box {
         position: relative;
     }

<div id="rotation">
<div id="rotation_container">
      <div class="rotation_item" style="background: url('/some/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/product.jpg' />
                <h3><a href='/product/page/'>Some Cool Product!</a></h3>
             </div>
      </div> 
      <div class="rotation_item" style="background: url('/some/other/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/other/product.jpg' />
                <h3><a href='/product/page_other/'>Some Other Cool Product!</a></h3>
             </div>
      </div> 
</div>
</div>

In this scenario, the only link that always show up for clicking is /product/page/

I hope that makes sense, does anyone know how I can prevent this from happening using the jQuery Cycle package, or perhaps some fun CSS settings on each rotation_item?

Bartek
  • 15,269
  • 2
  • 58
  • 65

2 Answers2

3

I had the EXACT same problem with the Cycle Lite plugin and it was driving me nuts...but even removing the z-index from the plugin didn't help my particular situation (my internal slide HTML is a bit more complex than what you posted above).

Apparently there are some logic differences between the Cycle Lite plugin (which includes only the fade transition) and the full "Cycle All" plugin.

Basically the solution ended up being installing the Cycle All plugin. It's technically overkill, but I finally have a fading slideshow with separate links on each image without having to hack anything.

Knic Pfost
  • 31
  • 3
  • 2
    This worked for me as well. Apparently to save some kb's the cycle lite plugin does not update the z-index for a slide once it's animated. The link with the highest z-index will be the one shown the whole time. Using the full cycle plugin fixes this as it updates the z-index so the current slide has the highest z-index thus showing the correct link. – DM. May 18 '11 at 14:39
  • Same fix worked for me. It would be nice if this fix was ported across to the cycle lite plugin – Mazatec Sep 01 '11 at 09:36
1

My guess would be that your links are positioned in relation to rotation_container rather than rotation_item, and so are hanging around in their given position. If you haven't already, try adding position: relative to the CSS for your rotation_item elements - that may very well fix your issue.

Ryan Kinal
  • 17,414
  • 6
  • 46
  • 63
  • Unfortunately this didn't do it :( I updated my main post with all my current CSS relative positions, including the one your recommended. Thanks for the help thus far. – Bartek Jul 30 '10 at 17:29
  • We might need more information then. Can you get a live demo up, or at least post your CSS and/or cycle settings? – Ryan Kinal Jul 30 '10 at 21:23
  • I'll setup a demo then, thanks. If there's a way I can contact you privately I'll send you the link to our staging site which has all the design as well. Let me know :) +1 Voted you for now, as well! – Bartek Jul 30 '10 at 21:32
  • I won't post my info here, but it's not too hard to find if you start with my profile. – Ryan Kinal Jul 31 '10 at 23:21