Mr Branding

Wednesday, November 13, 2019

6 Best WordPress Lightbox Plugins

What is a WordPress Lightbox Plugin?

If you have a website with multiple images that you want to highlight, you could definitely benefit from using a lightbox. Generally, a lightbox allows people to click on an image or other content to view its enlarged version overlaid on the rest of the page. While the lightbox is open, the page content is also dimmed to make sure that the focus of the user stays on the content of the lightbox.

In this post, we will look at the best WordPress lightbox plugins available on CodeCanyon. We'll be looking at two different kinds of WordPress lightbox plugins: plugins that are specifically created to serve as a lightbox, and plugins where the lightbox comes bundled with a WordPress gallery.

Lightbox scripts exist for all kinds of websites in addition to those built with WordPress. If you are looking for jQuery-based lightbox plugins, please consider going through our list of best jQuery lightbox plugins.

JavaScript

Best jQuery Lightbox Plugins to Make Your Page Pop

Monty Shokeen

As you will see, the right choice for your project depends on your needs. Usually, a plugin which focuses on implementing a lightbox provides many more features. You can use these to display any type of content like images, videos, webpages, etc. Gallery plugins which also offer a lightbox usually don't allow you to show other kinds of content.

ARI Fancy Lightbox

The first plugin in our list is ARI Fancy Lightbox. This lightbox plugin has a responsive mobile-ready design and offers a lot of great features.

You can easily integrate the content with various social networks like Facebook, Twitter, and LinkedIn. Not only that but it is also possible to integrate Facebook comments with the plugin in order to display comments from users for each attachment.

The plugin works great on desktops as well as on mobile devices. You will also be able to provide full support for gestures like pinch, zoom, tap, and swipe when viewers use the plugin on mobile devices.

It also supports one click integration with WooCommerce plugin to show all product images and give users the ability to share and comment on them. The titles of the images are intelligently pulled from their EXIF data.

The plugin also supports deep linking so you can directly provide links to a specific item which is opened in the lightbox when users click on that link.

ModuloBox Lightbox Plugin

The ModuloBox Lightbox plugin is another responsive and mobile ready WordPress lightbox plugin. It is written in plain JavaScript so you won't have to rely on any 3rd party libraries to make it work.

The plugin works well with a lot of gallery plugins like NextGen gallery and Essential Grid gallery. You can show all kind of content in the lightbox like images, iframes and videos from a variety of sources.

Gestures like tapping, pinching and dragging are available for mobile users to add support for zooming and navigating through the images.

You can add multiple galleries on a single webpage and allow users to click on thumbnails to navigate through them. It also comes with a slideshow mode and a fullscreen mode.

The controls also have a social sharing buttons that gives users the option to share the content on all popular social networks.

The plugin is designed to be as user-friendly as possible. This is achieved using a combination of techniques. For example, the user interface is designed in a way that mimics iOS and Android. The support for keyboard navigation and mouse wheel makes it very easy for desktop users to navigate through all the content.

Revolution Lightbox WordPress Plugin

The Revolution Lightbox WordPress plugin is a complete package if you are looking for a feature-rich and multi-purpose lightbox plugin.

You can use the plugin to display media like images, videos, audio, HTML content, iframes, Google maps or even Flash content in a lightbox. It also works on all devices and platforms like Windows, Android, and iOS.

The code for the plugin has been written keeping performance as a top priority. It uses CSS3 properties to add all the animations. The content that goes into the lightbox can be easily specified either in the admin panel or using JSON.

The plugin offers support for deeplinking so you can directly link to any item in the lightbox. It is also easy for users to navigate because the plugin supports gestures as well as keyboard navigation.

Ease of customization is also a very strong point in favor of the plugin. You can control a lot of things like the border size, color, and drop shadow. in the admin panel. It also comes with two different themes and separate Photoshop PSD files to make it easy to change every single element in the lightbox.

Album and Image Gallery Plus Lightbox

If you are looking for a plugin that can serve the purpose of both a gallery and a lightbox, you will find the Album and Image Gallery Plus Lightbox plugin useful.

