https://github.com/jlozovei/simple-image-gallery

VanillaJS simple+fancy image gallery :zap:
https://github.com/jlozovei/simple-image-gallery

gallery image-gallery vanilla-js

Last synced: about 1 month ago
JSON representation

VanillaJS simple+fancy image gallery :zap:

• Host: GitHub
• URL: https://github.com/jlozovei/simple-image-gallery
• Owner: jlozovei
• License: mit
• Created: 2018-08-22T04:13:18.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T13:43:02.000Z (about 2 years ago)
• Last Synced: 2024-04-13T17:08:34.961Z (8 months ago)
• Topics: gallery, image-gallery, vanilla-js
• Language: CSS
• Homepage: https://jlozovei.github.io/simple-image-gallery
• Size: 773 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Simple Image Gallery

No dependencies, no libs, no frameworks - a simple and fancy image gallery, crafted with a few lines of pure JavaScript!  

- [jlozovei.github.io/simple-image-gallery](https://jlozovei.github.io/simple-image-gallery)

- [codepen.io/jlozovei/simple-image-gallery](https://codepen.io/jlozovei/pen/eLdzNY)

### How To:

To use this simple gallery, just add the next markups:

#### HTML:

```html



    

    

    


    


        

        

        

        

        

        

    



```


#### JS:

```js

const galleryWrapper = document.getElementById('gallery'),

    galleryControllers = galleryWrapper.querySelectorAll('.gallery__controller')

galleryControllers.forEach(controller => {

    controller.addEventListener('click', () => {

        if(controller.classList.contains('gallery__controller--prev'))

            galleryGoBack()

        else

            galleryGoForward()

    })

})

function galleryGoBack(){

    const active = galleryWrapper.querySelector('img.active')

    active.classList.remove('active')

    if(active.previousElementSibling)

        active.previousElementSibling.classList.add('active')

    else

        this.galleryWrapper.querySelector('img:last-child').classList.add('active')

}

function galleryGoForward(){

    const active = galleryWrapper.querySelector('img.active')

    active.classList.remove('active')

    if(active.nextElementSibling)

        active.nextElementSibling.classList.add('active')

    else

        this.galleryWrapper.querySelector('img').classList.add('active')

}

```

### Cloning this repo

Also, you can clone/download this repo to change `HTML`, `CSS` and/or `JS` files locally. To do so:

```bash

# clone repo

git clone https://github.com/jlozovei/simple-image-gallery.git

# install dependencies

yarn

# serve with hot reload at localhost:9797

gulp

```