Highlighted

Looking for simplest of lightboxes

Contributor ,
Nov 21, 2018

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

703

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Looking for simplest of lightboxes

Contributor ,
Nov 21, 2018

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

704

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 21, 2018 0
Adobe Community Professional ,
Nov 21, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 1
Adobe Community Professional ,
Nov 21, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 1
Adobe Community Professional ,
Nov 22, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 1
Contributor ,
Nov 22, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Contributor ,
Nov 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Adobe Community Professional ,
Nov 24, 2018

Copy link to clipboard

Copied

Show us a URL to your problem page. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2018 0
Adobe Community Professional ,
Nov 24, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2018 1
Contributor ,
Nov 25, 2018

Copy link to clipboard

Copied

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 <br> would become <br/>.

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2018 0
LEGEND ,
Nov 25, 2018

Copy link to clipboard

Copied

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 <br> would become <br/>.

Is that not a thing anymore?

It's not required any longer in html 5

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2018 1
Adobe Community Professional ,
Nov 25, 2018

Copy link to clipboard

Copied

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

...So, even <br> would become <br/>.

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2018 0
Contributor ,
Nov 25, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2018 0
Adobe Community Professional ,
Nov 25, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2018 0
Under_S_ LATEST
Contributor ,
Nov 26, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 0
Enthusiast ,
Nov 22, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 1
Contributor ,
Nov 23, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Enthusiast ,
Nov 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2018 0