Skip to content

Commit e5e4141

Browse files
author
Artur Mędrygał
committed
Merge branch 'develop'
2 parents 3bd0fff + 000f07f commit e5e4141

11 files changed

Lines changed: 3934 additions & 478 deletions

‎README.md‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ You can modify the options of the gallery using function described below
3939
```
4040

4141
## Global options
42-
If you want, you can modify the gallery options to make it work better to you by using function `HesGallery.setOptions()`, you can also change settings passing settings object to `HesGallery.init()` function.
42+
If you want, you can modify the gallery options to make it work better to you by using function `HesGallery.setOptions()`, you can also change settings passing settings object to `HesGallery.init()` function.
4343
Sample:
4444
```javascript
4545
HesGallery.setOptions({
@@ -52,7 +52,7 @@ HesGallery.init({
5252
disableScrolling: true
5353
})
5454
```
55-
**Important**
55+
**Important**
5656
If you change the settings after initializing the script, not all options can be applied. To make sure that they will, use `HesGallery.init(options)` function.
5757

5858
### Possible options:
@@ -66,17 +66,18 @@ Parameter | Default | Description
6666
`keyboardControl` | *true* | Keyboard control in galleries
6767
`minResolution` | *0* | The minimum screen width for which the gallery will work (in px)
6868
`autoInit` | *true* | If true, automaticly run `HesGallery.init()` when DOM Content is loaded
69+
`linkNested` | *false* | If true, you can use images nested in links
6970

7071
## Options of single gallery
71-
If you like, you can give one set of other options by adding attributes to the `.hes-gallery` class's container
72+
If you like, you can give one set of other options by adding attributes to the `.hes-gallery` class's container
7273
**Attributes accept only *true* or *false* value, in any other case the gallery will adopt values set by `HesGallery.setOptions ()` or default!**
7374
```html
7475
<div class="hes-gallery" data-wrap="true" data-img-count='false' >
7576
<!-- Some <img> here -->
7677
</div>
7778
```
7879

79-
### Available local options:
80+
### Available local options:
8081
Parameter | Global equivalent | Description
8182
---|---|---
8283
`data-wrap` | *wrapAround* | Create loop on gallery, you can go from last photo to first with one click
@@ -101,6 +102,30 @@ Parameter | Description
101102
`data-disabled` | If set will cause that the image will not be included in the gallery
102103
`data-fullsize` | If we want to use thumbnails, we give the thumbnail path to the `src` tag and a path to the full version of graphics to the` data-fullsize` tag
103104

105+
## Images nested in Links
106+
To support browsers without JavaScript, an option is to statically link the "large" images like so:
107+
```html
108+
<div class="hes-gallery">
109+
<a href="image1-large.jpg" class="hg-image">
110+
<img src="image1-small.jpg" alt="image1" data-subtext="Subtext" />
111+
</a>
112+
...
113+
</div>
114+
```
115+
In that case, users can still open an expanded view but if JS is enabled, they get the HesGallery.
116+
To enable this feature, set `linkNested` to true in the options during initialisation.
117+
118+
## Contribution
119+
Feel free to contribute any changes/features for future versions of HesGallery. Please work, and create Pull Pequests on `develop` branch.
120+
121+
### How to run?
122+
1. Install dependecies with `npm i` command
123+
2. By `npm run dev` you can run development server with gulp & browsersync to faster the development of your feature
124+
3. You can also use a `npm run build` to only build a script by babel and minimalize code
125+
4. It would be also greate if you can provide a examples of your feature in readme and in `/demo` folder
126+
4. When you finish, push your changes and create a Pull Request
127+
128+
Thanks for your help!
104129

105-
*Licence: [MIT](https://opensource.org/licenses/MIT)*
130+
*Licence: [MIT](https://opensource.org/licenses/MIT)*
106131
*Copyright 2019 [Artur Mędrygał](mailto:medrygal.artur@gmail.com)*

‎README_PL.md‎

Lines changed: 0 additions & 97 deletions
This file was deleted.

‎demo/index.html‎

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,60 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22

33
<html>
4-
5-
<head>
4+
<head>
65
<title>HesGallery</title>
7-
<meta charset="UTF-8">
8-
<meta name="viewport" content="initial-scale=1.0">
9-
<link rel="stylesheet" href="style.css">
10-
<link rel="stylesheet" href="../src/hes-gallery.css">
11-
</head>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="initial-scale=1.0" />
8+
<link rel="stylesheet" href="style.css" />
9+
<link rel="stylesheet" href="../src/hes-gallery.css" />
10+
</head>
1211

13-
<body class="elo">
12+
<body class="elo">
1413
<header>
15-
<h1>HesGallery</h1>
16-
<a href="https://github.com/demtario/hes-gallery" target="_blank" class="btn">GitHub repository</a>
14+
<h1>HesGallery</h1>
15+
<a href="https://github.com/demtario/hes-gallery" target="_blank" class="btn">
16+
GitHub repository
17+
</a>
1718
</header>
18-
19-
<main>
20-
<h2>Gallery 1</h2>
21-
<div class="hes-gallery">
22-
<img src="img/dogo-uno.jpg" alt="image1" data-fullsize="img/dogo-uno.jpg" data-subtext='piesiak'>
23-
<img src="img/dogo-dos.jpeg" alt="image2" data-subtext="Podpis zdjęcia kolejnego">
24-
<img src="img/dogo-tres.jpeg" alt="image3" data-subtext="Kolejny podpis zdjęcia">
25-
<img src="img/dogo-cuatro.jpeg" alt="image4" data-subtext="Podpis czwartego już zdjęcia" >
26-
</div>
27-
28-
<h2>Gallery 2</h2>
29-
<div class="hes-gallery" data-wrap="false" data-img-count="false">
30-
<img src="img/uno.jpeg" alt="image1" data-subtext="kociak" data-alt="kociak">
31-
<img src="img/dos.jpeg" alt="image2" data-subtext="Kolejny kociak">
32-
<img src="img/tres.jpeg" alt="image3" data-subtext="Trzeci kociak ^^" >
33-
<img src="img/cuatro.jpeg" alt="image4" data-subtext="Leci czwart" data-alt="co jeest" >
34-
<img src="img/cinto.jpeg" alt="image5" data-subtext="Daleeeej" >
35-
<img src="img/seis.jpeg" alt="image6" data-subtext="Kozaaak" >
36-
<img src="img/siete.jpeg" alt="image7" data-subtext="Słodziaaaaak" >
37-
<img src="img/ocho.jpeg" alt="image8" data-subtext="Ostatni kociak :/" >
38-
</div>
3919

20+
<main>
21+
<h2>Gallery 1</h2>
22+
<div class="hes-gallery">
23+
<img
24+
src="img/dogo-uno.jpg"
25+
alt="image1"
26+
data-fullsize="img/dogo-uno.jpg"
27+
data-subtext="piesiak"
28+
/>
29+
<img src="img/dogo-dos.jpeg" alt="image2" data-subtext="Podpis zdjęcia kolejnego" />
30+
<img src="img/dogo-tres.jpeg" alt="image3" data-subtext="Kolejny podpis zdjęcia" />
31+
<img src="img/dogo-cuatro.jpeg" alt="image4" data-subtext="Podpis czwartego już zdjęcia" />
32+
</div>
33+
34+
<h2>Gallery 2</h2>
35+
<div class="hes-gallery" data-wrap="false" data-img-count="false">
36+
<img src="img/uno.jpeg" alt="image1" data-subtext="kociak" data-alt="kociak" />
37+
<img src="img/dos.jpeg" alt="image2" data-subtext="Kolejny kociak" />
38+
<img src="img/tres.jpeg" alt="image3" data-subtext="Trzeci kociak ^^" />
39+
<img src="img/cuatro.jpeg" alt="image4" data-subtext="Leci czwart" data-alt="co jeest" />
40+
<img src="img/cinto.jpeg" alt="image5" data-subtext="Daleeeej" />
41+
<img src="img/seis.jpeg" alt="image6" data-subtext="Kozaaak" />
42+
<img src="img/siete.jpeg" alt="image7" data-subtext="Słodziaaaaak" />
43+
<img src="img/ocho.jpeg" alt="image8" data-subtext="Ostatni kociak :/" />
44+
</div>
4045
</main>
4146

42-
<!-- <script src="../src/hes-gallery.js"></script> -->
43-
<script src="../dist/hes-gallery.js"></script>
47+
<script src="../src/hes-gallery.js"></script>
48+
<!-- <script src="../dist/hes-gallery.js"></script> -->
4449
<script>
45-
46-
HesGallery.setOptions({
47-
disableScrolling: false,
48-
hostedStyles: false,
49-
animations: true,
50-
51-
showImageCount: true,
52-
wrapAround: true
53-
});
54-
50+
HesGallery.setOptions({
51+
disableScrolling: false,
52+
hostedStyles: false,
53+
animations: true,
54+
55+
showImageCount: true,
56+
wrapAround: true,
57+
})
5558
</script>
56-
</body>
59+
</body>
5760
</html>

‎dist/hes-gallery.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
22
3-
HesGallery v1.4.11
3+
HesGallery v1.4.12
44
55
Copyright (c) 2018-2019 Artur Medrygal <medrygal.artur@gmail.com>
66
@@ -142,8 +142,6 @@
142142
z-index: 11;
143143
cursor: pointer;
144144
background-color: transparent;
145-
background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz4NCiAgICA8cGF0aCBkPSJNMC0uMjVoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4NCjwvc3ZnPg==');
146-
background-size: contain;
147145
border: 0;
148146
outline: 0;
149147
opacity: 0;
@@ -152,6 +150,13 @@
152150
visibility: hidden;
153151
}
154152

153+
#hgallery button img {
154+
width: 100%;
155+
height: 100%;
156+
-o-object-fit: contain;
157+
object-fit: contain;
158+
}
159+
155160
#hgallery.open button {
156161
visibility: visible;
157162
opacity: 0.7;

0 commit comments

Comments
 (0)