Home / Topics / Responsive Lightbox / Close TosRUS lightbox when clicking outside an image – & enlarging close button

Close TosRUS lightbox when clicking outside an image – & enlarging close button

We're here to help.

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • 23 May 2017 at 11:21 #18022
    Nick BD
    Participant

    I need to be able to close the TosRUS lightbox when clicking outside an image and not just when the visitor clicks the very small ‘close’ button. The configuration allows for this in the TosRUS documentation (below), but it is not reflected in the Responsive Lightbox Options.

    http://tosrus.frebsite.nl/configuration.php
    onClick String The behavior when clicking outside of an image.
    Default value: “toggleUI”.
    Possible values: “toggleUI” and “close”.

    I found a post that claimed to have found a solution, but it is probably out of date now – I certainly can’t get it to work:

    https://wordpress.org/support/topic/toggleui-with-rostus-of-responsive-lightbox/#post-9158967

    Please could anyone help? I need to:

    1. Be able to click outside an image to close the TosRUS lightbox – and
    2. Enlarge the ‘Close’ button

    23 May 2017 at 11:52 #18023
    Nick BD
    Participant

    OK – so I’ve managed to make the ‘CLOSE’ button much bigger by adding the following CSS. It’s just closing the lightbox when clicking outside the image that eludes me… any ideas?

    .tos-close {
    opacity: 1 !important;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
    }
    .tos-close span:before {border-bottom: 4px solid #fff !important;border-left: 4px solid #fff !important;}
    .tos-close span:after {border-top: 4px solid #fff !important;border-right: 4px solid #fff !important;}
    .tos-close span:after, .tos-close span:before {width: 16px !important;height: 16px !important;}

    23 May 2017 at 15:00 #18025
    Bartosz
    Keymaster

    For now just modify front.js file.

    Find this:

    caption: {
	add: true,
	attributes: [ "title" ]
},

    and add that line right after:

    wrapper: {
	onClick: 'close'
}

    We’ll provide ann option for this in the next release of RL.

    24 May 2017 at 17:06 #18042
    Nick BD
    Participant

    Excellent – thanks – the solution has also been posted here, updated for version 1.7.0:
    https://wordpress.org/support/topic/toggleui-with-rostus-of-responsive-lightbox/#post-9163224

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