-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Tim Vervoort
committed
Nov 9, 2017
1 parent
06589a6
commit 7538caf
Showing
3 changed files
with
71 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,11 @@ | ||
| # fs-gal | ||
| Free to use full screen gallery for websites written in jQuery | ||
|
|
||
| # How to use | ||
| Include fs-gal.css and jQuery and fs-gal.js on your webpage. | ||
| Create objects (div, img, a, ...) with class 'fs-gal' and data-attribute 'data-img'. | ||
| The data-attribute 'data-img' is used to identify the image to open in the full screen gallery whend clicked. | ||
| When provided, the alt or title attribute is used to display the title of the image on the bottom of the gallery. | ||
|
|
||
| # Navigation | ||
| Visitors can click on objects with the data-img class to open the full screen gallery. Users can click on the previous and next icon or use the left and right arrow keys to navigate between images. The close button on top of the page or the ESC key is used to close the gallery. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /** | ||
| * Author: Tim Vervoort - info@timvervoort.com | ||
| * Licence: Free for commercial use | ||
| * Last update: 8th November 2017 - v1.0 | ||
| */ | ||
| $('document').ready(function() { | ||
| //Make gallery objects clickable | ||
| $('.fs-gal').click(function() { | ||
| fsGal_DisplayImage($(this)); | ||
| }); | ||
| //Display gallery | ||
| function fsGal_DisplayImage(obj) { | ||
| //Clear navigation buttons | ||
| $('.fs-gal-view > .fs-gal-prev').fadeOut(); | ||
| $('.fs-gal-view > .fs-gal-next').fadeOut(); | ||
| //Set current image | ||
| var title = obj.attr('alt'); | ||
| if (!title || title == '') { title = obj.attr('title'); } | ||
| $('.fs-gal-view > h1').text(title); | ||
| if (!title || title == '') { $('.fs-gal-view > h1').fadeOut(); } | ||
| else { $('.fs-gal-view > h1').fadeIn(); } | ||
| var img = obj.data('url'); | ||
| $('.fs-gal-view').css('background-image', 'url('+img+')'); | ||
| //Create buttons | ||
| var current = $('.fs-gal').index(obj); | ||
| var prev = current - 1; | ||
| var next = current + 1; | ||
| if (prev >= 0) { | ||
| $('.fs-gal-view > .fs-gal-prev').data('img-index', prev); | ||
| $('.fs-gal-view > .fs-gal-prev').fadeIn(); | ||
| } | ||
| if (next < $('.fs-gal').length) { | ||
| $('.fs-gal-view > .fs-gal-next').data('img-index', next); | ||
| $('.fs-gal-view > .fs-gal-next').fadeIn(); | ||
| } | ||
| $('.fs-gal-view').fadeIn(); //Display gallery | ||
| } | ||
| //Gallery navigation | ||
| $('.fs-gal-view .fs-gal-nav').click(function() { | ||
| var index = $(this).data('img-index'); | ||
| var img = $($('.fs-gal').get(index)); | ||
| fsGal_DisplayImage(img); | ||
| }); | ||
| //Close gallery | ||
| $('.fs-gal-view .fs-gal-close').click(function() { | ||
| $('.fs-gal-view').fadeOut(); | ||
| }); | ||
| //Keyboard navigation | ||
| $('body').keydown(function(e) { | ||
| if (e.keyCode == 37) { | ||
| $('.fs-gal-view .fs-gal-prev').click(); //Left arrow | ||
| } | ||
| else if(e.keyCode == 39) { // right | ||
| $('.fs-gal-view .fs-gal-next').click(); //Right arrow | ||
| } | ||
| else if(e.keyCode == 27) { // right | ||
| $('.fs-gal-view .fs-gal-close').click(); //ESC | ||
| } | ||
| }); | ||
| }); |