I'm new on web developing.
I need a sample code that displays a clickable image in a lightbox on page loading with a close button. Also, if there's a way, I need it to show on desktop browsers only (avoiding any mobile), and display 5x per day per user IP.
Can someone help?
Thanks.
Lightboxes are just DIV structures that are boxes within boxes (divs within divs), and the outermost div has the css position:fixed;z-index:2;
Caveats to the above: (a) position can also be absolute, but then the lightbox will scroll with the page, and (b) z-index of the lightbox should be higher than the z-index of any other elements that should be underneath the lightbox.
As with any other HTML elements on a page, the lightbox div structure will be visible unless explicitly made invisible (for e.g. using display:none; or jQuery hide() or fadeOut() etc) - so the lightbox will be visible by default, and then you can use javascript/jQuery to hide it on button click:
$('.lb_close').click(function(){
$('#overlay, #lb').fadeOut();
});
$('#lb_body_top img').click(function(){
alert('You clicked the picture');
});div{position:relative;box-sizing:border-box;}
#overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:black;opacity:0.7;z-index:1;}
#lb{position:fixed;top:30px;left:20%;width:300px;height:300px;z-index:2;}
#lb_hdr{height:30px;width:100%;overflow:hidden;background:#333;color:white;}
#lb_hdr_title{float:left;height:100%;width:90%;padding:5px;}
#lb_hdr_close{float:left;height:100%;width:10%;}
.lb_close{padding:5px;background:dodgerblue;color:white;text-align:center;cursor:pointer;}
#lb_body{height:250px;width:100%;}
#lb_body_top{height:200px;width:100%;}
#lb_body_bot{height:50px;width:100%;background:white;}
#lb_bot_btn{position:absolute;right:20px;height:50px;width:80px;}
button{width:100%;height:30px;background:dodgerblue;color:white;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="overlay"></div>
<div id="lb">
<div id="lb_hdr">
<div id="lb_hdr_title">Here is the title</div>
<div id="lb_hdr_close"><div class="lb_close">X</div></div>
</div><!-- #lb_hdr -->
<div id="lb_body">
<div id="lb_body_top">
<img src="http://placeimg.com/300/200/animals">
</div><!-- _lb_body_top -->
<div id="lb_body_bot">
<div id="lb_bot_btn">
<button class="lb_close">Close</button>
</div><!-- #lb_bot_btn -->
</div><!-- #lb_body_bot -->
</div><!-- #lb_body -->
</div><!-- #lb -->
<div id="wrap">
Three Thousand Year Old Wisdom Literature<br><br>
1 Happy is the man with a level-headed son; sad the mother of a rebel.
2 Ill-gotten gain brings no lasting happiness; right living does.
4 Lazy men are soon poor; hard workers get rich.
5 A wise youth makes hay while the sun shines, but what a shame to see a lad who sleeps away his hour of opportunity.
6 The good man is covered with blessings from head to foot, but an evil man inwardly curses his luck.
7 We all have happy memories of good men gone to their reward, but the names of wicked men stink after them.
8 The wise man is glad to be instructed, but a self-sufficient fool falls flat on his face.
9 A good man has firm footing, but a crook will slip and fall.
11 There is living truth in what a good man says, but the mouth of the evil man is filled with curses.
12 Hatred stirs old quarrels, but love overlooks insults.
13 Men with common sense are admired as counselors; those without it are beaten as servants.
14 A wise man holds his tongue. Only a fool blurts out everything he knows; that only leads to sorrow and trouble.
15 The rich man’s wealth is his only strength. The poor man’s poverty is his only curse.
17 Anyone willing to be corrected is on the pathway to life. Anyone refusing has lost his chance.
18 To hide hatred is to be a liar; to slander is to be a fool.
19 Don’t talk so much. You keep putting your foot in your mouth. Be sensible and turn off the flow!
20 When a good man speaks, he is worth listening to, but the words of fools are a dime a dozen.
21 A godly man gives good advice, but a rebel is destroyed by lack of common sense.
23 A fool’s fun is being bad; a wise man’s fun is being wise!
24 The wicked man’s fears will all come true and so will the good man’s hopes.
25 Disaster strikes like a cyclone and the wicked are whirled away. But the good man has a strong anchor.
26 A lazy fellow is a pain to his employers—like smoke in their eyes or vinegar that sets the teeth on edge.
</div><!-- #wrap -->If you just want to use a plugin for the lightbox, I recommend using jQueryUI and its dialog() method:
if else if statement on mousedown event
https://jqueryui.com/dialog/#modal-confirmation
Here is a solution to detecting if the browser is mobile:
https://stackoverflow.com/a/11381730/1447509
To restrict displaying the lightbox to 5x per day, you can use localstorage. Here are some resources:
https://www.smashingmagazine.com/2010/10/local-storage-and-how-to-use-it/
http://www.webdesignerdepot.com/2013/04/how-to-use-local-storage-for-javascript/
All together, as one file.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
div{position:relative;box-sizing:border-box;}
#overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:black;opacity:0.7;z-index:1;}
#lb{position:fixed;top:30px;left:20%;width:300px;height:300px;z-index:2;}
#lb_hdr{height:30px;width:100%;overflow:hidden;background:#333;color:white;}
#lb_hdr_title{float:left;height:100%;width:90%;padding:5px;}
#lb_hdr_close{float:left;height:100%;width:10%;}
.lb_close{padding:5px;background:dodgerblue;color:white;text-align:center;cursor:pointer;}
#lb_body{height:250px;width:100%;}
#lb_body_top{height:200px;width:100%;}
#lb_body_bot{height:50px;width:100%;background:white;}
#lb_bot_btn{position:absolute;right:20px;height:50px;width:80px;}
button{width:100%;height:30px;background:dodgerblue;color:white;}
</style>
<script>
$(function(){
$('.lb_close').click(function(){
$('#overlay, #lb').fadeOut();
});
$('#lb_body_top img').click(function(){
alert('You clicked the picture');
});
});//END document.ready
</script>
</head>
<body>
<div id="overlay"></div>
<div id="lb">
<div id="lb_hdr">
<div id="lb_hdr_title">Here is the title</div>
<div id="lb_hdr_close"><div class="lb_close">X</div></div>
</div><!-- #lb_hdr -->
<div id="lb_body">
<div id="lb_body_top">
<img src="http://placeimg.com/300/200/animals">
</div><!-- _lb_body_top -->
<div id="lb_body_bot">
<div id="lb_bot_btn">
<button class="lb_close">Close</button>
</div><!-- #lb_bot_btn -->
</div><!-- #lb_body_bot -->
</div><!-- #lb_body -->
</div><!-- #lb -->
<div id="wrap">
Three Thousand Year Old Wisdom Literature<br><br>
1 Happy is the man with a level-headed son; sad the mother of a rebel.
2 Ill-gotten gain brings no lasting happiness; right living does.
4 Lazy men are soon poor; hard workers get rich.
5 A wise youth makes hay while the sun shines, but what a shame to see a lad who sleeps away his hour of opportunity.
6 The good man is covered with blessings from head to foot, but an evil man inwardly curses his luck.
7 We all have happy memories of good men gone to their reward, but the names of wicked men stink after them.
8 The wise man is glad to be instructed, but a self-sufficient fool falls flat on his face.
9 A good man has firm footing, but a crook will slip and fall.
11 There is living truth in what a good man says, but the mouth of the evil man is filled with curses.
12 Hatred stirs old quarrels, but love overlooks insults.
13 Men with common sense are admired as counselors; those without it are beaten as servants.
14 A wise man holds his tongue. Only a fool blurts out everything he knows; that only leads to sorrow and trouble.
15 The rich man’s wealth is his only strength. The poor man’s poverty is his only curse.
17 Anyone willing to be corrected is on the pathway to life. Anyone refusing has lost his chance.
18 To hide hatred is to be a liar; to slander is to be a fool.
19 Don’t talk so much. You keep putting your foot in your mouth. Be sensible and turn off the flow!
20 When a good man speaks, he is worth listening to, but the words of fools are a dime a dozen.
21 A godly man gives good advice, but a rebel is destroyed by lack of common sense.
23 A fool’s fun is being bad; a wise man’s fun is being wise!
24 The wicked man’s fears will all come true and so will the good man’s hopes.
25 Disaster strikes like a cyclone and the wicked are whirled away. But the good man has a strong anchor.
26 A lazy fellow is a pain to his employers—like smoke in their eyes or vinegar that sets the teeth on edge.
</div><!-- #wrap -->
</body>
</html>
