Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 31, 2017 at 10:43 pm #770193
    webprodigy

    Hi there. Love the theme!!! I have a few questions about the masonry photo gallery.

    Is it possible to hide specific images within the gallery on mobile?

    How do I control the horizontal oriented images in the gallery? I can’t get them to span multiple columns.

    Can we hide the mouseover title/caption for specific images?

    What is the CSS to make the mouseover title/caption slightly transparent?

    April 1, 2017 at 7:17 am #770249
    John Torvik

    Hey webprodigy,

    Please, I need that you share your website link (with the gallery).

    Best regards,
    John Torvik

    April 3, 2017 at 5:17 am #770883
    webprodigy

    Here’s the link to a page I’m using as my sandbox. The “Portfolio Images” section is the one that all of the questions pertain to.

    Galleries

    April 5, 2017 at 11:34 am #772418
    Nikko

    Hi,

    This is to make the caption slightly transparent:

    .av-masonry-container figcaption.av-inner-masonry-content.site-background {
    background: rgba(255,255,255,0.8) !important;
}

    As for hiding specific images on mobile and hide specific images’ mouseover title/caption, we need to know what are those images so we can give you a custom css code.

    Best regards,
    Nikko

    April 5, 2017 at 6:09 pm #772711
    webprodigy

    Hi Nikko,

    Thank you for the CSS code for the transparency.

    Backtracking to the other questions, we’ll use this page as a reference point: http://webprodigy.com/galleries/

    1.
    Is it possible to hide specific images within the gallery on mobile? Let’s just pick this one for demonstration sake:

    2.
    How do I control the horizontal oriented images in the gallery? I can’t get them to span multiple columns. This image isn’t spanning:

    3.
    Can we hide the mouseover title/caption for specific images? Let’s use this image for demonstration sake:

    4.
    And one more new question: If I’m displaying 12 images in the gallery but only want to display 6 on mobile, is that possible?

    April 9, 2017 at 12:30 pm #774907
    Victoria

    Hi webprodigy,

    You can add styles to specific images via masonry item id, hide like so:

    
#av-masonry-1-item-7905 {
    display:none;
}

    But the space for it stays and it’s a solution where you manually control display.
    For the image to span over 2 columns it has to be twice as wide as one column, so you need to prepare images of certain dimensions.
    If you need to show only certain images, you can uses custom taxonomy options and tag only images that you want to show in this gallery.

    As for showing 6 images on mobil you could make 2 masonries and show one on desktop, and the other one on mobile.

    All these things require much customization, you might want to consider hiring a developer to help you with this.
    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.