Posted in images
4
2:54 am, January 12, 2022

center image preview with lightbox and caption

I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it. 

Note: I just picked random images and they are centered, so... /runs

HTML

<a href='https://i.imgur.com/2S7oKAT.png' class='fancybox'>
  <div class='image-bg'></div>
  <figcaption>Click This Image! (or dont...)</figcaption>
</a>

<!-- so now we can just switch the image source, but it needs a new bg class for each, which is annoying, unless we move to ... inline styles -->
<!-- It does make it a bit more messy, but easier to update inline. -->
<a href='https://images.pexels.com/photos/9589961/pexels-photo-9589961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260' class='fancybox'>
  <div class='image-bg' style="background:url(https://images.pexels.com/photos/9589961/pexels-photo-9589961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) center no-repeat;"></div>
  <figcaption>Click This Image! (or dont...)</figcaption>
</a>

CSS

.image-bg {
  	height:200px;
  	width:100%;
  	margin-bottom:10px;
  	background:url(https://i.imgur.com/2S7oKAT.png) center no-repeat;
  	background-size:cover;
}
/*  */

Scripts

<link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.js"></script>

Javascript

$(document).ready(function() {
    $(".fancybox").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          }
      });
 });

View Statistics
This Week
0
This Month
0
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
Old programmers never die; they just lose some of their functions.