This plugin gives you a bunch of options to specify how and where the images appear on the webpage. You can either group the images together in an album or you can display them all on a single page. Clicking on either the images or the album will open a basic lightbox that will show all the images from that gallery or album.

Both the album and the gallery offer a grid and a slider view. There are 15 different layout options for each of them. The lightbox is fully responsive and you can show content like title, caption and description for all the images.

Album and Image Gallery Plus Lightbox screenshot

The plugin is multilingual on both the front-end and the back-end. It also has support for RTL languages in the slider. The plugin is fully responsive and can be easily added to any WordPress page or post using shortcodes.

WordPress Images PDF Lightbox

The WordPress Images PDF Lightbox is different than the other plugins we have looked at so far. It is meant to serve a very specific purpose: you can use it to generate PDF files for your users from all the images that they select in the lightbox.

On the front-end, users can simple select all the photos that they want to add to their PDF. After that, they will either be able to directly download the PDF or asked to enter contact information like email address to get a download link, depending on how you set up the plugin.

On the back-end, you can set a bunch of options like the cover image for the PDF file or a watermark that will be applied on each image. Instead of allowing users to directly download the PDF, you can also render a form where users provide their email address and other information.

WordPress Images PDF Lightbox back-end configuration

This is a great way to let users download the images they want as a PDF and get their contact information at the same time.

Quick View Lightbox for WordPress Posts

The Quick View Lightbox for WordPress Post plugin is actually meant to serve a different purpose that has nothing to do with images or videos. It allows people to read a WordPress post or page without directing them to some other link in the browser.

Basically, when a user clicks on a post link, the Quick View plugin loads the content of the clicked WordPress page or post in the background and then all its content appears inside a lightbox. This allows people to read the content of different pages without leaving the main page.

The 11 different lightbox templates as well as the smooth and attractive animations applied on the lightboxes when they are opened make the plugin even more awesome.

You can set a bunch of options to control the behavior of the lightbox plugin. This includes allowing users to close the lightbox once they hit the escape key or click on the background. You also have full control over the text, size, color and position of the button that triggers the lightbox.

Quick View Lightbox for WordPress Posts screenshot

One limitation of the plugin is that it only works with the default WordPress posts or the WPBakery page builder. You are out of luck if you use something else to create your posts.

Final Thoughts

In this tutorial, we looked at some popular and unique WordPress lightbox plugins. If you are looking for a general purpose lightbox plugins, you can choose from ARI Fancy Lightbox, ModuloBox Lightbox, or Revolution Lightbox. All of them allow you to display different kinds of media inside the lightbox.

If you are looking for something that can work as a gallery as well as a lightbox plugin, look no further than the Album and Image Gallery Plus Lightbox plugin. You will be able to arrange all images in a WordPress post in fancy layouts as well as open them using a simple lightbox.

If you are looking for a plugin that will load any WordPress post from your website in a lightbox, the Quick View lightbox plugin will be the perfect choice for you.

If you want to look at some more lightbox plugins before deciding to buy one for your website, please consider visiting CodeCanyon where your will find over 150 lightbox related WordPress plugins. All the plugins available on CodeCanyon come with free lifetime updates and 6 months of free support to help you get started quickly.

by Monty Shokeen via Envato Tuts+ Code

tiptap – Extendable Rich-Text Editor for Vue.js

tiptap is a renderless and extendable rich-text editor for Vue.js

You can easily add custom nodes as Vue components.

by via jQuery-Plugins.net RSS Feed

Instagram Just Copied Another TikTok Feature

Instagram is known to be the networking hub of the internet. Its where the brands come to hunt celebrities and customers come to hunt good brands. Once developed as just a picture and video sharing social media platform, Instagram has grown because of its innovative ways however, it seems that...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Aabroo Saeed via Digital Information World

Getting Started with the React Native Navigation Library

One of the most important aspects of React Native app development is the navigation. It’s what allows users to get to the pages they’re looking for. That’s why it’s important to choose the best navigation library to suit your needs.

If your app has a lot of screens with relatively complex UI, it might be worth exploring React Native Navigation instead of React Navigation. This is because there will always be performance bottlenecks with React Navigation, since it works off the same JavaScript thread as the rest of the app. The more complex your UI, the more data has to be passed to that bridge, which can potentially slow it down.

