Search…

X3 Photo Gallery Support Forums

Search…
 
Ruud de Soet
Experienced
Topic Author
Posts: 26
Joined: 11 Apr 2018, 09:42

comparison-slider

27 Apr 2018, 06:06

Is it possible to use my own defined, in custom CSS, frame in the comparison-slider?
At this moment I can on/off the standard frame (black) by removing the "x3-style-frame".
<div class="comparison-slider x3-style-frame" data-hover="false"> 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: comparison-slider

27 Apr 2018, 06:47

Sure. Just create your class, and assign it to the html <div> element. For example:
Code
<div class="comparison-slider custom-frame" data-hover="false">
In settings > Custom > Custom CSS:
Code
.custom-frame {
  padding: 5px;
  background: #EEE;
}
 
Ruud de Soet
Experienced
Topic Author
Posts: 26
Joined: 11 Apr 2018, 09:42

Re: comparison-slider

27 Apr 2018, 07:28

Thanks for your answer and its works partly.  The padding of 5px will be only on the left side of the picture and a double size at the bottom. Up and right frame is missing. The photo is uploaded bij X3 and the size is 1600x1066px.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: comparison-slider

27 Apr 2018, 11:31

The comparison slider does some javascript, so probably better if you create an OUTER wrapper <div> to include the frame:
Code
<div class="custom-frame">
  <div class="comparison-slider" data-hover="false"> ... </div>
</div>
Or if you have a link, I can diagnose better.
 
Ruud de Soet
Experienced
Topic Author
Posts: 26
Joined: 11 Apr 2018, 09:42

Re: comparison-slider

27 Apr 2018, 12:00

The example (I used the red color only for test!): http://www.ruuddesoet.nl/x3/Workshops-Curssusen/
In this example I used the :
Code
<div class="comparison-slider custom-frame" data-hover="false">
I tried the second suggestion, OUTER wrapper, but will not work. Both pictures are separate displayed with a frame.
If you want, I can send you the Panel userID and PW.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: comparison-slider

27 Apr 2018, 12:38

Please send panel login.
 
Ruud de Soet
Experienced
Topic Author
Posts: 26
Joined: 11 Apr 2018, 09:42

Re: comparison-slider

27 Apr 2018, 13:02

Done.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: comparison-slider

27 Apr 2018, 13:14

Works fine when you wrap the slider inside a <div> for the frame:
Image

Code
<div class="custom-frame">
  <div class="comparison-slider" data-hover="false">
    <img src="{{path}}Voorbeeld1.jpg">
    <img src="{{path}}Voorbeeld2.jpg">
  </div>
</div>
 
Ruud de Soet
Experienced
Topic Author
Posts: 26
Joined: 11 Apr 2018, 09:42

Re: comparison-slider

27 Apr 2018, 13:32

Karl, thank you for your excellent support.