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

Custom Fancybox CSS Style

CategoriesCSS, Development, Front End

EXAMPLE
Here is an example implementation of fancy box on the Albany Pump website.

CSS File

body {  
  // fancybox skin style
  .fancybox-skin {
  	// -webkit-box-shadow:none;
  	// -moz-box-shadow: none;
  	// box-shadow:none;
  	// background:none;
  }

  // close button
  .fancybox-close {
  	// background: url(../images/IMAGE-NAME.png) no-repeat;
  	// background-size: 20px 20px;
  	// top: -40px;
  }
  .fancybox-close:hover, .fancybox-close:focus {
  }

  // fancybox caption text area
  .fancybox-text {
  }

  // fancybox next control button
  .fancybox-next span {
  }
  .fancybox-next span:hover, .fancybox-next span:focus {
  }

  // fancybox previous control button
  .fancybox-prev span {
  }
  .fancybox-prev span:hover, .fancybox-prev span:focus {
  }

  .fancybox-title.fancybox-title-float-wrap {
  	span {
  	}
  	> .child {
  	// border-radius: 0px;
  	// background-color: rgba(0,112,60,0.85);
  	// white-space: normal;
  	// text-shadow: none;
  	}
  }
}