Grow your CSS skills. Land your dream job.

WordPress Producing Duplicate Images in Easy FancyBox

  • # May 9, 2013 at 9:36 am

    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!

    # May 9, 2013 at 9:47 am

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

    # May 9, 2013 at 9:49 am

    Alternatively you could use nth-child

    # May 9, 2013 at 9:52 am

    Yeah, I think :nth-child will do the trick, because if I were to add left margin and remove it from the first child, I would still have to define the beginning of each row. Okay, one question answered. On to the next one! Thanks, @Paulie_D!

    # May 9, 2013 at 10:02 am

    @Paulie_D: Hrm, I used this to target the fifth child and every fifth child:

    .image-box:nth-child(5n+5)

    And it removes the right margin from the first child. Not sure what is happening there. So, I then targeted just the fifth child:

    .image-box:nth-child(5)

    And it still places the fifth child on the second line. Maybe I am not doing this right.

    Visit here to see what I mean with the first bit of code.

    # May 9, 2013 at 11:28 am

    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

    # May 9, 2013 at 11:46 am

    Perhaps ‘nth-of-type’

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

    # May 9, 2013 at 12:10 pm

    @TheDoc: I used this…

    .gallery {
    width: 970px;
    height: 100%;
    margin: 0 -10px 0 0;
    }

    And it works like a charm. Thank you for the suggestion! As for the solution to my first question, this is what my HTML code looks like…

    The Fall

    Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna…

    So, the image and details are in two separate divs. Is it just a simple wrapping an anchor tag around the two divs?

    # May 9, 2013 at 12:11 pm

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

    # May 9, 2013 at 12:13 pm

    Welp, I believe that solves everything. Thank you muchly, @Paulie_D and @TheDoc.

    # May 9, 2013 at 5:35 pm

    @TheDoc, okay, I wrapped the anchor tag around the h4 and p tag, but I need to know if what I am experiencing now is a problem with my code or an issue with the WordPress plugin I am using.

    Basically, when you click on one of the images and begin to scroll through them using the arrow buttons on the screen, each image appears twice. Once with the alternative text displayed as the title of the piece and a second time without the title displayed. Here is what my HTML looks like:

    Before, I was stretching the anchor tag over two divs and I thought that was what was causing it, but now I have a single div and it’s still happening.

    Is this my fault or do I need to contact the creator of the plugin? Thanks in advance!

    # May 9, 2013 at 5:46 pm

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

    # May 9, 2013 at 5:53 pm

    Just checked all the p tags. They all seem to be closed. Also, when I don’t encapsulate the h4 and p it doesn’t duplicate the image, which furthers your point. But I don’t see any un-closed tags. But if I use the bit of code you posted, that goes around all of that anyway, so I’ll give that a go. I’ll edit this message once I’m finished.

    Edit: That fixed it. Now, I just need to add alt="title" to all of the separated links and it will be good to go! I don’t know what I would do without this forum. Thanks, @TheDoc.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".