Adding a white frame? Reducing image transition time?

Resolved mat1746
(@mat1746)

9 years, 5 months ago

I have two brief questions about finetuning this awesome plugin. How do I add a white border around full sized images? At first I managed to add it but quickly ran into issues with images of varying sizes. Sometimes the images wouldn’t be resized to fit the screen properly, and would sometimes require to scroll down. Also some images would bleed over the bottom border, or sometimes dissapear into darkness.

The second issue is one of lowering the animation time when flipping back and forth through images.

Big thanks in advance for any help.

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author Robert Neu
(@fatmedia)

9 years, 5 months ago
Hey Mat,

You should be able to add a border by adding the following css to your theme or WordPress’ custom CSS module in the customizer:
```
.featherlight .featherlight-content {
	border: 10px solid #fff !important;
}
```
The animation is also handled with CSS, so you should be able to increase the animation time with this CSS:
```
.featherlight .featherlight-content {
	-webkit-animation-duration: 2s !important;
	animation-duration: 2s !important;
}
```
In that code, 2s stands for 2 seconds, so you should be able to adjust that to whatever value you like such as 1.5s or 3s etc.

Hope that helps!
Thread Starter mat1746
(@mat1746)

9 years, 5 months ago

Hi! Thanks so much for helping out! The code works perfectly!

The only issue I still get now is that strange bleed at the bottom (I’m not sure that’s the proper term) when images fail to resize properly. I’ve made a quick screenshot to showcase the issue:

View post on imgur.com

Or you can see it at mathiasgabriel.com with all images that are longer in height than width. Hopefully this is something that can be fixed easily? Again, thanks a ton!
Plugin Author Robert Neu
(@fatmedia)

9 years, 5 months ago
Ah, I see what you mean.

It looks like if you move the border to the .featherlight .featherlight-inner selector, the problem is resolved.
```
.featherlight .featherlight-inner {
	border: 10px solid #fff !important;
}
```
Rather than the snippet I pasted above seems to do the trick.

Let me know if you run into any additional problems and I’ll do my best to help you sort them out. 🙂
Thread Starter mat1746
(@mat1746)

9 years, 5 months ago

Oooooh that’s perfect! Thank you so much 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding a white frame? Reducing image transition time?’ is closed to new replies.

Tags