Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
Dane
Experienced
Topic Author
Posts: 121
Joined: 04 Dec 2020, 15:05

Comparison-Slider Plugin - Change size?

17 Dec 2020, 13:55

Hi!

Is it possible to change the size of the Comparison-Slider?

The mentioned link to the documentation doesent work: /examples/features/comparison-slider/
2020-12-17 19_55_18-Window.png
2020-12-17 19_55_18-Window.png (782.67 KiB) Viewed 2509 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Comparison-Slider Plugin - Change size?

18 Dec 2020, 00:50

Dane wrote:Is it possible to change the size of the Comparison-Slider?
The challenge here is that the comparison slider (and everything else that you add to your "content") will match the width of your "context", which is set to a width that is appropriate for human reading. How large do you want it? Keep in mind, the width can only be increased on medium-large screens ... On small/mobile screens, the slider would have to be limited by ther screen width.

My suggestion would be to use custom CSS to add a negative margin, perhaps increasing the width with 100 px on both sides. Then use a media query to only apply the rule to medium-large screens. Let me know ...
Dane wrote:The mentioned link to the documentation doesent work
Sorry, updated link is below, but it does not solve the question.
https://demo.photo.gallery/examples/plu ... on-slider/
 
User avatar
Dane
Experienced
Topic Author
Posts: 121
Joined: 04 Dec 2020, 15:05

Re: Comparison-Slider Plugin - Change size?

18 Dec 2020, 02:30

Hi Karl,

thank you for the explanation. I understand the situation. I would like it to be a bit wider like the text, and fill larger screens a bit better. I realize that on mobile devices like smartphones it will be displayed smaller because it is a compromise. But for larger monitors it would make sense to use the space better in such examples. Maybe you can also dynamically adjust something like that? Or click to open the in a popup which automatically distributes itself to the maximum size?

It's still very important to me, but I think it's a pity when something like this cool feature is only displayed so small. its only a idea.

campanille.jpg
campanille.jpg (198.56 KiB) Viewed 2501 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Comparison-Slider Plugin - Change size?

18 Dec 2020, 04:43

Try this. Wrap the html code inside <div class="comparison-slider-wrapper">...</div>:
Code
<div class="comparison-slider-wrapper">
<div class="comparison-slider" data-orientation="horizontal" data-offset="0.5" data-hover="true">
  <img src="...">
  <img src="...">
</div>
</div>
Then add this to Settings > Custom > Custom CSS:
Code
@media (min-width: 1024px) {
  .comparison-slider-wrapper {
    margin: 0 -100px;
  }
}
 
User avatar
Dane
Experienced
Topic Author
Posts: 121
Joined: 04 Dec 2020, 15:05

Re: Comparison-Slider Plugin - Change size?

18 Dec 2020, 04:54

Hi Karl,

it looks like it will work. like it! In a smaller resolution it is also adjusted anyway which I also find good. Thank you so much!

My code is this:
<div class="comparison-slider-wrapper">
<div class="comparison-slider" data-orientation="horizontal" data-offset="0.5" data-hover="true">
<img src="http://dane-vetter.de/content/Blog/Vorh ... iginal.jpg">
<img src="http://dane-vetter.de/content/Blog/Vorh ... beitet.jpg">
</div>
</div>
And i try to use {{path}} so it looks like this:
<div class="comparison-slider-wrapper">
<div class="comparison-slider" data-orientation="horizontal" data-offset="0.5" data-hover="true">
<img src="{{path}}/3U2A1021-HDR_original.jpg">
<img src="{{path}}/San_Martino_bearbeitet.jpg">
</div>
</div>
But it doesent work with this variable. Whats my mistake?

Thank you!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Comparison-Slider Plugin - Change size?

18 Dec 2020, 05:18

Dane wrote:But it doesent work with this variable. Whats my mistake?
This just comes down to unfortunate folder naming with "characters that should be avoided. Your folder name contains "quotes" which is messing with urls and image SRC attributes:
Vorher-Nacher-Vergleich_"Campanile_von_San_Martino"

Why use "quotes" in the first place? Folder names become URL's and should be as simple as possible and as short as possible. For proper extended titles (with any characters) you would use the title field (for both folders and images). This could probably be fixed to work from X3, but at this point, it's not expecting this "character.
 
User avatar
Dane
Experienced
Topic Author
Posts: 121
Joined: 04 Dec 2020, 15:05

Re: Comparison-Slider Plugin - Change size?

18 Dec 2020, 07:32

Thank you! Now it works with the variable. I think this was a copy and paste problem. I copy all my informations and also titels from my old homepage. 
 
User avatar
JMM
Experienced
Posts: 154
Joined: 02 Aug 2021, 11:18

Re: Comparison-Slider Plugin - Change size?

