demtario / hes-gallery Goto Github PK

View Code? Open in Web Editor NEW

29.0 1.0 2.0 8.71 MB

Light, dependency free, responsive gallery script

Home Page: https://demtario.github.io/hes-gallery/demo/

License: MIT License

CSS 23.79% JavaScript 76.21%

gallery responsive images lightbox-gallery photos lightbox lightbox-gallery-plugin

hes-gallery's Introduction

Hello there 👋

I'm Artur, JavaScript FullStack Developer from Poland.

hes-gallery's People

Contributors

Stargazers

Watchers

Forkers

timrepke kristinita vyacheslavkostyanets

hes-gallery's Issues

feature_request(enhancement): thumbnails bar

1. Summary

Please, add thumbnails bar as it implemented in another lightbox plugins.

2. Argumentation

2.1. Common cause

Accessibility. Save users time.

2.2. Details

Currently, HesGallery end-user can solely view one image after another. If the gallery of images is large, it can be time-consuming.

If thumbnails bar will implement, end-users can quickly view all gallery.

3. Examples in another libraries

3.1. Fancybox (preferable)

Right-side bar.

Demo:

3.2. lightGallery.js

Demo:

4. Note

If this feature will be implemented, it would be nice to make it as a separated plugin, as in lightgallery.js, e.g.:

<script src="https://cdn.jsdelivr.net/npm/hes-gallery/dist/hes-gallery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/hes-gallery/dist/plugins/thumbnails-bar.min.js" defer></script>

In order to reduce the JavaScript size for users who don’t need this feature.

Thanks.

Doesn't work in IE

Hi, Thank you for all your effort. I just noticed that doesn't work in IE.

'AutoInit' set to false doesn't work.

When the 'autoInit' option is set to 'false,' the code does not work.

question/feature_request(interface): images overlaps close button

1. Summary

Currently, images may overlap the close button element. I couldn’t find how I can fix it.

2. Argumentation

For mobile devices users current behavior may be not best.

Design — I’m not sure if seeing the close button solely partially is the best web-design solution.
Accessibility — when the button isn’t visible, it may not be intuitive for users to understand how to exit the hes-gallery.

3. MCVE

I opened hes-gallery demo page in Firefox → I ran Responsive Design Mode → I made the screen small:

The dog image partially overlaps the close button.

I made the screen even less:

The close button aren’t visible.

4. Not helped

4.1. z-index

We can prioritize left and right arrows rather than images:

#hgallery button
    z-index inherit

Example result:

But I couldn’t find, how I can get the similar behavior for close button. It realized as pseudo-element #hg-bg::after (and possibly is not the best idea). I read about z-index for pseudo-elements on the Stack Overflow, but I couldn’t find, how I can solve the problem from this issue.

Thanks.

Improve web accessibility

Conclusions from #11

1. Summary

There are some errors on demo page reported by WAVE — web accessibility evaluation tool.

Report.

2. Behavior

1X Missing alternative text
2X Empty button

3. Fix

3.1. Alternative text

Some default alt text should to img#hg-pic.

Missing alternative text:

Why It Matters

Each image must have an alt attribute. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable.

3.2. Buttons

Empty button

Why It Matters

When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.

This can be solved by moving icon from CSS directly into button (in html structure), and by adding aria-label and title tag with "Next" or "Previous" text in them [source].

So to summarize, this:

<button id='hg-prev'></button>
<button id='hg-next'></button>

should be changed into:

<button id="hg-prev" title="Previous" aria-label="Next"> <img src="iconsource" /> </button>
<button id="hg-next" title="Next" aria-label="Previous"> <img src="iconsource" /> </button>

Bad subtitle position

feature_request(option): images in the different places in one gallery

1. Summary

It would be nice, if would be possible to include to one gallery images that are in different parts of the HTML page.

That is, add some option so that the behavior of hes-gallery in the second example is the same as in the first example.

2. Examples

2.1. One gallery MCVE

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Kira hes-gallery all in one gallery</title>
		<script src="https://cdn.jsdelivr.net/npm/hes-gallery/dist/hes-gallery.min.js" defer></script>
	</head>
	<body>
		<div class="hes-gallery">
			<img alt="First image description" src="https://64.media.tumblr.com/b46755ce8132f94072dc11ff1bc521f2/tumblr_o9c27npEFz1st5lhmo1_1280.jpg">
			<img alt="Second image description" src="https://64.media.tumblr.com/e448b56e7d05e08fc7d50fba6279162a/tumblr_o9c384UrKV1st5lhmo1_1280.jpg">
			<img alt="Third image description" src="https://64.media.tumblr.com/6a3c1841255255d81f00adc0559ae3e1/tumblr_o9c2klYKxX1st5lhmo1_1280.jpg">
		</div>
	</body>
