Photo Gallery Forums

Posted: **10 May 2017, 03:40**

Hi again, I love the new feature of comparison slider very much in X3, but is it possible to make it look like the image I attached. so visitor can switch the thumbnails to check out each comparison ?

thanks a lot.

Posted: **10 May 2017, 12:08**

Since this is a javascript "content" plugin, and not part of the X3 "gallery" system, it doesn't include any way to add it as a slideshow like that no. It would probably take a couple of hours to custom code a solution like that, switching between a couple of images.

You could easily use the TABS module, as seen on the sample tabs page, which could give a similar effect, but without the thumbnails.

Posted: **10 May 2017, 21:30**

thank you ,I tried tabs, but I met an issue.

I inserted the comparison slider to each tab, everything works fine for first time click.
but when clicked the tabs again, some sliders just disappeared. no matter how many times re-click the tabs.
after reloaded the page, the first clicks worked fine again, but same issue with further clicks.
I repeated this on a new installation of X3, with default setting, same issue.
I attached the code and the video captured from the screen with mobile, sorry, quality is not very good.

btw, the version is X3 v0.22.1

<!-- Wrap all code inside a <section> with tabs-container class -->
<!-- Optional style classes that can be included: tabs-style-1 OR tabs-style-2 -->
<section class="tabs-container tabs-radius tabs-anim tabs-color-active tabs-center">

<!-- Create a ul list that contains the tab links -->
<!-- include the vertical class if you want to use vertical orientation -->
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2">Tab 2</a></li>
<li class="tab-title"><a href="#panel3">Tab 3</a></li>
<li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>

<!-- Create a tabs content element that contains all tab contents  -->
<!-- include the vertical class if you want to use vertical orientation -->
<div class="tabs-content">
<div class="content active" id="panel1">

<!-- Comparison slider demo and documentation: https://demo.photo.gallery/examples/features/comparison-slider/ -->
<div class="comparison-slider x3-style-frame" data-orientation="horizontal" data-offset="0.5" data-hover="true">
<img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.6/assets/svg/1f648.svg">
<img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.6/assets/svg/1f435.svg">
</div>
</div>
<div class="content" id="panel2">
<div class="comparison-slider x3-style-frame" data-orientation="horizontal" data-offset="0.5" data-hover="true">
<img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.6/assets/svg/1f648.svg">
<img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.6/assets/svg/1f435.svg">
</div>
</div>

<div class="content" id="panel3">
<div class="comparison-slider x3-style-frame" data-orientation="horizontal" data-offset="0.5" data-hover="true">
<img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.6/assets/svg/1f648.svg">
<img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.6/assets/svg/1f435.svg">
</div>
</div>

<div class="content" id="panel4">
<div class="comparison-slider x3-style-frame" data-orientation="horizontal" data-offset="0.5" data-hover="true">
<img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.6/assets/svg/1f648.svg">
<img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.6/assets/svg/1f435.svg">
</div>
</div>
</div>

<!-- Make sure #links in the <a> anchor tags correspond with id's in the tabs-content! -->
</section>

Posted: **10 May 2017, 23:47**

It seems the comparison-slider doesn't like getting hidden in tabs, because it is interfering with the HEIGHT settings of the slider plugin. The fix seems to be to force a resize event on tab toggle, which refreshes the visible comparison-slider element. Add the below script to your panel > settings > custom > custom Javascript:

function x3_load_page(){
  $('.tabsfresh').on('toggled', function (event, tab) {
    $(window).resize();
  });
}

Make sure to add the "tabsfresh" class to your tabs menu:

<ul class="tabs tabsfresh" data-tab>

Posted: **11 May 2017, 04:54**

Hey mjau-mjau, thanks a lot. its working, this is amazing.

I also did some revision to the code, replaced the tabs text with thumbnail image, and moved the tabs to bottom. its just like what I wanted to get.

<li class="tab-title"><a href="#panel4"><img src="/x3/content/icons/b.jpg"></a></li>

Posted: **11 May 2017, 06:40**

Great!

Photo Gallery Forums

multi-comparison-slider?

multi-comparison-slider?

Re: multi-comparison-slider?

Re: multi-comparison-slider?

Re: multi-comparison-slider?

Re: multi-comparison-slider?

Re: multi-comparison-slider?