It is a gallery that consists of two parts: Main Gallery and Secondary Gallery.
It is written in vanilla JavaScript. The Main Gallery always needs to be enabled,
while the Secondary Gallery can be either activated or deactivated. This gallery
can be used for many purposes, but it has been built with the purpose to display
images quickly on single-page websites. It is functional on both mobile and desktop
devices, but its design is mostly visible on desktop devices.
* 17/03/2021:
- TwoWay Gallery v2.07:
- twoWayGallery.js:
- fully commented
- this.eventSGalClickTouch function: reduced the time required to disable the touch event on the mGallery.
- Previously it was scrolling at the same time user is scrolling the page.
- Also, increased the distance required for the finger to travel to initiate the touch event.
- this.verifyInput function: added error checking whether length of images and description are equal. To ensure that error does not propagate and no human errors are made.
- this.prev & this.next functions: removed twConf that initiated this.setConfig each time. It is no longer required and was just doing unnecessary action.
- renamed few variables here and there but it does not affect overall logic at all.
- twoWayGallery.css:
- fully commented
- added grab cursor to sGallery when pressed and hold happens
* 16/03/2021:
- TwoWay Gallery v2.04:
- Modified function this.eventSGalClickTouch to ensure that event is always listening once and to document.body instead of the document. Event mouseup is not listening only when mousedown on the twsSlider is triggered.
- this.eventMGalArrowKeys is now enables the listening for arrow keys when the gallery is in viewport based on the scroll event
- Option navigationShowOnHover has been fixed. Setting it to true was not making any changes to the gallery.
- demo page:
- updated
- refactored directories
* 15/03/2021 Updated the README.md usage section 2. Changed the script src.
* 14/03/2021 TwoWay Gallery v2.01 - The first finalised release that includes all the expected options.
Install
Clone the repository (src folder in particular) or download the latest
release from the github.
Using npm:
- npm i tw-gallery
Usage
1. Add CSS link to the of your HTML page:
``html
` 2. By default, it is required to add Font Awesome 4 stylesheet to the of your HTML page.
`html
` - Note: this part is OPTIONAL if default OptionsnavigationIcons and
sGalleryNavigationIcons are overwritten.
3. Add twoWayGallery.js to the of your HTML:
`html
` 4. Add markup to the of your HTML:
`html
` - Note: can be excluded if default Option sGalleryEnable is set to false.
5. Initiate the gallery using the following JS by adding it in the