Help creating a custom lightbox

applytobecome · December 28, 2015, 3:19am

Hi i am fairly new to coding, i have been coding for about 6 months now
I am currently trying to develop my own custom made lightbox, just for the fun of it!

Okay so my problem’s is

How do i make the “pop-up image” vertically/Horisontally in the middle/center of the whole page by all times? This has be somehow automated since there will be different size pictures in the lightbox gallery so i have had bad experince just giving it some pix or % ?
How do i make my “Next”/“Previous” buttons work? i would like a fade-in/fade-out effect of each image, only 1 img in there now but i would like to add more?

Anyway try your own photos in this code then

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">
.page-overlay{
position:fixed;
left: 0px;
top: 0px;
height:100%;
width:100%;
text-align:center;
z-index: 4;
display:none;
}
 
.lightwrap {
position:fixed;
top: 0px;
height: 100%;
width: auto;
z-index: 4;
text-align:center;
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 
.lightwrap .lightbox-content {
position: relative;
top: 48%;
transform: translateY(-50%);
background-color: #fff;
text-align: center;
z-index: 4;
}
 
.close-lightbox {
text-align: right;
padding: 0 20px 10px 0;
margin: 0;
z-index: 4;
}


</style>

</head>


<div class="page-overlay">
<div class="lightwrap">
<div class="lightbox-content">
			<img src="http://i.imgur.com/FJIwIJu.jpg">
            <p class="close-lightbox">[X]</p>
			<a href="#" id="Previous">Previous</a>
			<a href="#" id="Next">Next</a>
</div> <!-- end lightbox-content -->
</div> <!-- end lightwrap -->
</div> <!-- end page-overlay -->


<img class="tmb" src="http://i.imgur.com/FJIwIJu.jpg" width="100" height="100">



<!--Latest jQuery Core Library--> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 


<script>
$(document).ready(function() {
$('.page-overlay, .lightwrap').hide();
$('.tmb').click(function(){
$('.page-overlay, .lightwrap').fadeIn();
});
$('.close-lightbox').css('cursor','pointer').click(function() {
$('.page-overlay, .lightwrap').fadeOut();
});
});
</script>

</body>
</html>

ronpat · December 28, 2015, 3:45am

@applytobecome,

I changed the title of your post to reflect the subject of your post.

applytobecome · December 28, 2015, 4:52am

Okay fair enough

PaulOB · December 28, 2015, 9:46am

Hi,

I’d probably handle the centring like this.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height:100%;
	margin:0;
	padding:0;
}
.page-overlay {
	position:fixed;
	left: 0;
	top: 0;
	height:100%;
	width:100%;
	text-align:center;
	z-index: 4;
	display:none;
	background:rgba(0,0,0,0.7);
}
.lightwrap {
	display:table;
	width:100%;
	height:100%;
	z-index: 4;
	text-align:center;
}
.lightbox-content img, .tmb {
	display: block;
	margin:0 auto 10px;
}
.lightbox-content {
	display:table-cell;
	vertical-align:middle;
	text-align: center;
	z-index: 4;
}
.close-lightbox {
	position:absolute;
	top:25px;
	right:25px;
	font-size:50px;
	line-height:60px;
	color:#fff;
	margin: 0;
	z-index: 4;
	border-radius:50%;
	width:60px;
	height:60px;
	border:2px solid #000;
	text-align:center;
}
</style>
</head>
<body>
<div class="page-overlay">
  <div class="lightwrap">
    <div class="lightbox-content"> <img src="http://i.imgur.com/FJIwIJu.jpg">
      <p class="close-lightbox">X</p>
      <div><a href="#" id="Previous">Previous</a> <a href="#" id="Next">Next</a></div>
    </div>
    <!-- end lightbox-content --> 
  </div>
  <!-- end lightwrap --> 
</div>
<!-- end page-overlay --> 

<img class="tmb" src="http://i.imgur.com/FJIwIJu.jpg" width="100" height="100"> 

<!--Latest jQuery Core Library--> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(document).ready(function() {
$('.page-overlay, .lightwrap').hide();
$('.tmb').click(function(){
$('.page-overlay, .lightwrap').fadeIn();
});
$('.close-lightbox').css('cursor','pointer').click(function() {
$('.page-overlay, .lightwrap').fadeOut();
});
});
</script>
</body>
</html>

The display:table-cell with vertical-align:middle automatically centres the content regardless of size. For modern browsers you could use flexbox for vertical centering instead. Avoid the translate method or the absolute method for centering as they end up with content outside the viewport and unreachable.

