Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/legomolina/lmimage-gallery
A CSS3 and Jquery dynamic Image Gallery
https://github.com/legomolina/lmimage-gallery
Last synced: about 1 month ago
JSON representation
A CSS3 and Jquery dynamic Image Gallery
- Host: GitHub
- URL: https://github.com/legomolina/lmimage-gallery
- Owner: legomolina
- Created: 2015-07-23T19:40:07.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-07-23T22:52:07.000Z (over 9 years ago)
- Last Synced: 2023-03-02T01:23:17.840Z (almost 2 years ago)
- Language: HTML
- Size: 5.62 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LMImage-gallery (v1.0)
##### Introduction
LMImage Gallery is a little project made to bring people an easy and fast way to make image gallery for their sites.
This library uses a lot of CSS3 functionalities so pay attention to the browser you usually use. This gallery can be used with mouse or with arrow keys and it is fully responsive, so you can use it in any device.
##### Installation
This library needs Jquery to work.
```javascript
```
To use LMWeb Finder you need to import js file into your html:
```javascript
```
Also you need to create a script into your html head in order to assign functions to key arrows, icons and instantiate the library:
```javascript
window.onload = function () {
LMImageGallery = new LMImageGallery(); //create a instance of library to use controls
window.onkeydown = function (e) { //when anykey is pressed
if(e.keyCode === 37) { //left arrow
LMImageGallery.previous();
}
if(e.keyCode === 39) { //right arrow
LMImageGallery.next();
}
if(e.keyCode === 38) { //up arrow
LMImageGallery.newTab();
}
if(e.keyCode === 40) { //down arrow
LMImageGallery.close();
}
};
$('.gallery-item img').click(function (e) { //when image is clicked
LMImageGallery.open($(this));
});
$('#prev_image').click(function (e) { //previous button
LMImageGallery.previous();
});
$('#next_image').click(function (e) { //next button
LMImageGallery.next();
});
$("#open_large").click(function (e) { //open large image button
LMImageGallery.newTab();
});
$('#close_image').click(function (e) { //close button
LMImageGallery.close();
});
};
```
Second you need to create a gallery container, the element where you'll place your images (this MUST BE an ul tag):
```html
```
And inside it you can add many items as you want:
```html
```
It's important that this items are li elements and they contain img elements with correlative data-image number. The src attribute can point anywhere in your server and alt and title attributes are for cross-browser compatibility.
Now you need to create the large image. This part allows you to make your images big when you click in small one.
```html
```
#####Configuration
As I said before you can add or remove images from the list simply adding or removing li items with it's image. Also you can enable or disable keyboard controls deleting next lines:
```javascript
window.onkeydown = function (e) { //when anykey is pressed
if(e.keyCode === 37) { //left arrow
LMImageGallery.previous();
}
if(e.keyCode === 39) { //right arrow
LMImageGallery.next();
}
if(e.keyCode === 38) { //up arrow
LMImageGallery.newTab();
}
if(e.keyCode === 40) { //down arrow
LMImageGallery.close();
}
};
```
There is an example for you to view how it works.
The complete code to place in your html is in index.html file.
All images are extracted from "Sample images" folder from Windows.
Control icons are from Font Awesome. Font Awesome by Dave Gandy
LMWebFinder by legomolina is licensed under a Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional License.