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.
X3Photo Gallery Forums
X3 Photo Gallery Support Forums
multi-comparison-slider?6 posts
multi-comparison-slider?
- Attachments
-
- slider.jpg (77.65 KiB) Viewed 2375 times
Re: multi-comparison-slider?
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.
You could easily use the TABS module, as seen on the sample tabs page, which could give a similar effect, but without the thumbnails.
Re: multi-comparison-slider?
thank you ,I tried tabs, but I met an issue.
btw, the version is X3 v0.22.1
- 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
Code
<!-- 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>Re: multi-comparison-slider?
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:
Make sure to add the "tabsfresh" class to your tabs menu:
Code
function x3_load_page(){
$('.tabsfresh').on('toggled', function (event, tab) {
$(window).resize();
});
}Code
<ul class="tabs tabsfresh" data-tab>Re: multi-comparison-slider?
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.
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.
Code
<li class="tab-title"><a href="#panel4"><img src="/x3/content/icons/b.jpg"></a></li>- Attachments
-
- 2017511-165008.jpg (268.64 KiB) Viewed 2358 times
Re: multi-comparison-slider?
Great!