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.
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.
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]
You can post a JS message to the parent page using window.parent.postMessage() function. I didn’t know this was possible. Developer Mozilla window post message
Can be used to interact between the windows. There is security concerns with this if the targetOrigin parameter is not set to the target with this function.
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.innerWidth and .innerHeight
gets CSS viewport@media (width) and @media (height) which include scrollbars
initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the @media values
zoom may cause values to be 1px off due to native rounding
undefined in IE8-
document.documentElement.clientWidth and .clientHeight
equals CSS viewport width minus scrollbar width
matches @media (width) and @media (height) when there is no scrollbar
same asjQuery(window).width() which jQuerycalls the browser viewport
Adobe has an active public repo for an accessible menu. It’s called “Mega Menu”. It’s adds classes, aria tags, and keypad controls for you! Here is the link for the js file. In my example I’ve assigned the classes hover, and open. You can use the enter, tab, and esc keys to go through the menus. I’ve included an example, and the code you’ll need below.
Here is a exmaple
You’ll have to add JS to target the menu, menu and sub-menus
$('.menu-primary-menu-container').accessibleMegaMenu();
setTimeout(function () {
$('body').removeClass('init');
}, 500);
$(".menu-primary-menu-container").accessibleMegaMenu({
/* prefix for generated unique id attributes, which are required
to indicate aria-owns, aria-controls and aria-labelledby */
uuidPrefix: "accessible-megamenu",
/* css class used to define the megamenu styling */
menuClass: "navbar-nav",
/* css class for a top-level navigation item in the megamenu */
topNavItemClass: "menu-item-has-children",
/* css class for a megamenu panel */
panelClass: "sub-menu",
/* css class for the hover state */
hoverClass: "hover",
/* css class for the focus state */
focusClass: "focus",
/* css class for the open state */
openClass: "open"
});
