A few questions

Hi @andrewh7777,

I’ll be looking into this today, I was unavailable over the weekend and should be able to give you an update a bit later on today.

Thanks
Steve

Hi @andrewh7777,

Ok, this may go on for a bit but applying the following changes should get FooBox looking pretty similar to your old site and get rid of the delays during resizing and changing images.

1. First things first, I would suggest removing your current customization’s and start from what is basically a fresh install of FooBox. Backup your changes in case you’re not happy with the result of my code.

2. Next let’s get rid of the delays during resizing and changing images. Unfortunately in the free version there is no easy way to supply custom JavaScript options to the lightbox. To work around this you can use the following PHP code in your functions.php file or by using a plugin that lets you register custom scripts.

if ( ! function_exists( 'custom_foobox_script' ) ){

	/**
	 * Enqueues a custom script for FooBox allowing us to alter advanced options
	 * not exposed in the options UI.
	 */
	function custom_foobox_script(){
		// first check if FooBox should actually enqueue its' scripts
		if (!apply_filters('foobox_enqueue_scripts', true)) return;

		// here we set some hidden options allowing us to alter the transition and resize speeds
		// allowing for near instant transitions between images.
		$custom_js = 'if ( !!FOOBOX ){
	FOOBOX.customOptions = {
		resizeSpeed: 0,
		transitionInSpeed: 0,
		transitionOutSpeed: 0
	};
}';

		// actually enqueue the script registering it to be inserted before the main FooBox script.
		wp_add_inline_script(
			'foobox-free-min',
			$custom_js,
			'before'
		);
	}

	/**
	 * Enqueue the custom scripts register function.
	 */
	add_action('wp_enqueue_scripts', 'custom_foobox_script', 99);

}

The above script simply registers an inline script block with FooBox that then sets three options not exposed in the settings UI: resizeSpeed, transitionInSpeed and transitionOutSpeed. Setting these three speed options to 0 effectively cancels the transitions used during there associated phases.

3. Now that all the hidden options are taken care of let’s set some through the UI to let the custom CSS in step 4 work correctly.

a. Enable the General > Show Counter option.
b. Set the General > Count Message option to simply be a forward slash “/”. This will be used to separate the previous and next buttons.
c. To match the old site you can also enable the General > Hide Captions option.

4. Last, but certainly not least, is the custom CSS to style FooBox to mimic your old lightboxs’ style. Unfortunately there are a number of duplicate CSS class names as I only wanted these customization’s to affect the desktop and tablet layouts for FooBox as the mobile view is vastly different. I have commented every class so you can get an idea of what everything is doing so you can make adjustments in the future.

