Help creating a custom lightbox

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

Okay so my problem’s is

  1. 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 % ?

  2. 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 :smile:

<!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>

@applytobecome,

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

Okay fair enough :slight_smile:

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 :smile:

1 Like

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

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…)

Unfortuatenetly i cant seem to get this to work? :confused:

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 :smiley: :smiley: i am pretty comfortable with html/css but it is also the easy part :slight_smile:

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! :stuck_out_tongue:

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

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 :smile:

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?

Well, my suggestion above does exactly that. :wink: 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.

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

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 ? :slight_smile:

<!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>

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 />');
}

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 :confused: but ill try, i have to restart my pc just a sec :slight_smile:

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

Good luck then! :slight_smile:

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

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'));

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

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

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 !!!