Issues with pretty photo and masonry media grid

I would like some help using pretty photo, I am using Highend theme and I have my galleries setup with the masonry media grid from visual composer. The buy buttons appear in the masonry media grid, but not after the "lazy loading" occurs. Also they seem to appear sporadicly, sometimes they work and sometimes not.

Next, when you click an image and pretty photo opens, they do appear but often they are inaccessible because the "next" and "previous" buttons impair the ability to click on them.

I know that Highend is not an officially supported theme, but pretty photo is, so I thought they would work with that at least. But it only sort-of works.

Please see my site for details. Here is a page with photos for sale: www.BrendanDekora.com/brendans-favori...
1 person has
this problem
+1
Reply
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Derek (Official Rep) January 29, 2016 23:34
    Hi Brendan,

    Thanks for your post. I took a look at the pages and confirmed the issues...here are what should be solutions for each:

    1. Fotomoto runs at page load time, so it's unfortunately not compatible with "lazy-loading" scripts when Fotomoto is in "automatic" mode (versus API mode where Buy Buttons can be programmed to appear where and when you want via JavaScript).

    The easiest solution here is to disable lazy-loading, but if you're good with JavaScript, you could use API mode instead and draw the Buy links in where and when desired.

    2. The Next/Previous links are covering up the Buy Buttons so they're not clickable. Depending on how the lightbox is programmed, sometimes we can use some custom CSS in Fotomoto to either move the Next/Prev links up a bit, or set the "z-index" declaration such that the Buy Button toolbar will overlay on top of the Next/Prev links.

    In your case I added some CSS to make the top edge of the Next/Prev sit exactly at the top of the image, and it seems to work nicely. Please flip through your images to make sure it works as desired, and here is the code I put in your Dashboard:

    a.pp_next, a.pp_previous {
    top: 0px !important;
    }

    I hope that all helps and kind regards,
    Derek
    • view 3 more comments
    • It happens on any of my gallery pages, including the page linked above in previous reply. It is very intermittent on when it works and when it doesn't.
    • Hi Brendan,

      I've browsed around the page at http://brendandekora.com/nature/#! and have seen the Buy links appear every time I load an image in the lightbox, so it appears to be working.

      Are you still seeing the issue on your end? If so please let me know what version of which web browser you're using on which platform and I can check that exact combination, but I think all is well here. Also, if there is a particular combination of steps you take to replicate the issue please let me know what those are so I can try the same combination.

      Thanks and kind regards,
      Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Thank you for checking it out, I was trying to say that the buy buttons always appear in the lightbox, and only sometimes appear in the normal page in the grid. Not the end of the world because they are working in the lightbox, but it would be nice to see them on the main page as well.
    • Ah, thank you for clarifying...that makes sense!

      So while it is possible with some lightboxes (like the one you're using) to have the Buy Buttons appear both on the thumbnail and on the larger version of the image in the lightbox, we typically recommend only having the Buy Buttons on the large-size version in the lightbox for these reasons:

      1. Fotomoto considers each image that has it's own URL to be a completely separate image, so if you have Buy Buttons on both the thumbnail and the large version, you'll see two different images for the same picture appear in your Dashboard. This gets confusing when trying to manage the images.

      2. Fotomoto shows available print sizes to your customers based on the aspect ratio of the image it detects. Many times thumbnails will be square or otherwise not at the same aspect ratio as the large-sized image, so if someone bought an image from the thumbnail, they may be able to order the wrong print sizes, which is a big hassle to fix.

      That said, if your thumbnails are at the desired aspect ratio and you don't mind the duplicates in the Dashboard, you can set the "Minimum Width or Height for Images" setting to something small enough where the thumbnails won't be ignored.

      Long answer to a seemingly-short question I know, but that should fully explain the situation and give you the choice on how you want things to work.

      I hope that helps and kind regards,
      Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned