The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS WordPress Producing Duplicate Images in Easy FancyBox

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #44655

    Edit: Scroll down to my most recent post to see what’s up. Thanks!

    Okay, so I have two fairly simple questions. I am working on a gallery, here. Scroll down until you see the photographs.

    On rollover, some information pops up about each individual photograph, but I lose the image link when this happens. You have to be quick to click the image before the text scrolls up to see the image in full. How do I retain the link to the image even after the text scroll?

    Secondly, I want to have five pictures span the width of the site. I measured everything so that I could do this. I am using :last-child so that the image at the end of a row will not have ten pixels of right margin. But how do I define the last child of a row? I tried to create a container div called image-row, but that seemed to screw up my website for some reason. I know I can create a second div called something like image-box-last and just give it its own properties and use that div at the end of each row in the HTML, but is there a better way to do this?

    Thank you in advance!


    Instead of adding right margin and removing it from the last one, add left margin and remove it from the first one?


    Alternatively you could use nth-child


    As for your first question, simply alter your markup and have the anchor wrap around everything.

    I have a little trick for you for your second problem. Basically, you wrap all of the image divs in a wrapper, call it whatever you like. Give that div enough room to fit all of your divs + margins inside of it but then give it a negative margin to bring it back to 960px.

    It’ll look something like this:


    Perhaps ‘nth-of-type’


    Yup. Or you could wrap the anchor around your `h4` and `p` in the `.image-details` div as well.


    I think you have unclosed `

    ` tags so for whatever reason Chrome is listing the link twice in the Inspector (which would certainly cause the plugin to load the image twice).

    Also, you still have a problem that when the thing scrolls, you have to hover over the text to actually click the link.

    I’d probably go like this:

    and the CSS:

    .image-container {
    position: relative;

    .image-container a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.