Fotorama_XH styling

[Tata]

Has anybody tried to style the Fotorama_XH?
I did. But the stylesheet is so complex, that I was not able to change almost anything. Eventhough - what I llike to achieve - it might be not that difficult.
I like to use it on a colleague's webpage. He is photographer and has thousands of photos. I want to make a responsive page for him, so that he will only need to upload the pictures and actualize the XML files. But the layout shall be like this
[ external image ]
I mean to have the thumbs either paginated or with a scrollbar x or y.

[lck]

Without changing the script, i see no way to implement it. See issue on GitHub.

You could add a horizontal scroll bar via css, but then there are problems with preloading the thumbnails and select the currently active thumbnail.

Code: Select all

.fotorama__nav {
    font-size: 0;
    line-height: 0;
    text-align: center;
    display: none;
    white-space: nowrap;
    z-index: 5;
    overflow-x: auto; /* new */
    overflow-y: hidden; /* new */
}

.fotorama__nav__shaft {
    position: relative;
    left: 0;
    top: 0;
    text-align: left;
    width: inherit; /* new */
}

[Tata]

Well, I am fine with the scrollbar. What I would prefer are the "more lined" or wrappable thumbnails and positioning the thumbnails' block top/left/right/bottom.

[cmb]

Without changing the script, i see no way to implement it.

ACK. Fotorama creates rather self-contained galleries via JavaScript, so individual styling via CSS is very limited.

What I would prefer are the "more lined" or wrappable thumbnails and positioning the thumbnails' block top/left/right/bottom.

Most likely another gallery script would solve this issue. For instance, Photoswipe might be appropriate, see the getting started tutorial (there are demos at the bottom of the page). Unfortunately, there's no easy to use CMSimple_XH plugin (yet).

[lck]

What I would prefer are the "more lined" or wrappable thumbnails ...

Code: Select all

.fotorama__nav {
    font-size: 0;
    line-height: 0;
    text-align: center;
    display: none;
    /* white-space: nowrap; */ /* comment out */
    z-index: 5;
    overflow-x: hidden; /* new */
    overflow-y: auto; /* new */
    max-height: 300px; /* new - your desired height */
} 

[Tata]

Thank you. Will try it in the evening. How about with the preview size?? Where shall I set the widrh and height of the previewed image?

[lck]

Most likely another gallery script would solve this issue. For instance, Photoswipe might be appropriate, see the getting started tutorial (there are demos at the bottom of the page). Unfortunately, there's no easy to use CMSimple_XH plugin (yet).

Yes, Fotorama_Xh seems not right, for a gallery for photographers.

I found small and easy to handle some very interesting scripts for a photographers gallery. The pictures have uploaded only in an image folder, the Thumbnalis are automatically generated.
This you could install separately and integrate via iFrame. Or someone could make a plugin

UberGallery - MIT-License (Included in the download are various templates, also responsive templates)
Single File PHP Gallery - Free for private use
MiniGal - GPL-License
Quick Gallery - Not free (6€)
1Page Gallery - MIT License (generates photo gallery from a zip file of images)
Lychee - MIT-License (needs MySQL-Database)

[lck]

Thank you. Will try it in the evening. How about with the preview size?? Where shall I set the widrh and height of the previewed image?

It's complicated, the Thumbnail-size needs to be changed in:
./plugins/fotorama/lib/fotorama.js
Line 863

Code: Select all

THUMB_SIZE = 64, //change to e.g. 150             

./plugins/fotorama/classes/GalleryView.php
Line 64

Code: Select all

$thumbnail = $this->makeThumbnail($filename, 64); //change to e.g. 150            

But, how did you solved this?

You could add a horizontal scroll bar via css, but then there are problems with preloading the thumbnails and select the currently active thumbnail.

[Tata]

But, how did you solved this?

You could add a horizontal scroll bar via css, but then there are problems with preloading the thumbnails and select the currently active thumbnail.

To be honest, I don't remember anymore. I played with

Code: Select all

overlay-y:scroll

around the stylesheet and lokked which class will make it's work. But then I have found that the thumnails bar is movable, so the scroll-bar isn't that important anymore. However it awares the visitor that the bar is movable.

EDIT: playing with 1Page Gallery

Code: Select all

	#selector{
		width: 50%;
		min-width: 300px;
		height: 70vh;
		min-height: 300px;
		margin: 0.5em 0;
		float: left;
		overflow-y: scroll;
		overflow-x: hidden;
		

There's only one problem to solve now - how to inteligently include this gallery on a webpage, and/or how to use more galleries?

[Tata]

But, how did you solved this?

WEll, playing for hours with the stylesheet I have found the classes and added new values for :/*THUMBS SCROLLER*/":

Code: Select all

.fotorama__caption,.fotorama__nav:after,.fotorama__nav:before,.fotorama__stage:after,.fotorama__stage:before,.fotorama__wrap--css3 .fotorama__html,.fotorama__wrap--css3 .fotorama__nav,.fotorama__wrap--css3 .fotorama__spinner,.fotorama__wrap--css3 .fotorama__stage,.fotorama__wrap--css3 .fotorama__stage .fotorama__img,.fotorama__wrap--css3 .fotorama__stage__frame {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

/* THUMBS SCROLLER */
.fotorama__wrap--css3 .fotorama__nav{
	overflow-y:hidden;
	overflow-x:scroll;
}
.fotorama__wrap--css3 .fotorama__stage {
	margin-bottom: 1em;
	}
/* THUMBS SCROLLER END */

I couldn't find how to change the position of fotorama--nav and fotorama--stage to have them floating as illustrated in my introducing post.
And

You could add a horizontal scroll bar via css, but then there are problems with preloading the thumbnails and select the currently active thumbnail.

that's remaining problem, but it is almost impossible to find the responsible selector for this. So I had to remove the previous values for the height of nav frame.
[ external image ]