By rssfeeds-admin 
Features:
- Responsive Design: Adapts automatically to all screen sizes, from mobile devices to desktop displays.
- Automatic Gallery Grouping: Automatically detects and groups images within the same container.
- Keyboard Navigation: Supports arrow keys for image browsing and Escape key for closing the lightbox interface.
- Touch and Drag Support: Includes swipe gestures on touch devices and mouse drag functionality for desktop users.
- Dynamic HTML Injection: Automatically inserts the required lightbox markup only when gallery elements are detected on the page.
- Image Metadata Display: Utilizes the title attribute from images to show optional captions in the lightbox view.
Use Cases:
- Portfolio and Photography Websites: Display high-resolution artwork or photography collections with smooth navigation between images.
- Product Catalogs: Show detailed product images in e-commerce sites where users need to examine multiple angles or variations of items without triggering full page reloads.
- Blog Content Enhancement: Embed image galleries within blog posts or articles where multiple related images need to be grouped together.
- Documentation and Tutorials: Present sequential screenshots or diagrams in technical documentation where users need to zoom into details while maintaining their reading position.
How To Use It:
1. Place the wt-lightbox.css file in your <head> tag and the wt-lightbox.js file just before the closing </body> tag.
<link rel="stylesheet" href="path/to/wt-lightbox.css"> <script src="path/to/wt-lightbox.js"></script>
2. Wrap your image thumbnails in a container with the wt-lightbox-group class. This defines the scope of your gallery and tells the script which images belong together:
<div class="wt-lightbox-group"> <!-- Gallery items go here --> </div>
3. Each individual thumbnail wrapper needs the wt-lightbox-item class. The script will automatically locate the img tag inside each item and extract the src, alt, and title attributes:
<div class="wt-lightbox-group">
<div class="wt-lightbox-item">
<img src="images/photo1.jpg" alt="Description" title="Photo Title" />
</div>
<div class="wt-lightbox-item">
<img src="images/photo2.jpg" alt="Description" title="Photo Title" />
</div>
<div class="wt-lightbox-item">
<img src="images/photo3.jpg" alt="Description" title="Photo Title" />
</div>
</div>
4. The library supports multiple independent galleries on a single page. Each gallery operates with its own navigation scope, so users only cycle through images within the gallery they opened:
<div class="wt-lightbox-group gallery-one">
<div class="wt-lightbox-item">
<img src="images/set1-photo1.jpg" alt="Set 1 Photo 1" />
</div>
<div class="wt-lightbox-item">
<img src="images/set1-photo2.jpg" alt="Set 1 Photo 2" />
</div>
</div>
<div class="wt-lightbox-group gallery-two">
<div class="wt-lightbox-item">
<img src="images/set2-photo1.jpg" alt="Set 2 Photo 1" />
</div>
<div class="wt-lightbox-item">
<img src="images/set2-photo2.jpg" alt="Set 2 Photo 2" />
</div>
</div>
5. The library uses CSS custom properties for basic theming. You can override these variables in your own stylesheet:
:root {
--wtbasic: #333;
--wtdark: #222;
}
User Interactions:
Click any thumbnail to open the lightbox and view the full-size image. The left and right arrow keys navigate between images in the gallery. Press Escape to close the lightbox and return to the page.
On touch devices, swipe left or right to move between images. Desktop users can also click and drag the image left or right as an alternative to using the navigation arrows.
The close button appears in the top-right corner. Previous and next navigation arrows display on the left and right sides of the screen when multiple images exist in the gallery. Click anywhere outside the image itself to close the lightbox.
Related Resources:
FAQs:
Q: Can I use this library with dynamically loaded content or single-page applications?
A: The current implementation runs on DOMContentLoaded, which only fires once per page load. If you’re adding gallery items dynamically through AJAX or framework rendering, you’ll need to manually trigger the initialization logic after your content loads.
Q: Why do the navigation arrows or close button not appear in my custom layout?
A: The script injects the lightbox HTML with fixed positioning and specific z-index values. If your page has elements with extremely high z-index values or you’ve modified the CSS custom properties, the controls might be rendering behind other content. Check that nothing on your page is using a z-index higher than 300. The lightbox container uses z-index 300, and the controls are positioned within that container with relative z-index values. You can inspect the injected HTML in your browser’s developer tools to verify the elements are present and visible.
Q: How do I prevent the lightbox from activating on certain images within a gallery group?
A: The script activates on every element with the wt-lightbox-item class within a wt-lightbox-group container. If you need some images to be non-interactive, remove the wt-lightbox-item class from those specific wrappers. The script will ignore them during initialization.
Q: What happens if I don’t include a title attribute on my images?
A: The lightbox will function normally without displaying a caption. The script checks for the presence of the title attribute and only shows the caption element when a title exists. The .hastitle class controls the caption visibility through CSS, so images without titles simply won’t render the caption bar at the bottom of the lightbox.
The post Vanilla JS Gallery Lightbox with Touch Support – Web-Thread Lightbox appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.