Page 1 of 1

Image Comparison Slider

Posted: 12 Sep 2015, 15:00
by nicolashodee
Hi everybody :) *

While the new X3 is still under construction, I was wondering about a functionality that would allow some specific users to display 2 images (or more) in a same frame, depending on the cursor positions : like a "before & after" for a retouched photo.

here's an exemple with a dedicated cursor : http://www.christophehuet.com/#/MAKING-OF/437 (awsome work..... :wink: ) .
and an another one using the cursor position in the frame : http://codyhouse.co/demo/image-comparis ... index.html


For those of us that are professionals photographers, digital retouchers, 3D artist, or painters, it would be a nice way to show the way we work .

With X2 I tried to use popup links with a jquery slider, but a built-in solution compatible with Mobile devices would be better of course.
Maybe that's clearly not the priority, but it would be a great extra feature !

* : my english is not perfect, I know :roll: :D

Re: Image Comparison Slider

Posted: 13 Sep 2015, 00:12
by mjau-mjau
Sounds like a great idea ... an idea also hidden deep in my "todo" archives somewhere. Will just need to get next massive "release candidate" launched and tested before we can take time for features like this.

Was your main idea to have the "comparison slider" on a separate page? ... intertwined into context? ... or embedded in a popup window (the X3 popup window), thus opened from an inline link?

Re: Image Comparison Slider

Posted: 13 Sep 2015, 15:40
by nicolashodee
I was using the "link" field available in the panel for each image , which opened the X3 popup window (that displayed a dedicated html page). Not really the best way in practice (one image = one page and all its files), but it was enough for people seeing it on a laptop.

Here's an another link of a website showing some "before & after" :P : http://www.jefprod.com/works/birdy

I'm really curious to see what you could purpose with your developper's eye, I would be glad to help ! :)

Re: Image Comparison Slider

Posted: 29 Jan 2016, 18:19
by localhost
I really would like to have this implemented :)

Here's another great example: https://fstoppers.com/originals/6-loath ... ane-103122

Re: Image Comparison Slider

Posted: 29 Jan 2016, 22:36
by mjau-mjau
localhost wrote:I really would like to have this implemented :)

Here's another great example: https://fstoppers.com/originals/6-loath ... ane-103122
Cool.

Question: How/where would you be using this in X3? This seems more like a plugin you would use in custom content section perhaps? I could probably offer a custom fix for that immediately. Not sure how this would work as a "gallery module" though, as it would certainly affect all images in a gallery-layout ... and not sure how to handle the fact that each item would require two images.

Re: Image Comparison Slider

Posted: 30 Jan 2016, 22:15
by localhost
I won't use this in gallery for sure but more on the blog content side. Where I can show my fellow photographers the before and after post processing. More like for a tutorial articles. So yeah. There will be an specific page I will be using it.

Re: Image Comparison Slider

Posted: 31 Jan 2016, 02:24
by mjau-mjau
Ok, so here is a quick tutorial on how to add this into your X3 content. It's a bit of a "hack" for now, but I will likely add it natively to X3 perhaps in next release.

1. Go to panel -> custom, add the following to custom javascript:
Code
var twenty = false;
function x3_load(){
  $('head').append('<link rel="stylesheet" type="text/css" href="http://zurb.com/playground/uploads/upload/upload/93/twentytwenty.css">');
  $.when(
    $.getScript("http://zurb.com/playground/uploads/upload/upload/92/jquery.twentytwenty.js"),
    $.getScript("https://cdn.jsdelivr.net/jquery.event.move/1.3.5/jquery.event.move.min.js"),
    $.Deferred(function(deferred){
      $(deferred.resolve);
    })
  ).done(function(){
    twenty = true;
  });
}
function x3_load_page(){
  x3_twenty();
}
function x3_twenty(){
  if(twenty) {
    $('.myslider').twentytwenty();
  } else {
    setTimeout(x3_twenty, 1000);
  }
}
2. Panel -> custom, add the following to custom CSS:
Code
.twentytwenty-handle:hover {
  cursor: col-resize;
}
3. Add your images into your page custom content like this:
Code
<div class="myslider">
<img src="{{path}}image1.jpg" />
<img src="{{path}}image2.jpg" />
</div>
The myslider class is used to identify the contains that contains the two images, and will create an image-comparison slider from the two images. In the example above, we are loading two images from within the same folder, by using the {{path}} variable. Keep in mind, if you add images to the page like this, you will likely want to also HIDE the page gallery module (so images are not listed there also).
Image

I will an improved, easier solution into next release ... This is a useful content-plugin for typical X3 websites.

Re: Image Comparison Slider

Posted: 31 Jan 2016, 05:50
by localhost
Awesome... will give it a go now.

Re: Image Comparison Slider

Posted: 31 Jan 2016, 06:09
by localhost
I tried it and did not work... followed your procedure step by step.

http://larryanda.com.au/test/

Re: Image Comparison Slider

Posted: 31 Jan 2016, 07:59
by mjau-mjau
localhost wrote:I tried it and did not work... followed your procedure step by step.

http://larryanda.com.au/test/
You didn't add the custom javascript code ... or you have something else there that is breaking it. I checked your source, and the custom JS is incomplete and cut off:
Code
<script id="custom-javascript"><!-- Go to www.addthis.com/dashboard to customize your tools --><script type="text/javascript" src="</script>
It will work. I have tested it from here.

Re: Image Comparison Slider

Posted: 31 Jan 2016, 08:00
by mjau-mjau
Looks like something from Addthis ... I hope you are very aware of what reasons you are using AddThis for. It's bloated and ugly if you ask me ...

Re: Image Comparison Slider

Posted: 01 Feb 2016, 04:21
by localhost
It's working now... thanks :)

I disabled the Addthis. Thanks for the info.

Re: Image Comparison Slider

Posted: 24 Oct 2018, 18:25
by CrisC
Hi, is this feature already implemented somewhere?
I could not find a setting which would enable such a slider - but maybe, I was just blind ;)

I have tried the above code, but it did not work on my test-page... and since the post is from 2016 - and the Javascript does call some external .js files, it might be, that these files are no longer available?

Re: Image Comparison Slider

Posted: 24 Oct 2018, 23:43
by mjau-mjau
CrisC wrote:Hi, is this feature already implemented somewhere?
Yes. Find example and instructions in the link below:
https://demo.photo.gallery/examples/plu ... on-slider/

You can also find a source example in your Page > Content settings:
Image
CrisC wrote:I have tried the above code, but it did not work on my test-page... and since the post is from 2016 - and the Javascript does call some external .js files, it might be, that these files are no longer available?
The examples above are outdated. This is already implemented into X3, and the codes above may no longer work.

Re: Image Comparison Slider

Posted: 25 Oct 2018, 02:51
by CrisC
perfect thanks :)