WordPress Producing Duplicate Images in Easy FancyBox

[mintertweed]

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!

[Paulie_D]

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

[Paulie_D]

Alternatively you could use nth-child

[TheDoc]

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: http://codepen.io/ggilmore/pen/bbd121b060400333d6ce7d886c47bbe6

[Paulie_D]

Perhaps ‘nth-of-type’

http://codepen.io/Paulie-D/pen/Cxwma

[TheDoc]

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

[TheDoc]

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;
}

[Author]

Posts