Light, dependency free script creating a responsive gallery
Attach scripts to page You can use a hosted version by hooking this script or import it locally by downloading a package of files, but remember to attach a CSS style sheet and disable the auto-hooking of styles in the options (more in Global options section).
<script src="https://unpkg.com/hes-gallery/dist/hes-gallery.min.js"></script>
When using CDN global object HesGallery
will be registred
You can also install package by npm or yarn
$ npm i hes-gallery
$ yarn add hes-gallery
For each container with photos that you want to use as a gallery, give the class: (Each container is a singe, independent gallery)
.hes-gallery
You can modify the options of the gallery using function described below
<div class="hes-gallery">
<img src="image1.jpg" alt="image1" data-subtext="Subtext" />
<img src="image2.jpg" alt="image2" data-subtext="Second subtext" />
<img src="image3.jpg" alt="image3" data-subtext="Subtext" />
<img src="image4.jpg" alt="image4" data-subtext="Subtext" />
</div>
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.
Sample:
HesGallery.setOptions({
wrapAround: true,
disableScrolling: true,
})
HesGallery.init({
wrapAround: true,
disableScrolling: true,
})
Important
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.
Parameter | Default | Description |
---|---|---|
wrapAround |
false | Create loop on gallery, you can go from last photo to first with one click |
showImageCount |
true | Show number of current photo (for example “1/5”) |
disableScrolling |
false | Disable scrolling when gallery is on |
hostedStyles |
true | Automatically attaches a style sheet to the source on api.heseya.com (turn off if you want to put hes-gallery on your own server) |
animations |
true | Using animations in gallery |
keyboardControl |
true | Keyboard control in galleries |
minResolution |
0 | The minimum screen width for which the gallery will work (in px) |
autoInit |
true | If true, automaticly run HesGallery.init() when DOM Content is loaded |
linkNested |
false | If true, you can use images nested in links |
If you like, you can give one set of other options by adding attributes to the .hes-gallery
class’s container
Attributes accept only true or false value, in any other case the gallery will adopt values set by HesGallery.setOptions ()
or default!
<div class="hes-gallery" data-wrap="true" data-img-count="false">
<!-- Some <img> here -->
</div>
Parameter | Global equivalent | Description |
---|---|---|
data-wrap |
wrapAround | Create loop on gallery, you can go from last photo to first with one click |
data-img-count |
showImageCount | Show number of current photo (for example “1/5”) |
Some of functions which you can use to manage the gallery
Function | Description |
---|---|
HesGallery.init() |
Reloads the gallery in case when for example content of gallery container has changed and we want to have actual images in gallery |
HesGallery.show(m, n) |
Show n photo from m gallery |
HesGallery.next() |
Show next photo |
HesGallery.prev() |
Show previous photo |
HesGallery.hide() |
Hide gallery |
HesGallery.setOptions() |
Allows you to modify the gallery options (more above) |
Parameter | Description |
---|---|
data-subtext |
He creates a signature under the picture in the gallery |
data-disabled |
If set will cause that the image will not be included in the gallery |
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 |
data-src |
Some plugins (PR #12) can use this attribute to get the path to the photo. If this param exists, the HesGallery will use it, insead of the src attribute |
To support browsers without JavaScript, an option is to statically link the “large” images like so:
<div class="hes-gallery">
<a href="image1-large.jpg" class="hg-image">
<img src="image1-small.jpg" alt="image1" data-subtext="Subtext" />
</a>
...
</div>
In that case, users can still open an expanded view but if JS is enabled, they get the HesGallery.
To enable this feature, set linkNested
to true in the options during initialisation.
Feel free to contribute any changes/features for future versions of HesGallery. Please work, and create Pull Pequests on develop
branch.
To run build scripts you probably need node in version 11
.
npm i
commandnpm run dev
you can run development server with gulp & browsersync to faster the development of your featurenpm run build
to only build a script by babel and minimalize code/demo
folderThanks for your help!
Licence: MIT Copyright 2019 Artur Mędrygał