Transparent overlay loads on url value

Hi,

I’m looking to load an overlay on a page that has an image in the middle of it, that loads if a variable in the url has a certain value, does anyone have the code handy for this action.

Here’s the jQuery you’ll require:

if(window.location.href.indexOf("YourValueHere") > -1) {
    $('.overlay').show();
}

Make sure the overlay class/ID is hidden by default in the CSS, and that the URL value is unique, wouldn’t want it triggering on another page that shares the same value. You could add more conditions, such as if the body has a certain class or ID, just to be safe.

Cheers Simon,

I was just about to post that I have set lightbox up, and tested it and it works fine using the following link

<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /></a>

So rather than using the link, I need to use your code with lightbox, is that possible?

And the url will be something like - hotel.php?hotel_ID=247424&Type=3&Resort=258&utm_source=facebook

The most important bit in relation to this is

&utm_source=facebook

Cheers

It will always load the same image from the server, so that never changes.

Or you may think its better to go down a different route, rather than using lightbox, which in honesty is causing some conflict with other elements on the page

So, from what I’ve gathered from your response, you’re effectively looking for an image modal system to load on a page matching a URL string, which features an overlay over the body and an image front-and-centre. This is basically what Lightbox is for, but it’s not difficult to build a custom solution if you’re experiencing troubles with Lightbox. Would you like this?

That’s exactly it Simon,

We basically showcase hotels in facebook, and if they click that hotel to come to our website I want to show an image that says something like ‘Facebook Favorite’, that bit is sorted and it seems lightbox does the job, its just causing problems with other image script on the page, and it needs to load up according to that variable within the url

Give this a try:

HTML:

`


`

CSS:

body.no-scroll{
	overflow-y: hidden;
}

.overlay{
	display: none;
	position: fixed;
		left: 0;
		top: 0;
	margin: auto;
	z-index: 100000;
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100vh;
	text-align: center;
}

.overlay-image{
	position: absolute;
		left: 0;
		right: 0;
		top: 50%;
	margin: auto;
	max-width: 90%;
	width: auto;
	height: auto;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

JQUERY:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

	// Trigger modal if window value equals

	if(window.location.href.indexOf("&utm_source=facebook") > -1) {
		$('body').addClass('no-scroll');
		$('.overlay').show();
	}

	$(document).on('click', 'body.no-scroll', function (e) {
		$('.overlay').hide();
		$('body').removeClass('no-scroll');
	});

});
</script>

Wasn’t sure if you wanted the overlay entirely transparent or with a faded colour. Let me know your preferences.

Made a slight hiccup with the no-scroll, corrected now.

2 Likes

Ah magic, that is absolutely perfect, thank you Simon…:wink:

No worries. :wink:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if(window.location.href.indexOf("&utm_source=facebook") > -1) {
	$('body').addClass('no-scroll');
	$('.overlay').show();
}

$(document).on('click', 'body.no-scroll', function (e) {
	$('.overlay').hide();
	$('body').removeClass('no-scroll');
});

});
</script>

Using the code above, how do I activate the overlay above with a button click on the page, instead of the value of the url

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.