How to Configure Image Size and Lightbox Behavior with Easy FancyBox

Posted OnFeb 10, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Easy FancyBox plugin, we will take a look at configuring the behavior of Easy FancyBox.

Step 1) Login to the WordPress Dashboard.

Step 2) From the left-hand sidebar of the Dashboard, navigate to Settings -> Media.

km-easy-settings-01a

Some fields in the Free version are read-only and can not be modified. If you want to modify these fields, the Pro version of this plugin will need to be purchased.

Step 3) Complete the fields as outlined below:

Image Sizes

The images sizes set below determine the maximum dimensions (in pixels) to use when adding an image to the Media Library.

To set the image sizes, click the Up and Down arrows to the left of each textbox or enter the dimension in the appropriate textbox.

If the crop thumbnail checkbox is checked, the image will be cropped to the width and height entered in the textboxes.

For this example, no changes were made.

km-easy-settings-02a

Uploading Files

If the Uploading Files checkbox is checked, the uploaded files will be organized into month and year based folders

For this example, this field was left checked.

km-easy-settings-03a

FancyBox

The options in this section determine the Media Lightbox overlay appearance and behavior controlled by FancyBox.

First enable each sub-section that you need. Then save and come back to adjust specific settings.

Each additional sub-section and features like Auto-detection, Elastic transitions and all Easing effects (except Swing) will have some extra impact on client-side page speed. Enable only those sub-sections and options that you actually need on your site. Some setting like Transition options are unavailable for SWF video, PDF and iFrame content to ensure browser compatibility and readability.
  • Media

    Place a checkmark in each checkbox where you want to use the FancyBox.

    km-easy-settings-04a

    For this example, Images was checked.

  • Links

    A. Exclude From the Exclude dropdown list, select from the available options what type of links to exclude.

    For this example, the default value of None was not changed.

    B. Open on page load From the open on page load dropdown list, select from the available options if the FancyBox opens with an Link ID or None.

    For this example, the default value of Link with ID “fancybox-auto” was not changed.

    C. Include the Metadata jQuery Place a checkmark in the Include the Metadata jQuery checkbox to include the Metadata jQuery extension scripts to allow passing custom parameters via a link class.

    For this example, this field was left unchecked.

    km-easy-settings-05aa

  • Overlay

    D. Show Overlay If checked, when Images (selected above) are displayed, they will show an overlay around the content when opened in FancyBox.

    For this example, this field was left checked.

    E. Close FancyBox If checked, FancyBox will close when the overlay is clicked.

    For this example, this field was left checked.

    F. Opacity Click the Up or Down arrows to the right of the Opacity textbox or enter a value for the Opacity in the textbox. If no value is entered, an Opacity of 0.7 will be used as the default value.

    For this example, 0.6 was entered.

    G. Color Enter a Hex color value in the color textbox. If no value is entered, the Color #777 will be used as the default value. Click here to select a Color.

    For this example, #808080 was entered.

    H. Spotlight Effect Place a checkmark in the Spotlight checkbox if you want the Overlay to have a Spotlight Effect.

    For this example, this field was checked.

    km-easy-settings-06a

  • Window

    I. Close Button If checked, FancyBox will show the (X) close button.
    For this example, this field was left checked.
    J. Color The Background Color, Border Color and Text Color fields are read-only and can not be modified.
    K. Opacity The Opacity field is read-only and can not be modified.
    L. Border Radius The Border Radius field is read-only and can not be modified.
    M. Dimensions Enter the width, height and border size of the FancyBox. If no value is entered, the default values of 560x340x10 will be used.

    For this example, these fields were assigned: 400x200x4.

    N. Behavior In this area, no changes were made to the default values.

    km-easy-settings-07aaa

  • Images

    O. Image Extensions To make images open in an overlay, add their extension to the Auto-Detect field. Clear this field to switch off all Auto-Detection.

    For this example, no changes were made.

    P. Behavior To select a Transition and Easing In for both the Transition In and Transition Out field, select from the available selections.

    Note: Easing effects only apply when Transition is set to Elastic.

    Place a checkmark in the Transparency Fade checkbox if you have selected the Transition as Elastic.

    Place a checkmark in the Close checkbox if you want to close FancyBox when the content is clicked.

    For this example, this field was checked.

    Q. Appearance In this area, no changes were made to the default values.

    km-easy-settings-08aa

    If the fields were completed as outlined above, they will display as follows:

    km-easy-settings-09a

    For the Galleries area, the Auto Gallery was set to WordPress Galleries Only. All other fields were left at their default values.

    km-easy-settings-10a

Click the Save Settings button.

The next step of the guide will focus on Easy FancyBox: A Working Example

 


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend