Looking for simplest of lightboxes

Report · Nov 21, 2018

Looking for basic functionality :

Click a link, screen fades to semi-dark, another div gets superimposed on the site, clicking anywhere returns to site underneath.

(Would be even nicer if everything faded in and out in 3 or 4 steps, and if the background blurred a bit in addition to going darker.)

Any scripts to recommend that even a nub like myself could implement without accidentally unraveling space-time? The site is already using PHP and jQuery.

Thanks!

Report · Nov 21, 2018

after the scriptaculous years... this one was one of the very first libs... Lightbox

Report · Nov 21, 2018

Featherlight – The ultra slim jQuery lightbox.

Paul-M - Community Expert

Report · Nov 22, 2018

The original Lightbox scripts were not responsive and didn't support swipe gestures on mobile and tablet devices. These days everything must be mobile friendly.

See links below

Swipebox | A touchable jQuery lightbox

15 Lightbox Libraries For Mobile Responsiveness - Hongkiat

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 22, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
The original Lightbox scripts were not responsive and didn't support swipe gestures on mobile and tablet devices. These days everything must be mobile friendly.
See links below
Swipebox | A touchable jQuery lightbox

Should I be seeing images in that grey space below the initial text? Because I don't see a demo anywhere and it looks like there should be images there. Tried it on two updated browsers on Windows 10.

Or is the site temporarily broken? Mobile support doesn't help me if this doesn't work on desktop.

EDIT: Works now, weird how the photos were gone earlier. I'll investigate this further, thanks!

Report · Nov 23, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
The original Lightbox scripts were not responsive and didn't support swipe gestures on mobile and tablet devices. These days everything must be mobile friendly.
Swipebox | A touchable jQuery lightbox

That last step in the simple installation is the only one giving me pause ("Fire the plugin")

This part goes inside the body, right? Because I can't get it working.

EDIT: Upon close inspection, I'm getting this from their jquery.swipebox.js file, which I haven't edited in any way :

SCRIPT5009: SCRIPT5009: 'jQuery' is not defined

Which might explain why :

SCRIPT438: SCRIPT438: Object doesn't support property or method 'swipebox'

Those are the 2 errors I'm getting. But I double-checked all the paths to jquery.swipebox.js, they're good. I must be calling the function wrong, that's a bit out of my comfort zone. I currently have the function near the end of the body, right before the footer (I just guessed, to be honest.)

Report · Nov 24, 2018

Show us a URL to your problem page.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 24, 2018

Which version of jQuery are you using?

This seems to work for me.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Swipebox Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Swipebox  CSS-->
<link type="text/css" rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/swipebox/1.4.4/css/swipebox.css">
</head>
<body>
<!--placeholder images-->
<a href="https://dummyimage.com/900x900" class="swipebox" title="Image 1 Caption"> <img src="https:///dummyimage.com/400x400" alt="small placeholder"> </a> 
<a href="https://dummyimage.com/900x900" class="swipebox" title="Image 2 Caption"> <img src="https:///dummyimage.com/400x400" alt="small placeholder"> </a> 
<a href="https://dummyimage.com/900x900" class="swipebox" title="Image 3 Caption"> <img src="https:///dummyimage.com/400x400" alt="small placeholder"> </a> 
<!--jQuery 2--> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
<!--Swipebox JS--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/swipebox/1.4.4/js/jquery.swipebox.min.js"></script> 
<!--invoke swipebox on page load--> 
<script>
;( function( $ ) {
    $( '.swipebox' ).swipebox();
} )( jQuery );
</script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 25, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
Which version of jQuery are you using?
This seems to work for me.

Before even trying yours, I simply replaced my CSS/JS links from my local ones to your remote ones, and now it works. I'm pretty confident that I can troubleshoot the issue from here, thanks!

One question, though. I couldn't help but notice you leave your <link> tags open. Back when I was programming more regularly years ago, it was still considered good practice to close those by adding / before the closing >. So, even would become .

Is that not a thing anymore? I forget what the original reasons for doing this were (some sort of compliance issue) but if you superheroes aren't doing it, then I'm guessing I don't need to either.

About Swipebox... any idea if it can also do divs? Can I put a div in a php file and have it called up lightbox-style like an image?

Report · Nov 25, 2018

https://forums.adobe.com/people/Under+S. wrote
One question, though. I couldn't help but notice you leave your <link> tags open. Back when I was programming more regularly years ago, it was still considered good practice to close those by adding / before the closing >. So, even would become .
Is that not a thing anymore?