17 May 2022, 22:36

Hi, all.

I am having a problem getting this to work on any of my X3.30.1 sites.

As per the instructions, for the page in question I am using:
Code
<div class="comparison-slider-wrapper">
<div class="comparison-slider" data-orientation="horizontal" data-offset="0.5" data-hover="true">
<img src="{{path}}/rocket-car.webp">
<img src="{{path}}/rocket-car-gigapixel-standard-height-2160px_inPixio photomizer.jpg">
</div>
</div>
And for the CSS for that page, under advanced, I have added:
Code
@media (min-width: 1024px) {
  .comparison-slider-wrapper {
    margin: 0 -100px;
  }
}
I have 5 sliders on that page, with only the 1st slider with the above modified code; the other 4 sliders are the default sliders.  Eventually, if/when I get the sliders to be slightly larger, all the items will be larger, hence for now I am trying only to make the 1st one larger, for comparison purposes.

However, as you can see on THIS page, the 1st slider (with the above code) is not larger, and is the exact same size as the other 4 (default) sliders.

What is it that I'm missing?

Thanks in advance.

Regards,
John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Comparison-Slider Plugin - Change size?

18 May 2022, 00:02

There seems to have been an issue with some hidden character in the CSS that was blocking the CSS from applying. I have now fixed it.

However, it's not really working correctly because the first image that loads into place, is only 800px and the image won't scale beyond it's own original dimensions to fit the container.

I also see some errors in console with your recaptcha.js and pws.php, although it's probably unrelated and harmless. I would recommend loading the pws.php <script> with async attribute, because right now it's render-blocking (initial page load won't render before it's loaded). Also, some of your images are massive (5MB) and looks like they could be compressed to a fraction with almost no visual loss. Not related, but I wanted to mention while I was peeping around!
 
User avatar
JMM
Experienced
Posts: 154
Joined: 02 Aug 2021, 11:18

Re: Comparison-Slider Plugin - Change size?

18 May 2022, 07:25

There seems to have been an issue with some hidden character in the CSS that was blocking the CSS from applying. I have now fixed it.
Thank you, Karl.  I don't know what happened with the hidden characters, as I copied & pasted from earlier in this thread, but thank you again for fixing it.
However, it's not really working correctly because the first image that loads into place, is only 800px and the image won't scale beyond it's own original dimensions to fit the container.
Understood.  I have since upscaled the initial pictures, and all is working good now.
I also see some errors in console with your recaptcha.js and pws.php, although it's probably unrelated and harmless. I would recommend loading the pws.php <script> with async attribute, because right now it's render-blocking (initial page load won't render before it's loaded).
I have added async to the webstats script, as suggested.  I also removed the recaptcha script, as it was causing all of my X3 sites to hang periodically.
Also, some of your images are massive (5MB) and looks like they could be compressed to a fraction with almost no visual loss. Not related, but I wanted to mention while I was peeping around!
My bad.  I have since started to delete my pictures, and am re-uploading them resized to 2880*2048 @ 80%.  Thank you for pointing this out.

Related to my currently remaining large filesizes, although it is easy for me to do from within Windows on my locally-hosted X3 sites, what would be the chances of a future X3 release being able to display to X3 administrators in their X3 Panel something like the total number of images & total space that those images consume?  Come to think of it, to display the data on images might be too difficult (due to the many different types of images), but perhaps the total number of files (which would include the .json files, but they're miniscule) & the total size of the /content folder?  Just a thought.

Thank you again for helping me to get the slider images to display larger.

Regards,
John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Comparison-Slider Plugin - Change size?

18 May 2022, 10:43

JMM wrote:Related to my currently remaining large filesizes, although it is easy for me to do from within Windows on my locally-hosted X3 sites, what would be the chances of a future X3 release being able to display to X3 administrators in their X3 Panel something like the total number of images & total space that those images consume?
This is something I would be considering for our Files gallery app, although I feel it's not entirely within the scope of what "must" be provided by a web-based file viewer/manager. Of course if it was easy, I could just add it and that's that ... The challenge is, to get "file amount" and "total filesize" for an entire directory structure in PHP, we need to recursively loop through all folders and files just to compile this basic information. It's not something that can be cached either, and is therefore a relatively "costly" operation. I am probably exaggerating, but under scenarios we don't control (slow server + extensive directory structure), this process would not be desirable. Also, things like this can easily be done from terminal/command-line for those who have access.

In conclusion, I would say yes this could get added at some point. It would likely be total space used and total amount of files ... Offering options about what file types to include in the file count might be too clumsy.

The reason I mentioned the Files gallery app, is because I am aiming to work it into the future X3 panel 2.0, as it's faster, more modern and more effective than the current X3 panel.