In this tutorial, we’ll be looking at the React Native Navigation library by Wix, an alternative navigation library for those who are looking for a smoother navigation performance for their React Native apps.

Prerequisites

Knowledge of React and React Native is required to follow this tutorial. Prior experience with a navigation library such as React Navigation is optional.

App Overview

In order to demonstrate how to use the library, we’ll be creating a simple app that uses it. The app will have five screens in total:

Initialization: this serves as the initial screen for the app. If the user is logged in, it will automatically navigate to the home screen. If not, the user is navigated to the login screen.
Login: this allows the user to log in so they can view the home, gallery, and feed. To simplify things, the login will just be mocked; no actual authentication code will be involved. From this screen, the user can also go to the forgot-password screen.
ForgotPassword: a filler screen, which asks for the user’s email address. This will simply be used to demonstrate stack navigation.
Home: the initial screen that the user will see when they log in. From here, they can also navigate to either the gallery or feed screens via a bottom tab navigation.
Gallery: a filler screen which shows a photo gallery UI.
Feed: a filler screen which shows a news feed UI.

Here’s what the app will look like:

React Native Navigation demo gif

You can find the source code of the sample app on this GitHub repo.

Bootstrapping the App

Let’s start by generating a new React Native project:

react-native init RNNavigation --version react-native@0.57.8

Note: we’re using a slightly older version of React Native, because React Native Navigation doesn’t work well with later versions of React Native. React Native Navigation hasn’t really kept up with the changes in the core of React Native since version 0.58. The only version known to work flawlessly with React Native is the version we’re going to use. If you check the issues on their repo, you’ll see various issues on version 0.58 and 0.59. There might be workarounds on those two versions, but the safest bet is still version 0.57.

As for React Native version 0.60, the core team has made a lot of changes. One of them is the migration to AndroidX, which aims to make it clearer which packages are bundled with the Android operating system. This essentially means that if a native module uses any of the old packages that got migrated to the new androidx.* package hierarchy, it will break. There are tools such as jetifier, which allows for migration to AndroidX. But this doesn’t ensure React Native Navigation will work.

Next, install the dependencies of the app:

react-native-navigation — the navigation library that we’re going to use.
@react-native-community/async-storage — for saving data to the app’s local storage.
react-native-vector-icons — for showing icons for the bottom tab navigation.

yarn add react-native-navigation @react-native-community/async-storage react-native-vector-icons

In the next few sections, we’ll be setting up the packages we just installed.

First, we’ll set up the React Native Navigation library. The instructions that we’ll be covering here are also in the official documentation. Unfortunately, it’s not written in a very friendly way for beginners, so we’ll be covering it in more detail.

Note: the demo project includes an Android and iOS folders as well. You can use those as a reference if you encounter any issues with setting things up.

Since the name of the library is very long, I’ll simply refer to it as RNN from now on.

Android Setup

In this section, we’ll take a look at how you can set up RNN for Android. Before you proceed, it’s important to update all the SDK packages to the latest versions. You can do that via the Android SDK Manager.

settings.gradle

Add the following to your android/settings.gradle file:

include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')

Gradle Wrapper Properties

In your android/gradle/wrapper/gradle-wrapper.properties, update Gradle’s distributionUrl to use version 4.4 if it’s not already using it:

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

build.gradle

Next, in your android/build.gradle file, add mavenLocal() and mavenCentral() under buildscript -> repositories:

buildscript {
    repositories {
      google()
      jcenter()

      // add these:
      mavenLocal()
      mavenCentral()
    }
}

Next, update the classpath under the buildscript -> dependencies to point out to the Gradle version that we need:

buildscript {
  repositories {
    ...
  }

  dependencies {
    classpath 'com.android.tools.build:gradle:3.0.1'
  }

}

Under allprojects -> repositories, add mavenCentral() and JitPack. This allows us to pull the data from React Native Navigation’s JitPack repository:

