Using Lightboxes with dynamic urls (AJAX #!)

18.06.2017 14:11:27

These days are becoming popular the websites that load part of their content with AJAX. When you click on a link in one of those websites, only a portion of the page is loaded instead of the entire page.

This article explains how to add lightboxes on those types of website.


An easy way to spot a website using AJAX is by looking at the urls for the #! symbols. For instance, if the home url of a website is www.example.com/demo and you click on a link to load section A, the url may change to something like this: www.example.com/demo#!sample-a

So, you may be wondering, what does it has to do with TuriTop?

When TuriTop loads the booking widget by a lightbox, the browser tells TuriTop the refering url, but it ignores anything beyond the # tag. 

That's how browsers work at the moment, they haven't caught up with AJAX technologies on this regard.

The result is that, when loading a TuriTop lightbox and click on the "close" button, it works perfectly as long as there are no #! characters in the url, but if you do have urls with #!, it may send you to the home page ( e.g. www.example.com/demo ) instead of the specific url where the user clicked on the lightbox link (e.g. www.example.com/demo#!section-a )

To solve this problem, TuriTop lets you add an extra paramenter to the lightbox url to tell our booking system where exactly you want to send the user when clicking on the "close" link.


It works in the following way


Step 1

First we need to copy the url where we are going to place the lightbox link, for example, www.example.com/demo#!section-a

Step 2

Next, visit https://www.base64encode.org/ and paste the url to get the encrypted version of it, which will look like aHR0cDovL3d3dy5leGFtcGxlLmNvbS9kZW1vIyFzZWN0aW9uLWE=

Important: Make sure that the url contains http:// or https:// at the beginning before encoding, otherwise it will not work (Forbidden screen).

Step 3

Add this code at the end of the lightbox url, for example http://app.turitop.com/light/box/D1/P1/en/aHR0cDovL3d3dy5leGFtcGxlLmNvbS9kZW1vIyFzZWN0aW9uLWE=

Let's Get In Touch!


Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!

(+34) 922 394 632