Image Compare Slider

Hey Joseph! I just test-installed the component here but got the following warning:

I’ll disable it for now while you take a look.

1 Like

I’m not getting the message on the staging site so it must be specific to this site, maybe it’s conflicting with another component. Can you re-enable it for a moment, open up the inspector/developer tools of your browser, and share the console errors with me?

Huh, I just reactivated the TC and I’m not getting that warning anymore… Please do a little testing and if you feel it’s ready for prime time go ahead and make a sticky post announcement in #general-forums:blender-artists-updates :slight_smile:

See my test post here.

2 Likes

Funny thing… after i read this post i clicked on the “see my test post here”… (with open in new tab ) not instantly recognizing it’s just the same thread… and then in the first it’s two images and in the second the (working okay) image compare slider…
and yes it’s the same URL… (maybe this has something to do because i already read the thread… → cache (mini) issue)


So it works with Vivaldi 5.7 under linux debian 10 … (after re/new-loading the page…)

Yeah you’ll have to reload to load the new code.

Yeah,

I had to hit F5 in chrome and it works for me under Chrome on Windoze

1 Like

Awesome, was waiting to post this:

2 Likes

Hmm… does the data-masonry-gallery button do have also the hover-text: “Image comparison slider” ??

…or is it just me… (Vivaldi 6.1 on linux)

That should have been fixed a while back, but components don’t auto-update (you have to update Discourse), so that should be fixed on the nest forum update

Hmm, I don’t see any Theme Component updates available?

Updating the masonry image gallery component should fix it (we were accidentally using the same translation components but they’ve since changed theirs) but there should be an update for the slider as well :thinking: GitHub has been acting up lately, I’ll go force push another commit

I have updated the Masonry Grid component, but didnt see an update for the slider yet.

Seems to work now… i see now: “Image Gallery” and “Image comparison slider”

1 Like

If i upload two images to the comparison slider,the slider works.
But if i click on the preview in the thread after edit,i can only move the slider on the preview without open the images to fullview.
I would expect if i click on the preview the picture opens full res with the slider,if that makes sence.How?

And second problem is i would know how can i put more comparison images pairs at once in one post.
I have tryed to put another pair of images under the first pair,but does not show up.
Is there a code to take in between or is this not working with more pairs of images in one post?

Firefox latest

This isn’t possible- we had to sacrifice lightbox functionality for greater compatiblity with existing functions :slight_smile:

Works for me:



Not sure why it isn’t working for you

1 Like

I see,thanks for clarification.

How?Have you put the other image lines direct underneath without any commandline in between?
I mean is the script smart enough to seperate each image pairs?Maybe i have to try again.

Thanks

Yes, it uses a QuerySelectorAll to iterate over each slider.
Just add a slider, click outside the </div>, add another slider :slight_smile:

Like this:

<div data-image-comparison-slider data-direction-horizontal>

Add two images here. Change 'data-direction-horizontal' to 'data-direction-vertical' for a vertical slider.

</div>

<div data-image-comparison-slider data-direction-horizontal>

Add two images here. Change 'data-direction-horizontal' to 'data-direction-vertical' for a vertical slider.

</div>
1 Like

In your example you have to put the comparison slider line again underneath the upper image pairs everytime then.

Ok thanks

This is an automated message - since the last reply was more than 3 months old, we auto-marked it as the solution. If you still need help, just post a new reply.