Responsive Fullscreen Photo Gallery - jQuery Story-Show-Gallery
| File Size: | 151 KB |
|---|---|
| Views Total: | |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Story-Show-Gallery is a lightweight, flexible, responsive, interactive jQuery Photo Gallery plugin created for desktop, tablet, and mobile.
Clicking the thumbnail & link will display all the images in a fullscreen vertical slider where the users are able to navigate through images with mousewheel, arrow keys and touch swipe events.
Licensed under the Mozilla Public License 2.0.
How to use it:
1. Insert the latest version of jQuery library and the Simple Scroll Gallery plugin's files into the document.
<script src="/path/to/cdn/jquery.min.js"></script> <link rel="stylesheet" href="ssg.css" /> <script src="ssg.js"></script>
2. Wrap the images & links into a gallery container.
<section class="gallery">
<a href='large.jpg'>
<img src="thumb.jpg" alt="Image 1">
</a>
<a href='large.jpg'>
<img src="thumb.jpg" alt="Image 1">
</a>
<a href='large.jpg'>
<img src="thumb.jpg" alt="Image 1">
</a>
<a href='large.jpg'>Link is supported as well</a>
...
</section>
3. That's it. To make the gallery fullscreen, just add the CSS class 'fs' to the container element:
<section class="fs gallery">
<a href='large.jpg'>
<img src="thumb.jpg" alt="Image 1">
</a>
<a href='large.jpg'>
<img src="thumb.jpg" alt="Image 1">
</a>
<a href='large.jpg'>
<img src="thumb.jpg" alt="Image 1">
</a>
<a class="fs" href='large.jpg'>Link is supported as well</a>
...
</section>
4. More CSS classes to control the gallery.
- ssg: To create a separate gallery, add this CSS class to the parent container.
- nossg: Ignore images with this CSS class.
- gossg: Set the initial image with this CSS class.
- vipssg: Set the VIP image.
5. You can also launch the gallery manually by calling a function:
SSG.run();
6. And then pass the optional settings as displayed below:
SSG.run({
// init image ID
initImgID: 3
// no close icon, no ESC key
noExit: true,
// fullscreen mode
fs: true
});
7. The plugin also allows you to define images displayed in the gallery via JavaScript:
SSG.run({
imgs: [
{
href: '1.jpg',
alt: 'Img caption 1'
},
{
href: '2.jpg',
alt: 'Img caption 2'
},{
href: '3.jpg',
alt: 'Img caption 3'
}
],
imgsPos:'start'
});
8. Override the default configurations at the beginning of the ssg.js.
// duration of scroll animation in miliseconds. Set to 0 for no scroll animation. SSG.cfg.scrollDuration = 500; // Force SSG to always display in fullscreen - true/false SSG.cfg.alwaysFullscreen = false; // Force SSG to never display in fullscreen - true/false SSG.cfg.neverFullscreen = false; // URL of the HTML file to load behind the gallery (usually a signpost to other galleries). Set to null if you don't want it. SSG.cfg.fileToLoad = 'ssg-loaded.html'; // URL is relative to parent HTML file, it's safer to use absolute path https://... // log image views into Google Analytics - true/false. SSG supports only ga.js tracking code. SSG.cfg.logIntoGA = true; // Protect photos from being copied via right click menu - true/false SSG.cfg.rightClickProtection = true; // Side caption for smaller, landscape oriented photos, where is enough space below them as well as on their side. true/false SSG.cfg.sideCaptionforSmallerLandscapeImg = false; // false means caption below // in other cases caption position depends on photo size vs. screen size. // in the portrait mode the gallery suggest to turn phone into landscape mode SSG.cfg.showLandscapeHint = true; SSG.cfg.landscapeHint = 'photos look better in landscape mode <span>
This awesome jQuery plugin is developed by Roman-Flossler. For more Advanced Usages, please check the demo page or visit the official website.