allprojects {
allprojects {

  repositories {
    mavenLocal()
    google()
    jcenter()
    mavenCentral() // add this
    maven { url 'https://jitpack.io' } // add this
  }

}

Next, add the global config for setting the build tools and SDK versions for Android:

allprojects {
  ...
}

ext {
    buildToolsVersion = "27.0.3"
    minSdkVersion = 19
    compileSdkVersion = 26
    targetSdkVersion = 26
    supportLibVersion = "26.1.0"
}

Lastly, we’d still want to keep the default react-native run-android command when compiling the app, so we have to set Gradle to ignore other flavors of React Native Navigation except the one we’re currently using (reactNative57_5). Ignoring them ensures that we only compile the specific version we’re depending on:

ext {
 ...
}

subprojects { subproject ->
    afterEvaluate {
        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                variantFilter { variant ->
                    def names = variant.flavors*.name
                    if (names.contains("reactNative51") || names.contains("reactNative55") || names.contains("reactNative56") || names.contains("reactNative57")) {
                        setIgnore(true)
                    }
                }
            }
        }
    }
}

Note: there are four other flavors of RNN that currently exist. These are the ones we’re ignoring above:

reactNative51
reactNative55
reactNative56
reactNative57

android/app/build.gradle

On your android/app/build.gradle file, under android -> compileOptions, make sure that the source and target compatibility version is 1.8:

android {
  defaultConfig {
    ...
  }

  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
}

Then, in your dependencies, include react-native-navigation as a dependency:

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"
    implementation project(':react-native-navigation') // add this
}

Lastly, under android -> defaultConfig, set the missingDimensionStrategy to reactNative57_5. This is the version of RNN that’s compatible with React Native 0.57.8:

defaultConfig {
  applicationId "com.rnnavigation"
  minSdkVersion rootProject.ext.minSdkVersion
  targetSdkVersion rootProject.ext.targetSdkVersion
  missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5" // add this
  versionCode 1
  versionName "1.0"
  ndk {
    abiFilters "armeabi-v7a", "x86"
  }
}

The post Getting Started with the React Native Navigation Library appeared first on SitePoint.

by Wern Ancheta via SitePoint

Selling Your Used Phone Can Be Dangerous for Your Privacy

As the technology is getting better the only way companies are selling new phones to the people who already have phones is to incorporate the devices with new features. The only issue is that users are finding it hard to buy these expensive phones so they just sell their old phones to buy newer and...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Aabroo Saeed via Digital Information World

Important Social Media Trends to Look Into for 2020

Working in a field that requires you to stay up to date on the various social media trends that are taking the world by storm can be both a blessing as well as a curse. It can be a blessing because of the fact that you would be staying up to date on something that has a pretty serious impact on the...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Zia Muhammad via Digital Information World

How Google wants to move towards a faster Web

#417 — November 13, 2019

Read on the Web

Frontend Focus

Firefox at 15: Its Rise, Fall, and Privacy-First Renaissance — Mozilla’s browser debuted in 2004, and became a hit before losing ground to Chrome. Now it’s doubling down on user privacy and autonomy.

Sean Captain

How Google Wants to Move Towards a Faster Web — Chrome has announced plans to highlight whether a site is known for loading fast or slow. Quick sites will be ‘rewarded’ with a green loading bar, whereas slow sites will be flagged with an on-screen ‘badge of shame’.

Google

▶ Listen to the Podcast: Building with Web Components — Award-winning designer Ben Farrell from Adobe talks about web components, the new standard for building feature-rich web applications.

Heroku sponsor

Results of the 2019 Front-End Tooling Survey — Over 3,000 developers took part in Ashley’s survey this year. Here’s the compiled results, offering an insight into the current usage trends and knowledge levels across front-end tools.

Ashley Nolan

▶ Chrome Dev Summit 2019 Keynote — The keynote from this year’s Chrome Dev Summit, celebrating the diversity of the web. Here’s a playlist with all the videos from the event — plenty worth digging into.

Google Chrome Developers

Uncommon Use Cases For Pseudo Elements — A neat round up of some creative uses for pseudo elements (i.e. :before and :after elements defined in CSS). I can see myself using some of these..

Ahmad Shadeed

💻 Jobs

