photron's Introduction

Photron

An easy-to-use lightbox.

Features

Supports touch gestures for navigation
Completly vanilla and standalone

Getting started

Coming soon...

Installing

Just download the compressed javascript file from the dist/ folder
After that you'll also to reference the javascript file in your HTML file by using:

<script src="./[PATH]/[TO]/Photron.min.js"></script>

Last you add the .photron-item class to every item inside the gallery

Usage

<script type="text/javascript">
	Photron({
		//-- Custom settings
	});
</script>

Setting	Datatype	Default	Description
showImageTitle	boolean	true	Whether the `data-title` attribute of the `img` should be shown or not.
showGalleryTitle	boolean	true	Whether the `data-title` attribute of the Photron container (e.g. `.lightBox`) should be shown or not.
roundRobin	boolean	true	Whether the items in an Photron should begin at the start if the end was reached and vice versa.
labelPrevious	string	"Previous image"	Set a custom text for the previous-button.
labelClose	string	"Close"	Set a custom text for the close-button.
labelNext	string	"Next image"	Set a custom text for the next-button.

Versioning

I am using Semantic Versioning 2.0.0 for versioning. For the versions available, see the tags on this repository.

Authors

André Lichtenthäler (Bikossor) - Initial work

License

This project is licensed under the MIT License. See the LICENSE.md file for more details.

Changelog

Version 1.0.0: (3rd February, 2018)

[Change] Photron is now completly vanilla and standalone
[Added] Opening and closing animations of the overlay

Version 0.2.1: (4th September, 2017)

[Fixed] Issue #2
[Added] A custom GitHub Page

Version 0.2.0: (20th August, 2017)

Renamed the CSS-IDs
Improved CSS compatibility
Every javascript function now returns false
Added support for navigation via touch

Version 0.1.1: (6th August, 2017)

Fixed issue #1 (This time for real...)
Changed some lines from ES6 to ES5 (For compatibility reasons)
The close-Function now resets the Photron content explicitly
Added a minified version of the stylesheet

Version 0.1.0: (2nd July, 2017)

First introduction

photron's People

Contributors

Stargazers

Watchers

photron's Issues

Remove old, commented out jQuery code

Adjust all the selector prefixes

Improve the "animationEnd" method

Add a photron-item description

An individual item description in form of a data-* tag. The description can be seen (via interaction).

Remove (temporarily?) the animation of the overlay

Centralize the appending of HTMLElements

Save the document object into a variable

Remove (temporarily?) the support for YouTube videos

Clean up the event registrations

Centralize the creation of HTMLElements

Close function doesn't remove full youtube ...

Hi, should be used:
$('#alb_overlay').fadeOut(settings.effectTime, function(){$(this).remove();});
instead of
$('#alb_overlay').fadeOut(settings.effectTime);
already in use?
I asked that because i didn't have my youtube object full removed as the overlay window get closed but I still have the sound continuing....

Always the first element is opened when clicking on nested elements

Hi,
I am using your amazing ALightBox script version Photron-0.2.0
I have a problem using it with the scroll swiper script https://swiperjs.com/
here is my example:

                          <div class="swiper-slide" >
                          <a class="alb-item" href="https://www.youtube.com/watch?v=6FRS4MF7UvQ" ></a>
                          </div>

                          <div class="swiper-slide" >
                          <a class="alb-item" href="https://www.youtube.com/watch?v=9SJc7N0S41A" ></a>
                          </div> 

                          <div class="swiper-slide" >
                          <a class="alb-item" href="https://www.youtube.com/watch?v=9SJc7N0S41A" ></a>
                          </div> 

		      <div class="swiper-slide">
                          <a class="alb-item" href="https://www.youtube.com/watch?v=-7RlEe_FGSA" ></a>
                          </div> 
                                    
                          </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>

                          </div>
                          </div>

When I click on the 3 or 4 videos on the scroll it always opens the first video, it does not recognize the clicked video, very likely there is a conflict because I insert

with each video, in fact eliminating this piece of code works.
I would like to use your script because I am in love with it, how can I solve?
thank you