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!
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
Copy link to clipboard
Copied
after the scriptaculous years... this one was one of the very first libs... Lightbox
Copy link to clipboard
Copied
Featherlight – The ultra slim jQuery lightbox.
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
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
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!
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.
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.)
Copy link to clipboard
Copied
Show us a URL to your problem page.
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>
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?
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
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.
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.
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.
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.
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.
.
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.
Copy link to clipboard
Copied
Hey, for a really light script which is not jquery dependent you can try this: baguetteBox.js | Demo
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.
Copy link to clipboard
Copied