Senior Software Engineer at Getty (Los Angeles, CA) — Build fantastic tools and interfaces at one of the world's most prestigious cultural heritage orgs using Linked-Open-Data, Python, Structured-CMS, Vue.js.

J. Paul Getty Trust

Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

📙 News, Tutorials & Opinion

▶ HTML Isn’t Done! — Folks from both Microsoft and Google take to the stage at Chrome Dev Summit to talk about their collaborative work on Chromium over the past few months, plus a look at what’s on the horizon.

Nicole Sullivan and Greg Whitworth

Some Things You Oughta Know When Working with Viewport Units — There are a number of “gotchas” when trying to set height and width based on the full height/width of the viewport.

Chris Coyier

Tried & True Tips from 24 React Experts to Make You More Productive — Get invaluable, practical productivity tips from React and JavaScript experts on how to excel in React. Read on.

Progress KendoReact sponsor

Semantic Sidenotes for The Web — Sidenotes have been around for ages in print, but the author argues that they’re surprisingly hard to do well in HTML. Here’s a web friendly proposal for adding such details, anecdotes and silliness to the side of your articles.

Koos Looijesteijn

Preloading Fonts: When Does It Make Sense? — Can preloading a custom font help avoid a flash of unsettled text (FOUT)? This article runs through your options for font loading behaviour.

Matej Latin

▶ Refactoring (The Way We Talk About) CSS — In this talk Rachel explains how, in the last few years, CSS has been refactored to an extent that to really explain how CSS works we need to change the way we teach and talk about the language.

Rachel Andrew

JavaScript Isn’t Always Available and It’s Not The User’s Fault — Adam runs through some of the reasons as to why JavaScript fails to work for some users, and what you can do about it.

Adam Silver

How to Use ffmpeg to Combine Multiple Videos to One — A quick tip on how to combine multiple separate videos into a single one, using ffmpeg.

Mattias Geniar

Free Download: Results from Our Video Developer Survey 2019

Bitmovin sponsor

A Super Weird CSS Bug That Affects Text Selection — An interesting quirk where merely using a selector without any style properties can cause no styling to be applied at all.

Chris Coyier

When to Use SVG vs. When to Use Canvas

Chris Coyier

🔧 Code, Tools & Resources

instant.page 3.0: Make Your Pages (Even More) Instant — instant.page provides a brief JavaScript snippet which adds just-in-time preloading to the links on your pages, providing a noticeably briefer latency when navigating to a new page. Version 3 takes some ideas from Google’s quicklink to seem even faster on mobile.

Alexandre Dieulot

CodyHouse Autocompletion Package for Atom — If you use the text editor Atom then this extension may prove handy. It autocomplete CSS utility classes, SCSS custom properties and JS utility functions.

CodyHouse

linkinator: Scurry Around Your Site and Find All Those Broken Links — A site crawler for validating links. Recently updated.

Justin Beckwith

🗓 Upcoming Events

Performance Now, November 21-22 — Amsterdam, Netherlands — A single track conference with fourteen speakers, covering the most important web perf insights.

HalfStack Conf, November 22 — London, UK — A single day event focused on UI-centric JavaScript and web development.

Frontend Con, November 26-27 — Warsaw, Poland — Brings together 30+ experts with over 500 experienced frontend pros from all over the world.

dotCSS, December 4 — Paris, France — The largest CSS conference in Europe.

🕰 ICYMI (Some older stuff that's worth checking out...)

Sarah Higley reviews the history and current state of tooltip accessibility.
How devs at the BBC made the switch from iframes to using Shadow Dom.
A performance case study from Harry Roberts exploring a CSS problem with a popular webfont provider.
This web museum is a gallery looking back at how famous internet companies have changed over time.
Here's a proof of concept for making Sass faster.
Charlie Gerard explains how she protoyped a gesture recognition system to play Street Fighter with body movements.

by via Frontend Focus

Wednesday, November 13, 2019

What is a WordPress Lightbox Plugin?

Final Thoughts

Prerequisites

App Overview

Bootstrapping the App

Setting up React Native Navigation

Android Setup

settings.gradle

Gradle Wrapper Properties

build.gradle

android/app/build.gradle