Some styling questions about the Fancybox

Markus · 2019-01-08 07:23:37

Hello from Germany,

I'm in the process of creating my album templates. I'm currently making the settings on the Fancybox.

I come across some things that I would like to change or that I can't find.

https://backlight.der-canonier.de/galle … #gallery-8

1. In Lightroom's Publisher, I checked "Enable Maps" and set visibility to "Public - visible to everyone".
But the symbol for Google Maps does not appear in the fancybox.
I didn't find anything in the admin of Backlight 2.
Why is the symbol not displayed?

2. I changed the symbols above the picture with these settings

.fancybox-pangolin-album .fancybox-toolbar {
    /* Position Fancybox-Button */
    text-align: center;
}

.fancybox-pangolin-album .fancybox-button--close {
    /* Position X - Close-Button */
    position: initial;
    top: 0;
    left: 0;
}

But how can you change the order of the symbols (I read that somewhere) or their position?

I would also like to place the arrows for the previous and next photo right above the photo.
Is this possible with CSS? Or PHPlugins? I suppose yes...

3. On my old homepage with Okapi I always got the number of pictures displayed.

http://der-canonier.de/galleries/03-lan … d=1&pid=29

Now with Backlight 2 this is no longer displayed. (see above)

Is this due to the presentation type Slideshow?
In Okapi it was Photoswipe.
On Rod´s page I also discovered the frame counter.

http://www.rodbarbee.com/galleries/2-ne … d=1&pid=35

Sorry for the many individual questions. But in the end they are all related to the Fancybox.

Many Greetings
Markus

rod barbee · 2019-01-08 08:20:04

1. In Lightroom's Publisher, I checked "Enable Maps" and set visibility to "Public - visible to everyone".
But the symbol for Google Maps does not appear in the fancybox.
I didn't find anything in the admin of Backlight 2.
Why is the symbol not displayed?

the reason the map icon is not appearing is that it's inside the sharing menu. But you've hidden the symbol for the sharing menu button with your custom css:

/* Deaktivierung der Teilen-Buttons 
 ================================ */

.fancybox-button--pallet::before {
    display: none;
}

but the button itself is still there if you hover to the right of the existing buttons, you'll see the hand/link symbol pop up to tell you that there's a link there.

rod barbee · 2019-01-08 08:25:38

But how can you change the order of the symbols (I read that somewhere) or their position?

I think these are hard-coded into the album html. You might be able to move them around with jQuery...

rod barbee · 2019-01-08 08:28:04

3. On my old homepage with Okapi I always got the number of pictures displayed.
Now with Backlight 2 this is no longer displayed. (see above)
Is this due to the presentation type Slideshow?

That was with Photoswip in Okapi. Pangolin made the change to Fancybox
.
There may be a way to edit the fancybox script to get that to show, but then you'd have to construct an html location for it to sit, something else you may be able to do with jQuery.

rod barbee · 2019-01-08 08:29:41

On Rod´s page I also discovered the frame counter.

It shames me to say that my main site is still rocking Backlight 1 Okapi.
I know, I know.....

But I'm working on updating it.

rod barbee · 2019-01-08 08:43:47

I would also like to place the arrows for the previous and next photo right above the photo.
Is this possible with CSS? Or PHPlugins? I suppose yes...

Maybe with custom css. Probe the page with the Inspector and you'll see the button classes: fancybox-button and fancybox-button--arrow_left and fancybox-button--arrow_right.

You can try playing with the positioning properties and see what can be done.

If you do, be sure to check what happens at mobile sizes.

Markus · 2019-01-08 15:46:28

Hi Rod,
thanks for your explanation.

rod barbee wrote:

but the button itself is still there if you hover to the right of the existing buttons, you'll see the hand/link symbol pop up to tell you that there's a link there.

oh I see it and have deactivated the hiding again

rod barbee wrote:

I think these are hard-coded into the album html. You might be able to move them around with jQuery...

Since I don't know anything about it, I better not touch it

rod barbee wrote:

But I'm working on updating it.

At least you already have a test page.

rod barbee wrote:

You can try playing with the positioning properties and see what can be done.
If you do, be sure to check what happens at mobile sizes.

Thanks for your tip with the mobile size.

I had already found the corresponding elements. However, these arrows from class="fancybox-navigation" would have to go to class="fancybox-toolbar", if I see that correctly

I have to see how to do that.

Greetings, Markus

Markus · 2019-01-08 16:26:19

rod barbee wrote:

3. On my old homepage with Okapi I always got the number of pictures displayed.
Now with Backlight 2 this is no longer displayed. (see above)
Is this due to the presentation type Slideshow?

That was with Photoswip in Okapi. Pangolin made the change to Fancybox
.
There may be a way to edit the fancybox script to get that to show, but then you'd have to construct an html location for it to sit, something else you may be able to do with jQuery.

Yeah, with this change in CSS I can show the counter:

.fancybox-pangolin-album .fancybox-infobar {
	display: block;
}

