Posted on

Prevent BODY from scrolling when a modal is opened

CategoriesCSS, Development, Front End, jQuery / JavaScript

Bootstrap’s modal automatically adds the class modal-open to the body when a modal dialog is shown and removes it when the dialog is hidden. You can therefore add the following to your CSS:

body.modal-open {
    overflow: hidden;
}

You could argue that the above code belongs to the Bootstrap CSS code base, but this is an easy fix to add it to your site.

A workaround would be to add the class to the body when the modal is about to be shown, and remove it when the modal is closed:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

Note: to prevent the underlying page from jumping left/right when showing/hiding modals.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}
Posted on

Responsive Lightbox & Gallery

CategoriesExternal, Plugins

Description

Responsive Lightbox & Gallery allows users to create galleries and view larger versions of images, galleries and videos in a lightbox (overlay) effect optimized for mobile devices.

For more information, check out plugin page at dFactory or see the Live demo on our site.

Responsive Lightbox & Gallery

FEATURES INCLUDE:

  • Powerful, but easy to use gallery builder
  • 3 beautiful basic gallery templates – Grid, Slider and Masonry
  • 8 responsive lightbox scripts (SwipeBox, prettyPhoto, FancyBox, Nivo Lightbox, Image Lightbox, Tos “R” Us, Featherlight, Magnific Popup)
  • Create galleries from Media Library or Post attached images
  • Drag n drop reordering of images
  • Gallery picker to insert shortcodes
  • Iframe, Ajax, HTML5 and Inline lightbox content support
  • Advanced pagination, incl. AJAX and infinite scroll
  • Automatically add lightbox to WordPress image galleries
  • Automatically add lightbox to WordPress image links
  • Automatically add lightbox to WordPress video links (YouTube, Vimeo)
  • Automatically add lightbox to widgets content
  • Automatically add lightbox to WordPress comments content
  • WooCommerce product gallery support
  • Visual Composer compatibility
  • Gallery widget
  • Single image widget
  • Option to display single post images as a gallery
  • Option to modify native WP gallery links image size
  • Option to set gallery images title from image title, caption, alt or description
  • Option to force lightbox for custom WP gallery replacements like Jetpack tiled galleries
  • Option to trigger lightbox on custom jquery events
  • Option to conditionally load scripts and styles only on pages that have images or galleries in post content
  • Enter a selector for lightbox
  • Highly customizable settings for each of the lightbox scripts
  • Multisite support
  • Filter hook for embeddding different scripts based on any custom conditions (page, post, category, user id, etc.)
  • .pot file for translations included

Premium Extensions:
Photo & Art bundle
Justified Gallery
Expander Gallery
Hidden Gallery
Masonry Image Gallery
Slider Gallery
Lightcase Lightbox
PhotoSwipe Lightbox
Lightgallery Lightbox
Strip Lightbox
Fancybox Pro

Posted on

WP Video Lightbox

CategoriesExternal, Plugins

The WordPress Video Lightbox plugin allows you to embed videos on a page using lightbox overlay display.

This plugin can be used to display images, flash, YouTube, Vimeo, iFrame etc in a lightbox overlay. The embedded videos can be viewed on iPhone and iPad too.

WP Video Lightbox

EMBEDDING VIMEO VIDEO
You can embed a vimeo video using the following shortcode in a WordPress post or page:

[video_lightbox_vimeo5 video_id="13562192" width="640" height="480" anchor="click here to open vimeo video"]
[video_lightbox_vimeo5 video_id="13562192" width="640" height="480" anchor="http://www.example.com/images/vimeo-thumb.jpg"]

You need to replace the value of “video_id” with your actual vimeo video ID. When a user clicks on the anchor text/image your vimeo video will pop up in lightbox.

EMBEDDING YOUTUBE VIDEO
You can embed a YouTube video using the following shortcode in a WordPress post or page:

[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="click here to open YouTube video"]
[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="http://www.example.com/images/youtube-thumb.jpg"]

You need to replace the value of “video_id” with your actual YouTube video ID. You can also control the size of the lightbox window by customizing the width and height parameters.

OPTIMIZING THE SEO OF YOUR THUMBNAIL IMAGE
When you are using a thumbnail image as the anchor, you can describe it using the “alt” parameter in the shortcode. It helps Search Engines understand what this image is about.

[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="http://www.example.com/images/youtube-thumb.jpg" alt="text that describes this image"]

You need to replace the value of “alt” with your own description of the image.

FEATURES/SETTINGS CONFIGURATION

Once you have installed the plugin you can configure some options to customize the popup. The settings menu can be accessed from “Settings->Video Lightbox->prettyPhoto”.

  • Enable prettyPhoto: Check this option if you want to use the prettyPhoto library
  • Animation speed: fast / slow / normal [default: fast]
  • Autoplay slideshow: true / false [default: false]
  • Opacity: Value between 0 and 1 [default: 0.8]
  • Show title: true / false [default: true]
  • Allow resize: Resize the photos bigger than viewport. true / false [default: true]
  • Allow expand: Allow the user to expand a resized image. true / false [default: true]
  • Default width: default width of the lightbox window [default: 640, you can override it using the width parameter in the shortcode]
  • Default height: default height of the lightbox window [default: 480, you can override it using the height parameter in the shortcode]
  • Counter separator label: The separator for the gallery counter in lightbox [default: /]
  • Theme: theme for the lightbox window – Default, Light Rounded, Dark
  • Rounded, Light Square, Dark Square, Facebook
  • Horizontal padding: The padding on each side of the lightbox window [default: 20]
  • Hide Flash: Hides all the flash objects on a page, set to true if flash appears over prettyPhoto [default: false]
    wmode: the flash wmode attribute [default: opaque]
  • Autoplay: Automatically start videos: true / false [default: true]
  • Modal: If set to true, only the close button will close the window [default: false]
  • Deeplinking: Allow prettyPhoto to update the url to enable deeplinking. [default: true]
  • Overlay gallery: If this enabled, a gallery will overlay the fullscreen image on mouse over [default: true]
  • Overlay gallery max: Maximum number of pictures in the overlay gallery [default: 30]
  • Keyboard shortcuts: Set to false if you open forms inside prettyPhoto [default: true]
  • IE6 fallback: compatibility fallback for IE6 [default: true]

ADDITIONAL FEATURES

  • Automatically retrieve the thumbnail for your video and embed in lightbox
  • Load YouTube video over https. This is great if you have SSL installed on your site
  • Disable suggested videos at the end of a YouTube video
  • Flexiblity of using both shortcode/html code to pop up media in lightbox
  • Show description of a popup in overlay
  • For video tutorial, screenshots, detailed documentation, support and updates, please visit: WP Video Lightbox plugin page