Lightbox on page open

[Oasis]

Thanks Jade,

No I want the lightbox to close and the link to open within the normal browser window as if you clicked the link within the menu. Does that make sense? I don’t know how to explain it any better, sorry

[rad]

Hi there,

Hmm, it’s a bit confusing. You mean just link it to the image without lightbox nor opening a new window? How about removing the lightbox? The link will then behave as a normal link.

Thanks!

[Oasis]

Hi Rad,

Hopefully I can make this clearer:

When I click on the middle circle it links to another page within my site:

This page opens within the lightbox and I’m left with this - a page within a page:

How can I avoid this and get the page to open in normal browser window and not the lightbox (I don’t want it to open a new window either)

Thanks

[jade]

Hi there,

Please try to add a common class to the three linked image on the lightbox then udpate the code previously given by @albrechtx to this (assuming that the class you have added is linked-page) :

jQuery(document).ready(function($){
	
   setTimeout(function() {
        $('#splash').click();
    }, 5000);

    $('.linked-page').attr('target', '_parent');
});

Hope this helps.

[Oasis]

Works perfectly. Thanks Jade

[jade]

Awesome! You’re welcome @Oasis.

[Oasis]

One last thing… If I wanted to use my orange circle button to close the lightbox what would I need to do?

I have had a look at implementing something like this:

Topic: Close button in lightbox | Themeco Community

But can’t quite get it to work

[christopher]

I tried my best to give you the code needed. The one that I wanted to do was to trigger the lightbox close button click event when the orange button is clicked:

var closeBtn = jQuery(".ilightbox-close");
jQuery(document).on('click', '.el13.x-image.splash', function(event) { 
    event.preventDefault(); 
    closeBtn.trigger('click');
});

The problem is that the Javascript code is not working as the orange circle is inside the iFrame which is loaded from another page and this page is not accessing that specific element to be able to assign the click event.

I am not saying it is not possible to do so but it is not a thing that we as support staff be able to implement for you. You will need to hire a developer or find a way to access elements inside an iFrame.

Thank you for your understanding and sorry that we could not find a solution.

[Oasis]

[OK, thanks Christopher. I appreciate that. Thanks for the quick response

[jade]

You’re welcome.

[Oasis]

I know this might still be beyond the support and if so that’s fine but I was wondering if I could get this to work by using something like this:

var (function {
  if (window.location.href.indexOf('http://wordpress.oasisdesignstudio.co.uk/#aboutus')) {
    //Hide the element.
    jQuery('#splash').hide();
  }
});

to hide one of the elements needed for the execution of:

jQuery(document).ready(function($){
	
   setTimeout(function() {
        $('#splash').click();
    }, 1000);

    $('.splash').attr('target', '_parent');
});

I tried using IIFE to make this happen before the page loads but I haven’t quite got it working. Is this possible do you think?

[jade]

Hi there,

This is a tricky thing to accomplish because you are loading the page in a lightbox where the buttons are. The thread that you have linked seem to be related but it is easier to implement because the button that closes the lightbox is on the same page where the lightbox is added so you can simply add the code that triggers the lightbox to close when the button element is clicked as they are on the same page. This does not work the same way as your setup because the links are loaded from a separate page through an iFrame in that lightbox.

It would be best to seek help from a developer to accomplish this as this thread is digging in deeper with the customization which we unfortunately do not support.

Thank you for understanding.