It's not required any longer in html 5

Report · Nov 25, 2018

https://forums.adobe.com/people/Under+S. wrote
...So, even would become .
Is that not a thing anymore?

All depends on which document type you're using. XHTML uses the above tag closure. HTML5 does not.

HTML doctype declaration

About Swipebox... any idea if it can also do divs? Can I put a div in a php file and have it called up lightbox-style like an image?

It works with video so it could probably be made to work with any tag. But I have not treid it. Check the online documentation.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 25, 2018

https://forums.adobe.com/people/Nancy+OShea wroteUnder S.
All depends on which document type you're using. XHTML uses the above tag closure. HTML5 does not.
HTML doctype declaration

The argument back in the day was that if all it takes is 1 extra slash to make it compatible in both, whether you actually need it or not, why wouldn't you just make it regular practice? Unless the need to cater to XHTML itself has become obsolete since the days when I was urged to do this everywhere.

https://forums.adobe.com/people/Nancy+OShea wrote
It works with video so it could probably be made to work with any tag. But I have not treid it. Check the online documentation.

After getting Swipebox working, I looked at the other examples you sent me, just to compare them (some do more than JPG, some don't) and kinda liked this one : LightGallery.

My only issue with most of them is that the contents of the background during the overlay shifts due to the disappearance of the scrollbar. Ironically, whoever made this one thought to keep the scrollbar during the overlay so the background stays put... but the lightbox appears on a 100% opaque black layer. So we don't even SEE the background "not shift", they might as well have removed the scrollbar.

Report · Nov 25, 2018

https://forums.adobe.com/people/Under+S. wrote

The argument back in the day was that if all it takes is 1 extra slash to make it compatible in both, whether you actually need it or not, why wouldn't you just make it regular practice?

IIf your code throws validation errors, you must learn to write cleaner code. If it has no impact on validation or site performance, keep doing what you're doing.

The W3C Markup Validation Service

After getting Swipebox working, I looked at the other examples you sent me, just to compare them (some do more than JPG, some don't) and kinda liked this one : LightGallery.

lightGallery works fine on my display without scrollbar issues. $18 commercial license seems reasonable. On which devices have you tested?

Google Analytics tracking tells me most of my site traffic comes from people on iPhone, Android phone and tablets. Not so many desktops & laptops anymore.

.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 26, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
After getting Swipebox working, I looked at the other examples you sent me, just to compare them (some do more than JPG, some don't) and kinda liked this one : LightGallery.
lightGallery works fine on my display without scrollbar issues. $18 commercial license seems reasonable. On which devices have you tested?

I think you might've misunderstood what I wrote there, which was that almost all of the lightboxes in the list you sent me see the background content -- ie, what you see through the semi-transparent layer -- shift to the right by a few pixels. Because the scrollbar goes away when the over-layer is called.

Then mentioned that ironically, LightGallery is possibly the ONLY ONE that thought to force the scrollbar to appear after clicking an image, so the background contents don't move... but it's also the only one that doesn't use a semi-transparent layer behind it. It looks 100% opaque black to me. So although they thought to keep the scrollbar to keep the background from shifting on overlay, they did not think to make the middle layer semi-transparent so we can see those background contents NOT shift.

In other words, they could have done like all the other lightboxes and let the scrollbar disappear on overlay -- and the background shift as a result -- because we literally can't see through the lightbox. The background is completely hidden, so it can spin clockwise at warp speed for all anyone knows, it doesn't matter.

Make more sense? I just found that funny.

Report · Nov 22, 2018

Hey, for a really light script which is not jquery dependent you can try this: baguetteBox.js | Demo

---
DMXzone | Wappler

Report · Nov 23, 2018

https://forums.adobe.com/people/Teodor+K wrote
Hey, for a really light script which is not jquery dependent you can try this: baguetteBox.js | Demo

I was looking at Swipebox | A touchable jQuery lightbox

Not being an expert in these matters, could you tell me what advantages one may have over the other?

They both look adequate for the job, at first glance.

Report · Nov 24, 2018

Just made a suggestion per your requirements for simplest lightbox script.

The one I suggested does not require jQuery and it is only like 4kb when gzipped.

The more to choose from the better

---
DMXzone | Wappler

Adobe Community

Looking for simplest of lightboxes

1 Correct answer