I am trying to place a popeye (like a inline lightbox) within a jquerytools vertical scrollable. the popeye does popup as it should but when I try to scroll up or down, the popeye stay the same place as everything else are scrolling.
BTW, I am trying this on squarespace and the code are cut and paste from other sample sites.
I was looking at this and it appears that popeye attaches the image to the body of the page. I tried using CSS to make it work, but alas there was no simple solution. So I ended up modifying the popeye plugin.
This demo is the result of my modifications (I modified the vertical scroll demo). There are a few things to note:
- The popeye image must now be wrapped inside a div that has a style of "position: relative"
- One additional CSS definition needs to be included to prevent expanded popeye windows from showing up under the popeye image directly below it.
- The very last image in the demo needs a spacer. The reason is when you expand the popeye, it would otherwise be hidden inside the vertical scroll window.
Here is an example basic HTML structure:
<div class="cell"> <div class="subcell-left"> <div class="popeye"> <ul> <li> <a href="Big-Image.jpg"> <img src="Thumbnail-Image.jpg" alt="Add Caption Text Here" /> </a> </li> </ul> </div> <!-- end popeye div --> </div> <!-- end subcell-left div --> <div class="subcell-right"> <h3>Header</h3> <p> Whatever text you want to add goes here <p> <a href="#">Link for more info</a> </p> </div> <!-- end subcell-right div --> </div> <!-- end cell div -->
I also zipped all the files used in the demo for you to download if you need.
I am also kinda new to CSS but what I noticed was that the div for popeye (with id #popeye1) is being added directly to body element. Please try to add the div for popeye inside the div with id #contentWrapper.
and then please tell the results.