• Resolved andrewh7777

    (@andrewh7777)


    Hello,

    I have a few questions regarding the plugin:

    1. When the lightbox opens is there any CSS code that will make the background completely white leaving the logo at the top? I am migrating from andrewhiles.com and wish it look as similar as possible – please click on an image on the homepage of the old site for an example of this.

    2. Is there any code to reduce the amount of space between the site title and the top of the gallery?

    3. When opening the image lightbox is there any way to force the caption to be underneath the image rather than on top of it?

    4. For some reason the image titles are not appearing when hovering over the thumbnails. I’ve set the loading icon as none and title to appear on hover, however the thumbnail turns dark with no text. Is this a bug?

    Any help greatly appreciated!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • A quick update re #4:

    I am not bright, I figured out the option was right there on the next tab, apologies for this!

    I do however have another quesiton:

    5. I changed the lightbox so that the corners were no longer rounded for each image. However, I would like to change the transition and I have spent all day trying to work out how to do this. Ideally I need the transition from image to image to be:
    a. a lot faster, instant if possible
    b. have no fade and no white transition
    c. not have rounded corners.

    If anyone could advise on the above that would be fantastic, I am so close to finishing!

    Plugin Author bradvin

    (@bradvin)

    hey @steveush

    please can you assist with these queries

    Plugin Author steveush

    (@steveush)

    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 @steveush,

    Thank you very much, looking forward to hearing your ideas/thoughts.

    Thanks,

    Andrew

    Plugin Author steveush

    (@steveush)

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

    Hi @steveush,

    I am sorry for such a late reply to this. Thank you so much for your reply, that is incredibly helpful.

    I will give this a shot asap.

    Thanks again, much appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘A few questions’ is closed to new replies.