X3Photo Gallery Forums

winph · 16 Mar 2016, 07:42

mjau-mjau wrote:
winph wrote:or if i have slideshow gallery visitor can not click image to enlarge.
Not sure what you are referring to here. Already the visitor cannot click images in slideshow. Only images in the grids are clickable ...

Besides, there is quite good "Touch" support in mobile devices that detect the difference between actually clicking an image (touchstart + touchend, minimum 300ms), and actually scrolling ...

sorry not slideshow. i meant vertical view. or is there any way to disable lightbox for specific page?

16 Mar 2016, 10:45

winph wrote:sorry not slideshow. i meant vertical view. or is there any way to disable lightbox for specific page?

It is not currently possible no. It could be added, but I am hesitant about adding a specific setting for this. 1) Is it really needed? The visitor is already looking at the image in full size, although possibly it is obstructed by device scroll. Is it that bad to let them click the image so they can view the image in best view? Although I can see a glitch happening sometimes when using touch devices, I can't see this happening often ... It requires a clear CLICK on the image to open it. 2) Another setting to add to the settings-structure, which we are trying to keep minimal. 3) There are some logical issues, since basically ALL images in a gallery layout are set as links. It would require re-factoring the actual html code to wrap images inside another non-link tag. Not really your concern, but heads-up.

sHagen · 15 Aug 2016, 05:26

Hi @mjau-mjau,

I'm adding my question here. I would like to have the same thing. I'm currently playing with the slider and the vertical gallery:
Slider: http://alpha.stefanie-anderson.de/hochz ... i_und_tobi
Vertical: http://alpha.stefanie-anderson.de/hochz ... rafie/anna

I also would love to disable the lightbox for these specific pages. The slider may be questionable, but from a user experience expectation I would not assume that something opens when I click on an image. The vertical gallery shows the images full screen and even bigger when using portrait pictures. This makes this gallery type very great. But when you click on such a picture, the lightbox actually reduces it's size. I don't like that.

I worked with the wordpress-nextgen gallery before and there this was possible by adding a "#" as image link url. I tried this here, but it would trigger a page reload.

I would actually be happy to have a a button "disable" as link target on the image itself.

On a side note: Coming from wordpress, working with Imagevue is such a joyful experience...

sHagen · 15 Aug 2016, 05:41

Actually I figured that entering a "#" and selecting _self as target works. It disables the lightbox.