I’ll leave the js previous and next to someone else

applytobecome · December 28, 2015, 2:37pm

You sir are one hella good santa! thanks for the present this just made my day ! <3

m3g4p0p · December 28, 2015, 4:54pm

I’d not hard-code the image source into the lightbox. Instead, give each thumbnail link a data-lightbox attribute:

<a href="foo" data-lightbox>Image 1</a>
<a href="bar" data-lightbox>Image 2</a>

You can then set the image source dynamically on the click event, and traverse through the siblings of the link when clicking next/previous:

var $that = {};

var update = function() {
    $('.lightwrap').fadeOut(function() {
        $('.lightbox-content img').attr('src', $that.attr('href'));
        $('.lightwrap').fadeIn();
        
        if (!$that.next('[data-lightbox]').length) {
            $('.lightbox-content #Next').hide();
        } else {
            $('.lightbox-content #Next').show();
        }

        if (!$that.prev('[data-lightbox]').length) {
            $('.lightbox-content #Previous').hide();
        } else {
            $('.lightbox-content #Previous').show();
        }
    });
};

$('a[data-lightbox]').click(function(event) {
    event.preventDefault();
    $that = $(this);
    update();
});

$('.lightbox-content #Next').click(function(event) {
    $that = $that.next('[data-lightbox]');
    update();
});

$('.lightbox-content #Previous').click(function(event) {
    $that = $that.prev('[data-lightbox]');
    update();
});

(Sorry I’ve just edited the post quite a bit…)

applytobecome · December 28, 2015, 5:35pm

Unfortuatenetly i cant seem to get this to work?

The whole point is that i want it to work/look like this ?

	<ul class="gallery">
    	<li>
			<img src="Img/cars/car1.png">
        </li>
    	<li>
			<img src="Img/cars/car2.png">
        </li>
    	<li>
			<img src="Img/cars/car3.png">
        </li>
	</ul>

When everything is done i want 5 thumbnails to be able to click “(Cars)(Bikes)(Planes)(Motorcycles)(Boats)”

When one of the thumbnails is clicked AJAX,PHP,MYSQLI,Javascript/Jquery ? has to work together it has to import that set of pictures from the clicked category into the lightbox, if this makes sence? so that the html is not put directly into the page but is imorted from somewhere (mysqli)??

The only thing is i am not at all good at AJAX,PHP,MYSQLI and Javascript/Jquery i am pretty comfortable with html/css but it is also the easy part

m3g4p0p · December 28, 2015, 5:55pm

Well you could certainly do this with AJAX, jQuery has some handy commands there, too. For example, you could specify the image sources in the aforementioned data-lightbox attribute, separated by spaces, like

<a data-lightbox="src1 src2 src3" href ="#">Cars</a>

store these sources in an array, and then fetch the images with $.get() sequentially each time you click the next button.

But here’s another idea: just put all 5 thumbnail links in one li element, but set 4 of them to display: none. Then my code above will allow you to cycle through all (and only) the images within the same ‘li’ element.

<style>
    .gallery li a:not(:first-child) {
        display: none;
    }
</style>

<ul class="gallery">
    <li>
        <a href="src1" data-lightbox><img src="thumbnail-src1" /></a>
        <a href="src2" data-lightbox></a>
        <a href="src3" data-lightbox></a>
        <a href="src4" data-lightbox></a>
        <a href="src5" data-lightbox></a>
    </li>
    <!-- etc. etc. -->

Edit: Actually, you don’t even really have to set them to display: none since they’re empty anyway!

applytobecome · December 28, 2015, 6:04pm

Okay i will take a very very long bath, my brain is about to melt down

Btw it looks like this if it makes sence

Thumbnail Thumbnails Thumbnail
Category Category Category
Cars Bikes Planes
Pic1 Pic1 Pic1
Pic2 Pic2 Pic2
Pic3 Pic3 Pic3
Pic4 Pic4 Pic4
Pic5 Pic5 Pic5

1 thumbnail for each category, when the category is pressed (etc cars) pic 1 shows in the lightbox then you press next then pic 2 is shown in the lightbox? This is the thing i want

Well ill take a very long bath now since i have to process all of this :smisweat:

Btw how hard would you rate these languages?

HTML: 0-10?
CSS: 0-10?
Javascript/Jquery: 0-10?
PHP: 0-10?
Mysqli: 0-10?
AJAX: 0-10?

m3g4p0p · December 28, 2015, 6:59pm

