1 Replies - 345 Views - Last Post: 29 November 2012 - 10:03 PM

#1 ITJobSeeker  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 22-October 09

Questions about making lightbox for ads/opt-ins

Posted 29 November 2012 - 02:22 PM

I would like to create a "plugin" (not sure what else to call it right now) that allows me to display a lightbox with content and display that at various intervals using data stored in a cookie. I'm talking about something like Aweber uses to display opt-in forms for email newsletters. This is ultimately what I'd like to use it for. I know that there are lightbox tutorials all over Youtube and I can use that for help there. But I don't want to display a lightbox EVERY time the page loads. For example, I only want to display it maybe once every couple of days or so. I'm assuming, making a cookie is the best way to do this. I'm just not sure exactly where to start, what languages to use, and so on.

Here's what I do know
I can create a lightbox using JQuery and CSS.
I can make cookies either in PHP or Javascript, but not sure which ones.
Cookies live on user's computer and can store info, but not sure how to make those variables/info interact with web page. I know this all depends on the language used and what kind of site you're talking about, and if a CMS is used, etc.

I'm not looking for help with specific code yet, but just wondering if someone could provide an overall plan of attack for this project. Perhaps some bullet points of steps to take. Thanks everyone, I appreciate it.

Is This A Good Question/Topic? 0
  • +

Replies To: Questions about making lightbox for ads/opt-ins

#2 ITJobSeeker  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 22-October 09

Re: Questions about making lightbox for ads/opt-ins

Posted 29 November 2012 - 10:03 PM

Ok, nobody jumped on this one yet, but I got started. Here is the code from the lightbox tutorial I just completed from a Youtube video.

<!doctype html>
<html>
<head>
<title>Lightbox</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
	
	.backdrop {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: .0;
		filter: alpha(opacity=0);
		z-index: 50;
		display: none;
	}
	
	.box {
		position: absolute;
		top: 20%;
		left: 30%;
		width: 500px;
		height: 300px;
		display: block;
		background: #fff;
		z-index: 51;
		padding: 10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border-style: solid;
		-moz-box-shadow: 0px 0px 5px #444444;
		-webkit-box-shadow: 0px 0px 5px #444444;
		box-shadow: 0px 0px 0px #444444;
		display: none;
	}
	
	.close {
		float: right;
		margin-right: 6px;
		cursor: pointer;
	}

</style>

<script type="text/javascript">
	$(document).ready(function(){
		
		$('.lightbox').click(function(){
			$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
			$('.box').animate({'opacity':'1.00'}, 300, 'linear');
			$('.backdrop, .box').css('display', 'block');
		});
		
		$('.close').click(function(){
			close_box();
		});
		
		$('.backdrop').click(function(){
			close_box();
		});
		
		function close_box(){
			$('.backdrop, .box').animate({'opacity':'.0'}, 300, 'linear', function(){
				$('.backdrop, .box').css('display', 'none');
			});
		}
		
	});
	
</script>

</head>
<body>
<h1>Lightbox Page</h1>

<p><a href="#" class="lightbox">Open Lightbox</a></p>
<div class="backdrop"></div>
<div class="box"><div class="close">X</div>This is the lightbox!!!!</div>

</body>
</html>


So now, should I turn that entire block of javascript into a single function and call it based on data from the cookie? For instance, I'd like to place a cookie on the client machine, and if the cookie has "expired" (not sure if that's the right word), call the function to launch the lightbox.

For example, let's say a visitor visits on Monday and they see my light box ad. I don't want them to see it again until Wednesday. Can someone give me guidance here.

Thanks for any help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1