Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
nicolashodee
Topic Author
Posts: 2
Joined: 24 Mar 2011, 16:20

Image Comparison Slider

12 Sep 2015, 15:00

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
Attachments
image-comparison-slider-featured-600x385.png
image-comparison-slider-featured-600x385.png (9.33 KiB) Viewed 5228 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12195
Joined: 30 Sep 2006, 03:37

Re: Image Comparison Slider

13 Sep 2015, 00:12

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?
 
User avatar
nicolashodee
Topic Author
Posts: 2
Joined: 24 Mar 2011, 16:20

Re: Image Comparison Slider

13 Sep 2015, 15:40

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 ! :)
 
localhost
Experienced
Posts: 156
Joined: 20 Sep 2011, 07:09

Re: Image Comparison Slider

29 Jan 2016, 18:19

I really would like to have this implemented :)

Here's another great example: https://fstoppers.com/originals/6-loath ... ane-103122
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12195
Joined: 30 Sep 2006, 03:37

Re: Image Comparison Slider

29 Jan 2016, 22:36

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.
 
localhost
Experienced
Posts: 156
Joined: 20 Sep 2011, 07:09

Re: Image Comparison Slider

30 Jan 2016, 22:15

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.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12195
Joined: 30 Sep 2006, 03:37

Re: Image Comparison Slider

31 Jan 2016, 02:24

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.
 
localhost
Experienced
Posts: 156
Joined: 20 Sep 2011, 07:09

Re: Image Comparison Slider

31 Jan 2016, 05:50

Awesome... will give it a go now.
 
localhost
Experienced
Posts: 156
Joined: 20 Sep 2011, 07:09

Re: Image Comparison Slider

31 Jan 2016, 06:09

I tried it and did not work... followed your procedure step by step.

http://larryanda.com.au/test/
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12195
Joined: 30 Sep 2006, 03:37

Re: Image Comparison Slider

31 Jan 2016, 07:59

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.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12195
Joined: 30 Sep 2006, 03:37

Re: Image Comparison Slider

31 Jan 2016, 08:00

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 ...
 
localhost
Experienced
Posts: 156
Joined: 20 Sep 2011, 07:09

Re: Image Comparison Slider

01 Feb 2016, 04:21

It's working now... thanks :)

I disabled the Addthis. Thanks for the info.
 
CrisC
Experienced
Posts: 59
Joined: 23 Oct 2018, 05:13

Re: Image Comparison Slider

24 Oct 2018, 18:25

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?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12195
Joined: 30 Sep 2006, 03:37

Re: Image Comparison Slider

24 Oct 2018, 23:43

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.
 
CrisC
Experienced
Posts: 59
Joined: 23 Oct 2018, 05:13

Re: Image Comparison Slider

25 Oct 2018, 02:51

perfect thanks :)