ReactJS Introduction

ReactJS is one of the most popular JavaScript front-end libraries for building user interfaces with a strong foundation. It has a robust and rapidly growing developer community and a declarative, efficient, and flexible library for building reusable UI components. It is an open-source, component-based front-end library responsible only for the application view layer. 

ReactJS is one of the most popular JavaScript front-end libraries for building user interfaces with a strong foundation. It has a robust and rapidly growing developer community and a declarative, efficient, and flexible library for building reusable UI components. It is an open-source, component-based front-end library responsible only for the application view layer. 

Initially, it was developed by Jordan Walke, a software engineer at Facebook and maintained by Facebook. Later, it was used in other Facebook products like WhatsApp & Instagram. Facebook implemented ReactJS in its newsfeed section in 2011, but it was released to the public in May 2013.

The main objective of ReactJS is to develop interactive User Interfaces (UI) with the help of virtual DOM (JavaScript object) to improve application performance because the JavaScript virtual DOM is faster than the regular DOM because, it only changes individual DOM elements instead of reloading complete DOM every time. It uses component and data patterns that improve readability and helps to maintain larger apps.

The components are the heart of all React applications. These component are used to make a React application. Each component is responsible for outputting a small, reusable piece of HTML code and can be nested with other components to allow complicated applications.

Display Facebook Albums and Photos On Your Website

Facebook Album Browser is a Reponsive jQuery plugin for browsing public albums and photos from any Facebook account and showcases them as a photo gallery on your website. Albums are displayed with respective cover photos. Click on the cover photo to display all the photos under the album. Click on any photo opens the lightbox with next/prev buttons to navigate.

The main purpose of this plugin is to embed and customize Facebook photo albums in your website without being limited with Facebook styling. It also allows you to use it as picker as it raises events for clicked album/photo.

Plugin is compatible for both desktop and mobile websites.

How to Use:

  1. Load Facebook Album Browser plugin right after the jQuery library as shown below.
    <link rel="stylesheet" href="src/jquery.fb.albumbrowser.css">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="src/jquery.fb.albumbrowser.js"></script>
    
  2.  Create a container element in body of the page to display the Facebook Album Browser.
    <div class="fb-album-browser"></div>
  3. Call Facebook Album Browser in above container element and provide Facebook account to display albums as below.
    $(document).ready(function () {
      $(".fb-album-browser").FacebookAlbumBrowser({
        account: "starsportsindia"
      });
    });
  4. Use other options listed below to customize Facebook Album Browser plugin.
    // Facebook account
    account: "",
    
    // Facebook access token
    accessToken: "",
    
    // Display account information
    showAccountInfo: true,
    
    // Display the number of images
    showImageCount: true,
    
    // Skip albums which have no images
    skipEmptyAlbums: true,
    
    // An array of albums to be skipped
    skipAlbums: [],
    
    // switching on/off lightbox
    lightbox: true,
    
    // Allows using of plugin as an image multipicker.
    photosCheckbox: true,
    
    // An array of photos to be checked
    checkedPhotos: [],
  5. Use events listed below to perform specific actions on specific user action.
    // when album is selected in the browser.
    albumSelected: null,
    
    // when photo is selecetd in the browser.
    photoSelected: null,
    
    // when photo is selecetd in the browser. 
    photoChecked: null,
    
    // when photo is checked. 
    photoUnchecked: null,
  6. Every event function returns an object with following properties:
    id: image id in Facebook database
    url: large image url
    thumb: thumbnail image url

 

Download: https://github.com/dejanstojanovic/Facebook-Album-Browser

Demo: http://demo.technoworkshop.in/facebook-album-browser/