The area was previously hidden

Markus · 2019-01-08 18:13:36

rod barbee wrote:

I would also like to place the arrows for the previous and next photo right above the photo.
Is this possible with CSS? Or PHPlugins? I suppose yes...
Maybe with custom css. Probe the page with the Inspector and you'll see the button classes: fancybox-button and fancybox-button--arrow_left and fancybox-button--arrow_right.
You can try playing with the positioning properties and see what can be done.
If you do, be sure to check what happens at mobile sizes.

if I copy the two class areas of the fancybox navigation into the class area of the fancybox toolbar in the Inspector, then I get the navigation arrows displayed in the toolbar.

<div class="fancybox-toolbar"><button data-fancybox-play="" class="fancybox-button fancybox-button--play" title="Start Slideshow (P)"><svg viewBox="0 0 40 40"><path d="M13,12 L27,20 L13,27 Z"></path><path d="M15,10 v19 M23,10 v19"></path></svg></button><button data-fancybox-fullscreen="" class="fancybox-button fancybox-button--fullscreen" title="Full-Screen (F)"><svg viewBox="0 0 40 40"><path d="M9,12 h22 v16 h-22 v-16 v16 h22 v-16 Z"></path></svg></button><button data-fancybox-thumbs="" class="fancybox-button fancybox-button--thumbs" title="Thumbnails (G)"><svg viewBox="0 0 120 120"><path d="M30,30 h14 v14 h-14 Z M50,30 h14 v14 h-14 Z M70,30 h14 v14 h-14 Z M30,50 h14 v14 h-14 Z M50,50 h14 v14 h-14 Z M70,50 h14 v14 h-14 Z M30,70 h14 v14 h-14 Z M50,70 h14 v14 h-14 Z M70,70 h14 v14 h-14 Z"></path></svg></button><button data-fancybox-close="" class="fancybox-button fancybox-button--close" title="Schließen (Esc, X)"><svg viewBox="0 0 40 40"><path d="M10,10 L30,30 M30,10 L10,30"></path></svg></button><button data-fancybox-pallet="" class="fa_pseudo fancybox-button fancybox-button--pallet" title="Fotos / Teilen-Menü (I)">

</button><button data-fancybox-prev="" class="fancybox-button fancybox-button--arrow_left" title="Vorheriges (linke Pfeiltaste)"><svg viewBox="0 0 40 40"><path d="M10,20 L30,20 L10,20 L18,28 L10,20 L18,12 L10,20"></path></svg></button><button data-fancybox-next="" class="fancybox-button fancybox-button--arrow_right" title="Nächstes (rechte Pfeiltaste)"><svg viewBox="0 0 40 40"><path d="M30,20 L10,20 L30,20 L22,28 L30,20 L22,12 L30,20"></path></svg>

</button></div>

fancybox-navigation bar

But how do I get this change permanently incorporated?

rod barbee · 2019-01-08 22:44:45

But how do I get this change permanently incorporated?

Look into jQuery to move elements

Markus · 2019-01-08 23:28:41

rod barbee wrote:

Look into jQuery to move elements

I looked at one of your instructions http://ttg-tips-and-tricks.barbeephoto. … a-gallery/, but I think it's a little "too high" for me.

I'm hoping that Matt and Ben will add more configuration options in the Backlight Admin to an update. There are apparently still some of them

Matthew · 2019-01-14 17:23:45

Markus wrote:

I'm hoping that Matt and Ben will add more configuration options in the Backlight Admin to an update. There are apparently still some of them

At this point, any further additions to Fancybox customization will be minimal. I've worked very hard to craft our implementation of the Fancybox in accordance with my preferences and experience in UI/UX design, and to serve the specific uses of our product. Also, to allow customization without enabling users to accidentally fall into pitfalls of their own making.

Markus · 2019-01-14 20:02:55

Hi, Matt,
no problem, additional features would just be nice to have

Community @ The Turning Gate

#1 2019-01-08 07:23:37

Some styling questions about the Fancybox

#2 2019-01-08 08:20:04

Re: Some styling questions about the Fancybox

#3 2019-01-08 08:25:38

Re: Some styling questions about the Fancybox

#4 2019-01-08 08:28:04

Re: Some styling questions about the Fancybox

#5 2019-01-08 08:29:41

Re: Some styling questions about the Fancybox

#6 2019-01-08 08:43:47

Re: Some styling questions about the Fancybox

#7 2019-01-08 15:46:28

Re: Some styling questions about the Fancybox

#8 2019-01-08 16:26:19

Re: Some styling questions about the Fancybox

#9 2019-01-08 18:13:36

Re: Some styling questions about the Fancybox

#10 2019-01-08 22:44:45

Re: Some styling questions about the Fancybox

#11 2019-01-08 23:28:41

Re: Some styling questions about the Fancybox

#12 2019-01-14 17:23:45

Re: Some styling questions about the Fancybox

#13 2019-01-14 20:02:55

Re: Some styling questions about the Fancybox

Board footer