steveush

Hi @marilyn1998,

Could you please clear your cache and test again as the JavaScript being served from it for FooGallery is not the latest version.

@dantianhealth without a URL there is not much I can do except say try clearing your cache as well.

Thanks

Hi @sofcarlson,

@bradvin is indeed correct and this has to do with the widths however this is more an issue with the theme CSS than the gallery. This template has absolutely positioned items, so they effectively take up “no” space in the page layout so the template relies on the parent elements available width. With how the themes CSS is currently setup with the content set to float left this effectively collapses the content area to be the smallest possible.

You need to add the following CSS to either the Custom CSS meta box in the gallery settings or add it to you sites styles.css file:

@media screen and (max-width: 1024px){
	.content {
		width: 100%;
	}
}

This is effectively telling the theme that the content should be shown full width once the size goes below 1024px. Currently the theme does not do this and instead relies on the content of the page to push the container to the full size. Unfortunately as I stated previously this template relies on its parent width for layout purposes and the theme CSS basically doesn’t provide any.

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 7 years, 1 month ago by steveush. Reason: Fixed list number

Hi @trek-themes,

Thanks for giving us a live example. I’ve found the issue and the fix should be in the next release.

Thanks
Steve

Hi @vikasgunjeti,

A reworked and updated fix has been applied to our code base which definitely resolves the issue however it has not yet been released in the free version. I’ll follow up with our PHP developer to see when the next free release is scheduled to go out however there is no quick fix I could supply to you now. You will need to wait until the new free version is released to resolve the issue as the changes required altering certain parts of the portfolio template which can not be supplied as a temp fix.

Thanks
Steve

Hi @swan1305,

You should be able to use the following to adjust the caption title size and color:

.foogallery .fg-caption-title {
	font-size: 16px;
	color: #FFF;
}

If however you are using one of the preset options for captions you may need to use the following depending on which should allow you to adjust the preset sizes:

.foogallery.fg-preset .fg-caption-title {
	font-size: 16px;
	color: #FFF;
}

Thanks
Steve

Hi Klaus,

Glad to hear it resolved the issue for you. Please note though that if you update your theme you will need to apply this fix again as that JS file will be replaced.

I’ll mark this as resolved.

Cheers
Steve