Download the PHP package levmyshkin/glightbox without Composer

On this page you can find all versions of the php package levmyshkin/glightbox. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package glightbox

GLightbox

GLightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.

Features

Live Demo

You can check the live demo right here

Usage

Or manually download and link glightbox.min.js in your HTML:

Examples

Slide Options

You can specify some options to each individual slide, the available options are:

Lightbox Options

Example use of the options.

Option Type Default Description
selector string .glightbox Name of the selector for example '.glightbox' or 'data-glightbox' or '*[data-glightbox]'
elements array null Instead of passing a selector you can pass all the items that you want in the gallery.
skin string clean Name of the skin, it will add a class to the lightbox so you can style it with css.
openEffect string zoom Name of the effect on lightbox open. (zoom, fade, none)
closeEffect string zoom Name of the effect on lightbox close. (zoom, fade, none)
slideEffect string slide Name of the effect on slide change. (slide, fade, zoom, none)
moreText string See more More text for descriptions on mobile devices.
moreLength number 60 Number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description.
closeButton boolean true Show or hide the close button.
touchNavigation boolean true Enable or disable the touch navigation (swipe).
touchFollowAxis boolean true Image follow axis when dragging on mobile.
keyboardNavigation boolean true Enable or disable the keyboard navigation.
closeOnOutsideClick boolean true Close the lightbox when clicking outside the active slide.
startAt number 0 Start lightbox at defined index.
width number 900px Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width
height number 506px Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vh For inline elements you can set the height to auto.
videosWidth number 960px Default width for videos. Videos are responsive so height is not required. The width can be in px % or even vw for example, 500px, 90% or 100vw for full width videos
descPosition string bottom Global position for slides description, you can define a specific position on each slide (bottom, top, left, right).
loop boolean false Loop slides on end.
zoomable boolean true Enable or disable zoomable images you can also use data-zoomable="false" on individual nodes.
draggable boolean true Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable="false" on individual nodes.
dragToleranceX number 40 Used with draggable. Number of pixels the user has to drag to go to prev or next slide.
dragToleranceY number 65 Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag).
dragAutoSnap boolean false If true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released.
preload boolean true Enable or disable preloading.
svg object {} Set your own svg icons.
cssEfects object 'See animations' Define or adjust lightbox animations. See the Animations section in the README.
lightboxHTML string 'See themes' You can completely change the html of GLightbox. See the Themeable section in the README.
slideHTML string 'See themes' You can completely change the html of the individual slide. See the Themeable section in the README.
autoplayVideos boolean true Autoplay videos on open.
autofocusVideos boolean false If true video will be focused on play to allow keyboard sortcuts for the player, this will deactivate prev and next arrows to change slide so use it only if you know what you are doing.
plyr object {} View video player options.

Events

You can listen for events using your GLightbox instance (see example under the table). You can use the on() API method or once().

Event Type Description
open Provide a function when the lightbox is opened.
close Provide a function when the lightbox is closed.
slide_before_change Trigger a function before the slide is changed.
slide_changed Trigger a function after the slide is changed.
slide_before_load Trigger a function before a slide is loaded for the first time, the function will only be called once
slide_after_load Trigger a function after a slide is loaded and it's content is set for the first time, the function will only be called once
slide_inserted Trigger a function after a slide is inserted using insertSlide.
slide_removed Trigger a function after a slide is removed`

Video player

GLightbox includes "Plyr" the best player out there, you can pass any Plyr option to the player, view all available options here Plyr options. GLightbox will only inject the player library if required and only when the lightbox is opened.

Internet Explorer 11. If you need support for this browser you need to set the js url to use the polyfilled version. This is not the default because IE11 is ancient and we need to let it die.

Autoplay for mobile/tablet

Please note, autoplay is blocked in some browsers, there’s nothing we can do to change that unfortunately, the browser will decide if your video can be autoplayed. Please do not post issues about this, instead inform yourself about this topic:

they decide if a video can be autoplayed based in a few rules

API

There are methods, setters and getters on a GLightbox object. The easiest way to access the GLightbox object is to set the return value from your call to a variable. For example:

Methods

Example method use:

Option Parameters Description
open node Open the lightbox, you can optionally pass a node.
openAt number Open at specific index.
close - Close the lightbox.
reload - Reload the lightbox, after inserting content with ajax.
destroy - Destroy and remove all attached events.
prevSlide - Go to the previous slide.
nextSlide - Go to the next slide.
goToSlide number Index of the slide.
insertSlide object, index Insert a slide at the specified index.
removeSlide index Remove slide at the specified index.
getActiveSlide - Get active slide. It will return the active node.
getActiveSlideIndex - Get active slide. It will return the active slide index.
slidePlayerPlay number Play video in the specified slide.
slidePlayerPause number Pause video in the specified slide.
getSlidePlayerInstance node, index Get the player instance of the specified slide.
getAllPlayers - Get all players instance.
setElements [] Update the lightbox gallery elements.
on string, function Set an event listener. See Events section
once string, function Set an event listener that will be triggered only once. See Events section

Animations

Animations are created with CSS, each effect has an in and out value and they are used to attach the correct classes to the node.

For example if you are using

The open effect will use cssEfects.zoom.in and will add the class gzoomIn, if you take a look at the CSS you'll see:

Adding a custom animation

You can create any animation you want, you can find some inspiration in the Animate.css library, for example you can add the bounce animation like this:

Themeable

You can completely customize the structure of GLightbox and use CSS to change any part you want.

You can also define a skin name and the lightbox will append the class name "glightbox-supercool" so you can customize it with CSS, this will leave a barebones structure so you can change the buttons appearance, etc.

Development

Browser Support

GLightbox was tested in the following browsers.

It will work in any browser that supports CSS Flexbox

Contributing

Feel free to report any issues! If you wish to contribute by fixing a bug or implementing a new feature, please first read the CONTRIBUTING guide.

Donate

If you find this code useful, please consider a donation to keep this project growing, any amount is appreciated.

paypal

Support

We only provide support for bugs and feature requests, so please only post issues about this two topics, if you need help implementing GLightbox or you are just starting with HTML/CSS/Javascript please use stackoverlow, you'll be able to find more help there. This will help us to keep the issues related to the library and solve issues faster.

Changelog

Latest version vundefined

See the CHANGELOG.md file for details

License

This project is licensed under the MIT License - see the LICENSE.md file for details

All versions of glightbox with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package levmyshkin/glightbox contains the following files

Loading the files please wait ....