Well, my suggestion above does exactly that. Here’s a fiddle. I’ve omitted the overlay and basically all CSS stuff, so it’s just the relevant JS bits. Also, I’ve tweaked the code a bit so that the next/previous button only shows when there actually is a next/previous image.

applytobecome · December 28, 2015, 7:16pm

1 hour bath, yes that does the job!
Back to the serious stuff, i will try this out right now !

applytobecome · December 28, 2015, 7:45pm

The fiddle you gave me does the job with prev/next and fading in/out but i cant figure out how to integrate this with the lightbox i have ? somehow the images does not display inside of the lightbox ?

What is going wrong ?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<link href="main.css" rel="stylesheet" type="text/css">

<style type="text/css">

.page-overlay{
position:fixed;
left: 0px;
top: 0px;
height:100%;
width:100%;
text-align:center;
background: rgba(0, 0, 0, 0.7);
z-index: 15;
display:none;
}
 
.lightwrap {
display:table;
width:100%;
height:100%;
z-index: 4;
text-align:center;
margin-top:40px !important;
}

.lightbox-content img, .tmb {
	display: block;
	margin:0 auto 10px;
}

.babes img{
	border:3px solid black;
}
 
.lightbox-content {
	display:table-cell;
	vertical-align:middle;
	text-align: center;
	z-index: 4;
}
 
.close-lightbox {
	position:absolute;
	top:55px;
	right:25px;
	font-size:50px;
	line-height:60px;
	color:#fff;
	margin: 0;
	z-index: 4;
	border-radius:50%;
	width:60px;
	height:60px;
	border:2px solid #000;
	text-align:center;
}

iframe{
outline: 3px solid black !important;
overflow:hidden;
}
 
@media only screen and (max-width : 770px) {
.lightwrap {
width: 80%;
left: 10%;
z-index: 5;
}
}


</style>


</head>

<body>

<ul class="gallery">
    <li>
		    Category Skull
        <a class="tmb" href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.kerniecamproductions.com%2Fimg%2Fgallery%2Fskullpencil_large.jpg&f=1" data-lightbox>Thumbnail goes here</a>
        <a href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-91lbritDxgc%2FUCJefFUstXI%2FAAAAAAAAHHw%2FC95Sz_ctfoM%2Fs1600%2FSkull%2BWallpapers%2B1.jpg&f=1" data-lightbox></a>
        <a href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.M243b206e17091dba952eb285c5a6572dH0%26pid%3D15.1&f=1" data-lightbox></a>
        <a href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.Ma9f9d0ad8779a3ab7e0102f281171cf9o0%26pid%3D15.1&f=1" data-lightbox></a>
        <a href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf6dd4b0552065a5adaadff7e9bf8bd79H1%26pid%3D15.1&f=1" data-lightbox></a>
    </li>
    <li>
		    Category Heart
        <a class="tmb" href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.M246d6000e797533a71d2ca827740ce7fH0%26pid%3D15.1&f=1" data-lightbox>Thumbnail goes here</a>
        <a href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.M0800b40b3af5d3d7e115d0d6da02e735H0%26pid%3D15.1&f=1" data-lightbox></a>
        <a href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2F1.bp.blogspot.com%2F--aYDVyFVWwI%2FUOjvHP4Fb_I%2FAAAAAAAAAuo%2FCV8PsG3Z3JQ%2Fs1600%2Fheart%2Bn%2Blove%2Bvalentines%2Bday%2Bwallpapers%2B%2B(1).png&f=1" data-lightbox></a>
        <a href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.M300dcbaa49fedbbd20360f3e4e294065H0%26pid%3D15.1&f=1" data-lightbox></a>
        <a href="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mea5437ea0bd2a581d2a3e67f9c95f925H0%26pid%3D15.1&f=1" data-lightbox></a>
    </li>
</ul>

<!-- Lightbox -->

<div class="page-overlay">
<div class="lightwrap">
<div class="lightbox-content">
<div id="navigation">
    <p class="close-lightbox">X</p>
	<a href="#" id="Previous">Previous</a>
    <a href="#" id="Next">Next</a>
</div>
</div> <!-- end lightbox-content -->
</div> <!-- end lightwrap -->
</div> <!-- end page-overlay -->

<!--Latest jQuery Core Library--> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<!--Bootstrap-->

<script>

var $that = {};