But it's not a perfect solution.
- First click on an image: Page scrolls to top (adds # to the end of the url)
- Second click on an image: Page reloads
- Third and every further click: The click is ignored, which is the expected behavior.

15 Aug 2016, 06:16

sHagen wrote:but from a user experience expectation I would not assume that something opens when I click on an image.

I am a not sure why that would be unexpected ... If anything should happen when the visitor does in fact click an image, it would be displaying a larger full screen version of the image. It's not difficult to avoid clicking an image, and neither is it difficult to close the popup window if they indeed did click an image ... Anyway, I'm sure there are opinions on this.

sHagen wrote:The vertical gallery shows the images full screen and even bigger when using portrait pictures. This makes this gallery type very great. But when you click on such a picture, the lightbox actually reduces it's size. I don't like that.

I'm assuming you are viewing from a very large monitor? Personally, I think the vertical view is awful for vertical aspect images. This is from my modern 13" retina macbook:

On startpage, I just see a chopped off head:

If I scroll down, I can at best view perhaps half the image on screen. To view the entire image in it's full context, I would need to scroll up and down, which just isn't an effective option.

Meanwhile, if I click an image, I can see the image in it's full glory in high-res:

Bottom option wins hands-down, and I find it strange that you would want to prevent anyone from getting a much better view. It's also a superior method for navigating between images, especially on mobile devices.

sHagen wrote:I worked with the wordpress-nextgen gallery before and there this was possible by adding a "#" as image link url. I tried this here, but it would trigger a page reload.

Here is a fix:

1. Add this code to settings -> custom -> custom javascript:

function x3_load(){
 $('body').on('click', '.noclick a.item', function(e){
   e.stopImmediatePropagation();
   return false;
 });
}

2. Now, for each gallery where you don't want the popup to work, just add the

noclick

class. Page -> settings -> gallery -> CSS classes:

sHagen wrote:On a side note: Coming from wordpress, working with Imagevue is such a joyful experience...

Great! :sunglasses:

sHagen · 15 Aug 2016, 08:45

Thank you very much!

mjau-mjau wrote: It's not difficult to avoid clicking an image...

It kind of is, when you try to "drag" the slider into the next place instead of pushing the buttons (especially on touch based devices).

This is definitely a corner case. And yes I like the vertical gallery exactly for the possibility to show images larger than the screen. It's used here and there for fashion, where the detail is more important than the entire picture. So thank you for your code snippet!

[EDIT: A full zoom level can also be achived using the zoom buttons in the lightbox. So yes, it is probably a better solution than building a big vertical gallery. I just got stuck with this idea as I have seen it and I liked it.]

As you notice, I'm playing around a lot with Imagevue currently and I try to convince some friends to use it over the wordpress solution they have (and that I have to maintain).

winph · 24 Aug 2016, 07:35

mjau-mjau wrote:
sHagen wrote:but from a user experience expectation I would not assume that something opens when I click on an image.
I am a not sure why that would be unexpected ... If anything should happen when the visitor does in fact click an image, it would be displaying a larger full screen version of the image. It's not difficult to avoid clicking an image, and neither is it difficult to close the popup window if they indeed did click an image ... Anyway, I'm sure there are opinions on this.

sHagen wrote:The vertical gallery shows the images full screen and even bigger when using portrait pictures. This makes this gallery type very great. But when you click on such a picture, the lightbox actually reduces it's size. I don't like that.
I'm assuming you are viewing from a very large monitor? Personally, I think the vertical view is awful for vertical aspect images. This is from my modern 13" retina macbook:

On startpage, I just see a chopped off head:

If I scroll down, I can at best view perhaps half the image on screen. To view the entire image in it's full context, I would need to scroll up and down, which just isn't an effective option.

Meanwhile, if I click an image, I can see the image in it's full glory in high-res:

Bottom option wins hands-down, and I find it strange that you would want to prevent anyone from getting a much better view. It's also a superior method for navigating between images, especially on mobile devices.

sHagen wrote:I worked with the wordpress-nextgen gallery before and there this was possible by adding a "#" as image link url. I tried this here, but it would trigger a page reload.
Here is a fix:

1. Add this code to settings -> custom -> custom javascript:
Code
function x3_load(){
 $('body').on('click', '.noclick a.item', function(e){
   e.stopImmediatePropagation();
   return false;
 });
}
2. Now, for each gallery where you don't want the popup to work, just add the
noclick

class. Page -> settings -> gallery -> CSS classes:

sHagen wrote:On a side note: Coming from wordpress, working with Imagevue is such a joyful experience...
Great! :sunglasses:

THANKS THANKS THANKS
I been waiting for this and it worked great. Now i have another question.... after adding this script when i mouse over the image the cursor still changes into the magnifying glass...

24 Aug 2016, 11:04

winph wrote:Now i have another question.... after adding this script when i mouse over the image the cursor still changes into the magnifying glass...

Try to add the following to settings -> custom -> custom CSS:

.noclick a.item {
  cursor: default !important;
}

I'm not 100% sure you need to include the !important attribute.

winph · 25 Aug 2016, 01:43

Try to add the following to settings -> custom -> custom CSS:
Code
.noclick a.item {
  cursor: default !important;
}
I'm not 100% sure you need to include the !important attribute.

Thanks both work with or without !important

winph · 03 Sep 2017, 09:31

hi, the custom JS for no click to open lightbox is not working anymore. any update?

function x3_load(){
 $('body').on('click', '.noclick a.item', function(e){
   e.stopImmediatePropagation();
   return false;
 });
}

03 Sep 2017, 10:31

winph wrote:hi, the custom JS for no click to open lightbox is not working anymore. any update?

Do you have a link to a page where this functionality is included, so I can diagnose it?

winph · 03 Sep 2017, 11:31

http://sherwintan.com/journal/fathers-day/

03 Sep 2017, 13:08

Probably because in a recent update, I rewrote image click-handlers to be more efficient by delegating them from an element closer to the images. I am not 100% sure, but try this:

function x3_load(){
 $('#content').on('click', '.noclick a.item', function(e){
   e.stopImmediatePropagation();
   return false;
 });
}

If the above doesn't work, try this instead:

function x3_load_page(){
 $('.noclick').on('click', 'a.item', function(e){
   e.stopImmediatePropagation();
   return false;
 });
}

winph · 04 Sep 2017, 08:48

function x3_load_page(){
 $('.noclick').on('click', 'a.item', function(e){
   e.stopImmediatePropagation();
   return false;
 });
}

this works for me. THANKS AGAIN :)

X3Photo Gallery Forums

Lightbox29 postsPage 2 of 2

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox

Re: Lightbox