</html>

All 3 images included in one gallery.

2.2. 3 galleries MCVE

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>Kira hes-gallery all in one gallery</title>
+		<title>Kira hes-gallery 3 different galleries</title>
		<script src="https://cdn.jsdelivr.net/npm/hes-gallery/dist/hes-gallery.min.js" defer></script>
	</head>
	<body>
		<div class="hes-gallery">
			<img alt="First image description" src="https://64.media.tumblr.com/b46755ce8132f94072dc11ff1bc521f2/tumblr_o9c27npEFz1st5lhmo1_1280.jpg">
+		</div>
+		<p>Between the gallery images may be something</p>
+		<div class="hes-gallery">
			<img alt="Second image description" src="https://64.media.tumblr.com/e448b56e7d05e08fc7d50fba6279162a/tumblr_o9c384UrKV1st5lhmo1_1280.jpg">
+		</div>
+		<p>It may or may not be related to gallery images</p>
+		<div class="hes-gallery">
			<img alt="Third image description" src="https://64.media.tumblr.com/6a3c1841255255d81f00adc0559ae3e1/tumblr_o9c2klYKxX1st5lhmo1_1280.jpg">
		</div>
	</body>
</html>

hes-gallery creates 3 different galleries.

3. Argumentation

As far as I understand, that to be included in one gallery, images must be placed inside one tag <div class="hes-gallery">.

But content creators, for various reasons, may want to put in one gallery not solely images that are nearby. For example, I want all screenshots on this page it would be possible to view in one gallery. But, unfortunately, I don’t understand how I can do it using hes-gallery 1.5.1. Related images, located in different places on the page, may be comfortable to watch in one gallery.

Thanks.

The origin of the project's name is unknown

Hello!

First of all I would like to thank you for a great project and your commitment. It is a pleasure to use it in many of my projects.

Problem

Getting to the heart of the matter. It seems to me that the origin of the project name is unclear and could be explained on a dedicated website or at least in the readme. I think that such information can contribute a lot to this project and spread the library.

Argumentation

Truth is a very important issue in today's world. I believe that there should be no concealment of important issues that could influence people's choices.

Examples in another libraries

Unfortunately, information about the origins of the names is not widely published in other libraries, but some authors publish them on their personal social media.

Evan You creator of Vue.js

We are waiting for this feature to be implemented. It doesn’t have to be too hard.

Thanks.

Node engine version

When I try to install, I get an error due to not compatible node version.

$ npm i -D hes-gallery
npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Required: {"node":"11.x"}
npm ERR! notsup Actual:   {"npm":"8.1.4","node":"v17.2.0"}

Broken titles and counter in IE

Pseudoelements with subtext and counter are not shown when gallery is opened in Internet Explorer

Background "onclick" not triggering hide.

I have an instance of Hes Gallery running and its all working great. However the onclick on the BG container isn't triggering the gallery to close. I have added a separate onclick using the id and an addEventListener but no luck there either. I can see that when I try to see the BG on the DOM, it doesn't highlight the element so wondering if it's a styling issue. Can also see that both onclicks are showing in the event listeners section of the console so they are definitely attached. Any guidance much appreciated.

Thumbnails

Jeśli user poda data-fullsize to tą wartość wyswietlać w galerii - oznacza to, że w tagu src jest miniaturka zdjęcie, a galeria ma wyswietylać pełną rozdzielczość

Multiple Sections?

Hey'ya
i kinda wanted to ask if its possible to add a feature that allows multiple sections as in pages.
Basically like this:

demtario / hes-gallery Goto Github PK

hes-gallery's Introduction

Hello there 👋

hes-gallery's People

Contributors

Stargazers

Watchers

Forkers

hes-gallery's Issues

1. Summary

2. Argumentation

2.1. Common cause

2.2. Details

3. Examples in another libraries

3.1. Fancybox (preferable)

3.2. lightGallery.js

4. Note

1. Summary

2. Argumentation

3. MCVE

4. Not helped

4.1. z-index

1. Summary

2. Behavior

3. Fix

3.1. Alternative text

3.2. Buttons

1. Summary

2. Examples

2.1. One gallery MCVE

2.2. 3 galleries MCVE

3. Argumentation

Problem

Argumentation

Examples in another libraries

Recommend Projects

Recommend Topics

Recommend Org