var update = function() {
    $('.lightwrap').fadeOut(function() {
			$('.lightbox-content img').attr('src', $that.attr('href'));
			$('.lightwrap').fadeIn();
			
			if (!$that.next('[data-lightbox]').length) {
				$('.lightbox-content #Next').hide();
			} else {
				$('.lightbox-content #Next').show();
			}
			
			if (!$that.prev('[data-lightbox]').length) {
				$('.lightbox-content #Previous').hide();
			} else {
				$('.lightbox-content #Previous').show();
			}
		});
};

$('a[data-lightbox]').click(function(event) {
    event.preventDefault();
    $that = $(this);
    update();
});

$('.lightbox-content #Next').click(function(event) {
    event.preventDefault();
    $that = $that.next('[data-lightbox]');
    update();
});

$('.lightbox-content #Previous').click(function(event) {
    event.preventDefault();
    $that = $that.prev('[data-lightbox]');
    update();
});

</script>

<script>
$(document).ready(function() {
$('.page-overlay, .lightwrap').hide();
$('.tmb').click(function(){
$('.page-overlay, .lightwrap').fadeIn();
});
$('.close-lightbox').css('cursor','pointer').click(function() {
$('.page-overlay, .lightwrap').fadeOut();
});
});
</script>

</body>
</html>

m3g4p0p · December 28, 2015, 8:04pm

You still need that img element inside your div.lightbox-content:

<div class="page-overlay">
    <div class="lightwrap">
        <div class="lightbox-content">
            <img />
            <div id="navigation">
                <a href="#" class="close-lightbox">X</a>
                <a href="#" id="Previous">Previous</a>
                <a href="#" id="Next">Next</a>
            </div>
        </div> <!-- end lightbox-content -->
    </div> <!-- end lightwrap -->
</div> <!-- end page-overlay -->

You’re trying to access this element with $('.lightbox-content img'), but if it is not there, the jQuery selector will just return an empty object. Of course, you can also check if it’s there and create it if necessary with

if (!$('.lightbox-content img').length) {
    $('.lightbox-content').prepend('<img />');
}

applytobecome · December 28, 2015, 8:32pm

Okay i got it to work, the only problem is that my thumbnail is something a little more complicated, it contains 3-4 divs with hover caption etc etc… and i cant get it to work with that but ill try, i have to restart my pc just a sec

applytobecome · December 28, 2015, 9:23pm

I am struggeling!
I will dedicate the rest of the night to get this to work !!

m3g4p0p · December 28, 2015, 9:41pm

Good luck then!

applytobecome · December 28, 2015, 11:07pm

When i add an image as Previous/Next buttons it just duplicates the current image? how come i get this ?

m3g4p0p · December 29, 2015, 12:02am

I see. The thing is that the line

$('.lightbox-content img').attr('src', $that.attr('href'));

sets any image inside .lightbox-content to the new src. The solution is to select the image you want to address in an unambiguous way; in this case this is possible with

$('.lightbox-content > img').attr('src', $that.attr('href'));

since the navigation elements are in another div and not an immediate child of .lightbox-content. However, if you want to be on the safe side, simply assign a unique class or an id to that image

HTML

<div class="page-overlay">
    <div class="lightwrap">
        <div class="lightbox-content">
            <img id="lightbox-image" />
            <div id="navigation">
                <a href="#" class="close-lightbox">X</a>
                <a href="#" id="Previous">Previous</a>
                <a href="#" id="Next">Next</a>
            </div>
        </div> <!-- end lightbox-content -->
    </div> <!-- end lightwrap -->
</div> <!-- end page-overlay -->

The jQuery selector thus becomes

$('#lightbox-image').attr('src', $that.attr('href'));

applytobecome · December 30, 2015, 4:48pm

I litterally start crying soon… i cant seem to integrate this so that it works properly

I was close once… but then somehow all my code rolled back (i dont know how it did it) to the beginning before you and i started this… very weird since i did save the project.

Well i have to start all over again trying to get this to work, i honestly feel shattered lol

applytobecome · December 30, 2015, 4:53pm

Seriously wtf is going on… i cant even get the fiddle to work when i copy paste it over in a brand new project, then the next/previous buttons does not show when the image is displayer, wtf…

burry me !!!

Topic		Replies	Views
Light Box Tutorial Not Working :-( JavaScript	11	784	February 24, 2010
I need quick help with lightbox HTML & CSS	3	574	April 12, 2010
Image gallery - javascript problem JavaScript	7	1368	August 5, 2021
Lightbox and sliding menu JavaScript	1	712	September 29, 2010
Centering external Images in the screen Design & UX	20	3021	August 14, 2015

Help creating a custom lightbox

Related topics