show slider with original styling in Lightbox

Hi Ingmar, to change the icons used for close and forward/back buttons, you would need to modify/replace the file easy-fancybox/fancybox/fancybox.png which you can do with the excellent free image manipulation software GIMP.

To get the text “click image to close” below the lightbox, you could give the links this as title attribute. It depends on the slider plugin if this is possible at all… If not, then you would need to modify the easy-fancybox-settings.php file. Open it up in the WordPress Plugins Editor and find these lines about 1/3 down:

		'IMG' => array(
			'title' => __('Images','easy-fancybox'),
			'input' => 'multiple',
			'options' => array(

now insert these new lines right after that opening bracket:

				'title' => array (
					'default' => 'Click image to close.'
					),

Next, install the plugin https://wordpress.org/plugins/block-specific-plugin-updates/ and set Easy FancyBox as not to be upgraded to prevent your changes from being overwritten.

Hope that helps 🙂

Ah… now I finally see where those thin lines are coming from. There is a rule a { border-bottom: solid 1px rgba(0,0,0,.5); } in your themes compressed-styles.css which also applies to the FancyBox back/forward arrow zones.

A rule like

a#fancybox-left, a#fancybox-right { border-bottom: none; }

should solve it 🙂

For the “click image to close” text to show, you need to do two more things:
1. Go to Settings > Media and activate the Show Title option (and I suggest Position: Inside) and
2. Refresh the source compression / caching (from the theme?) that seems to be going on on your site…

Hi Ingmar, the lightbox was built to scale to the original image size with only the browser viewport (with a certain margin) as limit. However, you would try adding the following CSS to your themes stylesheet:

#fancybox-wrap div {
max-width: 600px;
height: auto !important;
}

Note: Setting a max-width and a max-height together might scale larger images out of their original proportions to force-fit them into these max sizes.

Hi Ingmar, I suppose that if you make sure all these images are 1600×1200 then you can set both max-width and max-height and then maybe try setting both width and height to auto like:

#fancybox-wrap div {
max-width: 800px;
max-height: 600px;
width: auto !important;
height: auto !important;
}

Not sure if this is going to work though, so to be tested on different screen sizes.

If you’ve set this up on your site and you want me to take a look, you can send the new password via https://premium.status301.net/contact/ (just mention the thread)