Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #601649

    Hi support,

    I am using a child theme for Enfold and I’m having some issues with a few elements that automatically get grouped together in the lightbox overlay that I need to keep from being in the same group.

    The first issue is with the full width slider element and its caption buttons. I need a way to keep the buttons for each slide to only opening up a group for their own slide and not include all the button image links from the entire slider (all slide caption buttons).

    The second issue is with a page that includes multiple “button” shortcodes of floor plan images that are broken up into different sections within the page layout builder. As they are floor plans specific to certain house styles I need to keep them separate in the lightbox. However, clicking on any of the floor plan buttons, the lightbox overlay loads all the buttons’ floor plan images for the whole page.

    So, I was wondering if there was a way to avoid this by possibly disabling the automatically added lightbox effect for these items via a jquery selector that targets the elements and either disable then re-enable them with a custom rel attribute or if I can somehow add a custom rel selector to force them into a group.

    I’ve tried a few methods based on feedback on other Enfold forum topics but nothing seems to be working and the default behavior overrides my custom rel attributes every time. Specifically, via a custom javascript file, I’ve tried adding the noLightbox class to the items and they still trigger the lightbox and I’ve also tried adding custom rel attributes to the different groups and the lightbox overlay continues to load all the items.

    Thanks for your help.

    #603700

    Hi pfalso!

    not sure what you mean, as it is quite difficult to imagine what you are describing. Please make things clear by using screenshots (imgur.com, dropbox) and precise links. I can’t see any issues on the links you have provided.

    Check out this thread, as it solves same issue you might have: https://kriesi.at/support/topic/tabs-shifting-showing-wrong-images-from-different-tab-in-ligthbox/#post-528820

    Regards,
    Andy

    #603995

    Thanks for the info/link, Andy, that recommendation to add ‘avia-gallery’ as a custom CSS class to the different sections of buttons on the “Brighton Mews of Park Ridge” page worked perfectly.

    However, there is no way to add custom classes like this to the “Full-Width Slider” element’s captions so I tried adding it via javascript to each caption container via jQuery:

    $(‘.avia-fullwidth-slider .slideshow_inner_caption’).addClass(‘avia-gallery’);

    … and the buttons within each caption are still loading a lightbox overlay with the images from each captions’ buttons when I need them to be in separate lightbox overlays.

    This is on the home page of the website I sent you previously and the buttons are in each of the slide’s caption areas named “View Site Plan”.

    Is there another work-around for the slider?

    Thanks!

    #604004

    Hey!

    not sure what you mean and what you want to achieve. Can you be very clear and precise please? Screenshots and links showing the result you want to achieve or at least the issue you have would help a lot. However, it sounds to me that this is out of our support scope.

    Best regards,
    Andy

    #604018

    Hi Andy,

    I posted the link to the Home page in the private data section of my initial post. The site is behind htaccess login right now and is under development so you’ll need to use the info (also provided in the private data section of initial post) to view the site.

    Visit the site I provided a link for previously and on the “Home” page (what will load when you access the link I provided), there is a “Full-Width Slider” layout builder element below the main navigation. Each “slide” within the slider has a caption that has two buttons added to it. The blue “View Site Plan” button in each slide is linked to an image. Currently, clicking on any of the “View Site Plan” buttons within the slider will load a lightbox gallery containing all of the slide’s caption button “View Site Plan” images. I need it to only load the single image from the specifically clicked on button.

    ER James Slider Caption Button

    Thanks,
    Chris

    #604222

    Hi!

    However, there is no way to add custom classes like this to the “Full-Width Slider” element’s captions so I tried adding it via javascript to each caption container via jQuery:

    $(‘.avia-fullwidth-slider .slideshow_inner_caption’).addClass(‘avia-gallery’);

    … and the buttons within each caption are still loading a lightbox overlay with the images from each captions’ buttons when I need them to be in separate lightbox overlays.

    Instead of enabling the slider button, add the html markup of those buttons in the Caption field.

    <a href="http://erjames.wpengine.com/our-communities/brighton-mews-of-park-ridge/" (hosted on WPengine) class="avia-slideshow-button avia-button avia-color-grey avia-multi-slideshow-button" data-duration="800" data-easing="easeInOutQuad">View Models</a>
    
    <a href="http://erjames.wpengine.com/wp-content/uploads/2016/03/brighton-mews-site-plan-457x1024.jpg" class="avia-slideshow-button avia-button avia-color-blue avia-multi-slideshow-button avia-slideshow-button-2 lightbox-added" data-duration="800" data-easing="easeInOutQuad">View Siteplan</a>

    You can then add the custom class attribute manually.

    Cheers!
    Ismael

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