Responsive Fullscreen Photo Gallery - jQuery Story-Show-Gallery

File Size: | 161 KB |
---|---|
Views Total: | 18556 |
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 GNU General Public License v3.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' data-author='photo by…'> <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' data-author="Custom Author" data-caption="Custom Caption"> <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.
- ssglight: Light theme.
- ssgdim: Dark theme.
- ssgblack: Black theme.
<section class="ssg fs vipssg ssgblack"> <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>
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, // ask if a user wants to switch into fullscreen mode fsa: false, // pass options here cfg: {} });
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', initImgID: 12 });
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. There is an exception for smartphones and tablets SSG.cfg.neverFullscreen = false; // When a mobile phone is in portrait mode, start SSG in fullscreen mode. But only if FS is demanded - fs class or fs:true. SSG.cfg.mobilePortraitFS = false; // Visual theme of the gallery - four possible values: dim, light, black, dark (default) SSG.cfg.theme = 'dark'; // unobtrusive cross cursor SSG.cfg.crossCursor = false; // URL of the HTML file to load behind the gallery (usually a signpost to other galleries). // HTML file has to be loaded over http(s) due to a browser's CORS policy. Set to null if you don't want it. SSG.cfg.fileToLoad = null; // display social share icon and menu SSG.cfg.socialShare = true; // EXIF info (or just the EXIF icon) appears as a part of the caption with link to full EXIF listing // 4 possible values: 'none' (no exif, default), 'standard', 'trim' (reduced lens info to save space), 'icon' SSG.cfg.captionExif = 'none'; // 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. // Locking the scale of mobile viewport at 1. Set it to true if the gallery has scaling problem on your website. SSG.cfg.scaleLock1 = false; // An author signature (or some text), which will appear in every caption // The data-author attribute overrides it SSG.cfg.globalAuthorCaption = ['','author: RF']; // Show first 3 images of a separate gallery together - e.g. third image clicked - image order will be 3,1,2,4,5,6... SSG.cfg.showFirst3ImgsTogether = true; // Watermark - logo configuration. Enter watermark text or image URL to display it SSG.cfg.watermarkWidth = 147; // image watermark width in pixels, it is downsized on smaller screens. SSG.cfg.watermarkImage = ''; // watermark image URL e.g. 'https://www.flor.cz/img/florcz.png' SSG.cfg.watermarkText = ''; // watermark text, use <br> tag for word wrap SSG.cfg.watermarkFontColor = ""; // custom font color, it will deactivate dark text-shadow from theme SSG.cfg.watermarkFontSize = 20; // font size in pixels SSG.cfg.watermarkOffsetX = 1.8; // watermark horizontal offset from left in percents of photo, for align to right use value near 100 SSG.cfg.watermarkOffsetY = 1.2; // vertical offset from bottom in percents of photo OR in pixels if imgBorderWidthX >= watermarkFontSize SSG.cfg.watermarkOpacity = 0.36; // opacity // Here you can translate SSG into other language. Leave tags <> and "" as they are. SSG.cfg.hint1 = "Browse through Story Show Gallery by:"; SSG.cfg.hint2 = "a mouse wheel <strong>⊚</strong> or arrow keys <strong>↓→↑←</strong>"; SSG.cfg.hint3 = "or <strong>TAP</strong> on the bottom (top) of the screen"; SSG.cfg.hintTouch = "<strong>TAP</strong> on the bottom (top) of the screen<br> to browse through Story Show Gallery."; SSG.cfg.hintFS = "For a better experience <br><a>click for fullscreen mode</a>" SSG.cfg.toTheTop = "Scroll to top"; SSG.cfg.exitLink = "Exit the Gallery"; // share link dialog SSG.cfg.imageLink = "The link to selected image:"; SSG.cfg.copyButton = "⎘ Copy the link to clipboard"; SSG.cfg.linkPaste = "…and you can paste it anywhere via ctrl+v"; // 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'; // SSG events - see complete example of SSG events in the example directory // parameter: data // data objects: // data.imgCount // count of images in the gallery // data.imgGalleryId // ID of current Image in the gallery // data.imgPageId // ID of current image on the page // data.GalleryId // ID of a gallery which belongs to initial image // data.imgPath // whole path to current image // data.imgName // image name of current image (no extension) // data.imageCaption // image caption for current image SG.cfg.onGalleryStart = null; // fires on the gallery start before loading and displaying of the first image. SSG.cfg.onImgLoad = null; // fires when an image is completely loaded from a server. SSG.cfg.onImgScrollsIn = null; // fires when the next/previous/first image starts scrolling in to display (doesn't apply on manual scrolling) SSG.cfg.onImgView = null; // fires when an image is viewed SSG.cfg.onOrientationChange = null; // fires when a device orientation changes SSG.cfg.onBeyondGallery = null; // fires when a user gets beyond the gallery - usually on a signpost SSG.cfg.onGalleryExit = null; // fires on the gallery exit
Changelog:
v3.1.6 (2022-04-28)
- iPhone scrolling issue fixed
v3.1.5 (2022-04-21)
- CSS hotfix
v3.1.4 (2022-04-20)
- Swipe browsing, border light effect, fixes
v3.1.3 (2022-04-11)
- hide img captions, fixes
v3.1.1 (2022-04-04)
- bugfix
v3.1.1 (2022-04-03)
- borders was fixed & enhaced, example update
v3.1.0 (2022-03-07)
- image border & radius settings
- CSS fix
v3.0.2 (2022-02-14)
- optimized for big screens,enlarge images
v3.0.1 (2021-12-10)
- Story Show Gallery for React, DOM observer
v2.11.4 (2021-11-04)
- unobtrusive cross cursor option
v2.11.3 (2021-09-30)
- onImgLoad event, gallery id, bugfixes
v2.11.1 (2021-08-27)
- EXIF styling, EXIF icon option
v2.11.0 (2021-08-24)
- viewing EXIF info, refactoring
v2.10.12 (2021-07-07)
- bugfix for older versions of jQuery
v2.10.11 (2021-07-06)
- Wordpress functionality, minor updates
v2.10.10 (2021-05-25)
- bugfix
v2.10.9 (2021-05-05)
- bugfix for mobile landscape mode, cursor
v2.10.8 (2021-04-29)
- two new gallery events, light visual tuning
v2.10.7 (2021-04-06)
- new fluent fade-in animation on start up
v2.10.6 (2021-03-22)
- globalAuthorCaption, data-caption, bugfixes
v2.10.5 (2021-01-15)
- update
v2.10.4 (2021-01-07)
- hint arrow in portrait mode
v2.10.3 (2021-01-04)
- mobile portrait FS, live config, bug fix
v2.10.2 (2020-11-18)
- minor bug fixes, theme contrast, index update
v2.10.0 (2020-10-23)
- light theme tuning
- new complete example
v2.10.0 (2020-10-21)
- Added four visual themes
- Bug fixes
v2.9.6 (2020-09-25)
- reworked faster loading of deeplinked img
v2.9.5 (2020-09-24)
- optimization
v2.9.4 (2020-09-12)
- optimization
v2.9.3 (2020-08-31)
- new social icons, SSG.restart, signpost, bugfix
v2.9.2 (2020-07-30)
- fixed for Android
v2.9.1 (2020-07-17)
- minor fix for apple
v2.9.0 (2020-06-26)
- SSG events, author caption, bug fixes
v2.8.2 (2020-06-26)
- minor fixes
v2.8.1 (2020-06-16)
- minor fixes
v2.8.0 (2020-06-12)
- structure change, readme update, minification
v2.7.3 (2020-06-06)
- better sharing menu, CSS tuning, tablet FS
v2.7.2 (2020-05-30)
- fixed error with scroll listener in Firefox
v2.7.1 (2020-05-27)
- Tweaking CSS and full screen mode
v2.7.0 (2020-05-25)
- social sharing, brand building, picture tag,webp,fixes
v2.6.4 (2020-05-01)
- bugfix
v2.6.3 (2020-04-16)
- fix problem with scroll-behavior, arrow animation
This awesome jQuery plugin is developed by Roman-Flossler. For more Advanced Usages, please check the demo page or visit the official website.