/* Set the background color of the modal to be solid white */
.fbx-modal.fbx-tablet,
.fbx-modal.fbx-desktop {
	background-color: #FFF;
}
/* Create the "title" seen in the top left of the modal */
.fbx-modal.fbx-tablet:before,
.fbx-modal.fbx-desktop:before {
	display: inline-block;
	content: "Andrew Kimber";
	position: absolute;
	top: 50px;
	left: 50px;
	font-family: "Times New Roman", serif;
	font-size: 24px;
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: 4px;
}
/* Adjust the internal spacing for the modal to account for the above "title" */
.fbx-modal.fbx-tablet .fbx-inner-spacer,
.fbx-modal.fbx-desktop .fbx-inner-spacer {
	padding: 124px 40px 50px;
}
/* Adjust the loader to account for the above "title" */
.fbx-modal.fbx-tablet .fbx-loader,
.fbx-modal.fbx-desktop .fbx-loader {
	margin-top: 0;
}
/* Strip the border and rounded corners off the various elements that no longer require it */
.fbx-modal.fbx-tablet .fbx-inner,
.fbx-modal.fbx-desktop .fbx-inner,
.fbx-modal.fbx-tablet .fbx-item-current,
.fbx-modal.fbx-desktop .fbx-item-current,
.fbx-modal.fbx-tablet .fbx-item-next,
.fbx-modal.fbx-desktop .fbx-item-next,
.fbx-modal.fbx-tablet .fbx-item-next,
.fbx-modal.fbx-desktop .fbx-item-image {
	border: none;
	border-radius: 0;
}
/* Strip the drop shadow off the various elements that no longer require it */
.fbx-modal.fbx-tablet .fbx-loader,
.fbx-modal.fbx-tablet .fbx-inner.fbx-inner-shadow,
.fbx-modal.fbx-tablet .fbx-close.fbx-btn-shadow,
.fbx-modal.fbx-tablet .fbx-close.fbx-btn-shadow:hover,
.fbx-modal.fbx-tablet .fbx-prev.fbx-btn-shadow,
.fbx-modal.fbx-tablet .fbx-prev.fbx-btn-shadow:hover,
.fbx-modal.fbx-tablet .fbx-next.fbx-btn-shadow,
.fbx-modal.fbx-tablet .fbx-next.fbx-btn-shadow:hover,
.fbx-modal.fbx-desktop .fbx-loader,
.fbx-modal.fbx-desktop .fbx-inner.fbx-inner-shadow,
.fbx-modal.fbx-desktop .fbx-close.fbx-btn-shadow,
.fbx-modal.fbx-desktop .fbx-close.fbx-btn-shadow:hover,
.fbx-modal.fbx-desktop .fbx-prev.fbx-btn-shadow,
.fbx-modal.fbx-desktop .fbx-prev.fbx-btn-shadow:hover,
.fbx-modal.fbx-desktop .fbx-next.fbx-btn-shadow,
.fbx-modal.fbx-desktop .fbx-next.fbx-btn-shadow:hover {
	box-shadow: none;
}
/* Set some base styles and reset some others used by the various UI elements */
.fbx-modal.fbx-tablet .fbx-close,
.fbx-modal.fbx-tablet .fbx-prev,
.fbx-modal.fbx-tablet .fbx-next,
.fbx-modal.fbx-tablet .fbx-count,
.fbx-modal.fbx-desktop .fbx-close,
.fbx-modal.fbx-desktop .fbx-prev,
.fbx-modal.fbx-desktop .fbx-next,
.fbx-modal.fbx-desktop .fbx-count {
	font-family: "Segoe UI", "Helvetica", "Arial", "Sans Serif", serif;
	font-size: 12px;
	font-weight: 100;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: .04em;
	margin-top: 0;
	top: auto;
	right: auto;
	left: auto;
	bottom: auto;
	width: auto;
	height: auto;
	border: none;
	padding: 5px;
}
/* Position the close button in the top right of the modal and adjust its' size */
.fbx-modal.fbx-tablet .fbx-close,
.fbx-modal.fbx-desktop .fbx-close {
	position: fixed;
	top: 0;
	right: 0;
	font-size: 24px;
	min-width: 24px;
	line-height: 24px;
}
/* Specify the close button to use the × HTML entity. */
.fbx-modal.fbx-tablet .fbx-close:before,
.fbx-modal.fbx-desktop .fbx-close:before {
	content: "×";
}
/* Center the "count" which is now just displaying "/" */
.fbx-modal.fbx-tablet .fbx-count,
.fbx-modal.fbx-desktop .fbx-count {
	position: absolute;
	bottom: -25px;
	left: 50%;
	transform: translateX(-50%) translateY(50%);
	padding: 5px 0;
	width: 10px;
}
/* Position the prev and next buttons below the image */
.fbx-modal.fbx-tablet .fbx-prev,
.fbx-modal.fbx-tablet .fbx-next,
.fbx-modal.fbx-desktop .fbx-prev,
.fbx-modal.fbx-desktop .fbx-next {
	position: absolute;
	bottom: -25px;
	transform: translateY(50%);
}
/* Adjust the prev button to be positioned to the left of the "count" */
.fbx-modal.fbx-tablet .fbx-prev,
.fbx-modal.fbx-desktop .fbx-prev {
	left: calc(50% - 5px);
	transform: translateX(-100%) translateY(50%);
}
/* Set the prev button text */
.fbx-modal.fbx-tablet .fbx-prev:before,
.fbx-modal.fbx-desktop .fbx-prev:before {
	content: "prev";
}
/* Adjust the next button to be positioned to the right of the "count" */
.fbx-modal.fbx-tablet .fbx-next,
.fbx-modal.fbx-desktop .fbx-next {
	left: calc(50% + 5px);
}
/* Set the next button text */
.fbx-modal.fbx-tablet .fbx-next:before,
.fbx-modal.fbx-desktop .fbx-next:before {
	content: "next";
}

That should be it.

Thanks
Steve

• This reply was modified 4 years, 9 months ago by steveush. Reason: Fixed list number