Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 16, 2022 at 3:22 pm #1348560
    wedesignshanghai

    Hi,
    I am using the catalog element for a food and drinks menu, following the example of the Enfold Restaurant Demo.
    Would it be possible to disable the controls (mfp-arrow) and all slide effects on the pop up images?
    The idea is to display only the image of a specific food menu item, preventing the users to slide to the next one.

    This is our menu page: https://meepleopolis.com/food-drinks/
    Bypass link in private.

    Thanks!

    April 16, 2022 at 7:22 pm #1348573
    Mike

    Hey nasi,
    Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    .mfp-container button.mfp-arrow {
	display: none;
}
.mfp-container img.mfp-img {
	pointer-events: none;
}
#top .mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: default;
}
.mfp-bottom-bar .mfp-counter {
	display: none;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 18, 2022 at 4:42 am #1348660
    wedesignshanghai

    Hi Mike,

    Thanks for the code. It works, however it also disables the functions to all image galleries across the site.
    I need this function to be applied only to the Catalog Element that is used on the Food and Drinks page of the site.
    I tried to add a Custom CSS Class to the specific elements but it doesn’t seem to react.

    This is what I added:

    /* DISABLE GALLERY FUNCTIONS ON CATALOG ELEMENT (FOOD AND DRINKS PAGE ONLY) */

    .elnasi-gallery-noslide {

    .mfp-container button.mfp-arrow {
    display: none;
    }
    .mfp-container img.mfp-img {
    pointer-events: none;
    }
    #top .mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: default;
    }
    .mfp-bottom-bar .mfp-counter {
    display: none;
    }
    }

    Cold you please have a look ?

    Thanks!!

    April 18, 2022 at 1:09 pm #1348682
    Mike

    Hi,
    Thanks for the feedback, the lightbox div in the DOM opens outside the Catalog Element, so we could limit it to the specific page like this:

    #top.page-id-122 .mfp-container button.mfp-arrow {
	display: none;
}
#top.page-id-122 .mfp-container img.mfp-img {
	pointer-events: none;
}
#top.page-id-122 .mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: default;
}
#top.page-id-122 .mfp-bottom-bar .mfp-counter {
	display: none;
}

    Best regards,
    Mike

    April 19, 2022 at 4:56 am #1348724
    wedesignshanghai

    That did the trick.
    Thanks Mike !!

    April 19, 2022 at 11:07 am #1348760
    Ismael

    Hi,

    Great! Glad we could be of help. Please do not hesitate to open another thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Catalog Element display a single popup image’ is closed to new replies.