React Media Lightbox

  •        0
  

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.



Lightbox is a popular and widely used concept for showing the gallery of media files. It is a very impressive approach for the end user to glance through media files. Media files like audio or video will load the html audio or video controls. 

Lightbox is a UI component which will be a simple, unobtrusive script used to overlay images on the current page. It is an elegant way to slide over the image gallery. It's a snap to setup and works on all modern browsers. It will blur the whole web page and show one of the images in the gallery which will avoid the screen size constraints. It will also keep the user on the same page and has next and previous controls to move between the images in the gallery. To return to the actual screen, we would have the close button to close the image lightbox modal and show the actual page. Having the count and slide position will be intuitive to the user for easy location of images in the gallery.

React lightboxes:

There are many lightboxes available in the npm repositories. Few of them are 

 

React PhotoSwipe Gallery

It is a React component wrapper made around Photoswipe, which is an open source JavaScript lightbox plugin developed by Dmitry Semenov in 2014 that has zero dependencies. It will be easy to setup and have touch gestures and zoom in features. Library has a nice framework with well documentation and easy to configure it. It also comes with a share button or full screen button and has onOpen callbacks features. Nice demos are available to get the quick feel of the project.

Cons of this library is, it is not able to handle video or audio files in the ligthbox and it also requires image presets size to render the items.

 

Simple React Lightbox:

The Simple React Lightbox library provides a React component wrapper (<SRLWrapper />) for implementing lightbox functionality on images coming from any external source. It also provides thumbnail gallery which shows the image in the lightbox with a thumbnail view at the bottom. It also has the full screen mode and well documented library. 

It was having the pro version which was shutdown by the developer. The Pro version has the support for the audio and video files.

 

React LightGallery:

React Lightgallery is another React component wrapper made around lightGallery.js, a modular JavaScript image and video lightbox gallery plugin. React Lightgallery ships prepackaged with features like inline gallery, pinch to zoom, and swipe to close, among others. It is also cross-device and works well on both mobile devices and the web.

React lightgallery provides a lot of demos, which will be an easy way to check about the features and customization possibilities. It allows you to style the lightbox as per the need with share and download options. The React Lightgallery package also provides access to a React higher-order component (withLightgallery), and a React Hook (useLightgallery) for use inside of <LightgalleryProvider />.

This also doesn't have support for audio files. LightGallery is a free and open-source library, however, if you are using the library for business, commercial sites, projects, and applications, choose the commercial license to keep your source proprietary, to yourself.

Let's Build Lightbox:

In this blog, we will create a lightbox in react for any media files ranging from image, audio or video. This is an outright approach to rule out the limitations available in the react ligthbox segments. In general, we will have an image, video or audio in the gallery to slide through it. Having flexibilities with prev and next event callback with chaining effect will help developers to add more customization from outside the component. 

Lets create a simple react webpack project and add react material to it. Material design will help us to display the media files in an elegant way. Lightbox is the react component created for the custom lightbox for the media files. It will have the following props to instantiate the component.

currentSlide(Number) Current slide number from which the lightbox display will start in
mediaItems(Object) List of media files with the media file type  {media: url, type: ['image', 'audio', 'video']}
toggler(Boolean) It is mainly to open the lightbox, provide the value true, while closing the lightbox, toggler will be false.
callback(Function) Callback method is called when the lightbox close event happens.

Apart from that, the component provides the event chaining for prev and next slide movement. 

    parentShowNext(Function) - It provides the slide next 
    parentShowPrev(Function) - It provides the slide previous 

     { toggler ? (
          <LightBox
            currentSlide={currentSlide}
            mediaItems={data}
            toggler={toggler}
            parentShowPrev = {(e) => {
                console.log("show prev button clicked", e);
            }}
            parentShowNext = {(e) => {
                 console.log("show next button clicked", e);
            }}
            callback={() => {
                 console.log("going to do a callback");
                 setToggler(false);
            }}
          />
          ) : (
          ""
      )} 

Modal dialog component will be used to make a lightbox popup to show the components. This modal will be shown or closed based on the toggler state. On close, toggler state will be turned off.

<Modal open={toggler} onClose={toggleIsOpen}>

There will be three icon buttons for

1. Close button with toggler state.  

<div className="close-btn">
        <IconButton onClick={toggleIsOpen} className={classes.arrowButton} size="small">
             <CloseIcon />
        </IconButton>
</div>

2. prev button which invokes showPrev function. In turn it will invoke the showPrev button on continuation of the previous button.


<div className="left">
         <IconButton onClick={showPrev} className={classes.arrowButton} size="small">
                <ArrowBackIcon />
        </IconButton>
 </div>


 const showPrev = (e) => {
	    e.stopPropagation();
	    const currentIndex = currentSlide;
	    if (currentIndex <= 0) {
	       setCurrentSlide(mediaItems.length - 1);
	    } else {
	       setCurrentSlide(currentIndex - 1);
	    }
	    setMedia(mediaItems[currentSlide].media);
	    parentShowPrev(e); 
 };

3. next button correspondingly invokes the showNext function. This also will invoke the parent show next button. 

<div className="right">
      <IconButton onClick={showNext} className={classes.arrowButton} size="small">
                <ArrowForwardIcon />
      </IconButton>
 </div>


  const showNext = (e) => {
	    e.stopPropagation();
	    const currentIndex = currentSlide;
	    if (currentIndex >= mediaItems.length - 1) {
	         setCurrentSlide(0);
	    } else {
	        setCurrentSlide(currentIndex + 1);
	    }
	    setMedia(mediaItems[currentSlide].media);
	    parentShowNext(e);  
   };

To load the media items with corresponding media controls. It will show the media controls only if there is a valid url available in the media gallery slide position. Exact CSS styles can be referred to in the github source project.

{media ? (
      <div style={{ display: "contents" }}>
        {mediaItems[currentSlide].type === "IMAGE" ? (
          <>
            <img src={media} alt="Image Broken" className={classes.lightbox} />
          </>
        ) : mediaItems[currentSlide].type === "VIDEO" ? (
          <div>
            <video className={classes.lightbox} controls>
              <source src={media} type="video/mp4" />
              <source src={media} type="video/ogg" />
            </video>
          </div>
        ) : mediaItems[currentSlide].type === "AUDIO" ? (
          <div className={classes.audioPlayer}>
            <audio src={media} controls autoPlay />
          </div>
        ) : null}
      </div>
    ) : (
      <div className={classes.circular}>
        <CircularProgress size={80} />
      </div>
    )}

Media files hosted in the remote server are collected as a collection of gallery items and this has been passed to the lightbox component. Complete working project is available in the github with styles required for the lightbox. 

const image1 =
  "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80";
const image2 = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrKHPsvNDJHY9tWpkHrfkfo8Dkf0LvZU3Hdg&usqp=CAU";
const image3 = "https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg";
const image4 = "https://wallpapercave.com/wp/wp4626258.jpg";
const image5 = "https://c4.wallpaperflare.com/wallpaper/907/35/593/spiderman-hd-4k-5k-wallpaper-preview.jpg";
const data = [
  {
    media: image1,
    type: "IMAGE",
  },
  {
    media: image2,
    type: "IMAGE",
  },
  {
    media: video1,
    type: "VIDEO",
  },
  {
    media: audio1,
    type: "AUDIO",
  },
  {
    media: image3,
    type: "IMAGE",
  },
  {
    media: image4,
    type: "IMAGE",
  },
  {
    media: image5,
    type: "IMAGE",
  },
];

GitHub Reference Project: https://github.com/princeofv/react-media-lightbox.git

 


   

Nagappan is a techie-geek and a full-stack senior developer having 10+ years of experience in both front-end and back-end. He has experience on front-end web technologies like HTML, CSS, JAVASCRIPT, Angular and expert in Java and related frameworks like Spring, Struts, EJB and RESTEasy framework. He hold bachelors degree in computer science and he is very passionate in learning new technologies.

Subscribe to our newsletter.

We will send mail once in a week about latest updates on open source tools and technologies. subscribe our newsletter



Related Articles

React Media LightBox - Part 2

  • react lightbox gallery media

In this blog, we will bring the essential features zoom control, download, fullscreen to enhance the view experience of the media items. Lightbox components provide options for captioning the media items as well. Brought all the features only with material design and there are no dependencies required for the functionalities of the media lightbox.

Read More


Build Consulting Website using Next.js

  • react nextjs website-development ssr

One of the popular web framework for building Single page application (SPA) or static site is React library. Application built with React packages will be rendered completely on the client side browser. If you want to reduce the load on client side browser, we need to pre-render the pages in server (Serer side rendering) and serve it to the client. So the client loads the page like simple html page. Also if the pages are rendered from server then search engine will be able to fetch and extract the pages. To do SSR for React, the best abstraction framework is Next.js. In this blog, we will explain how to build a simple consulting website using NextJS.

Read More


React Window - Optimized way to display large list

  • react react-window large-list

In Web development, there will be always a need to display content in a large list. Rendering a large list will slow down the web page load and increase the First Contentful Paint(FCP). Usually large lists are displayed in a paginated grid where user has to move around pages by clicking next. It will be good user experience, if the same page provides data of large list as and when we scroll.

Read More


Build Simple Ecommerce site using React and Jotai

  • ecommerce react jotai

Retail Ecommerce website can be created quickly with React. It can be created using React, Bootstrap, React DOM and Jotai. Data flow within the commerce site is done using Jotai in a light-weight manner. The main workflow of showing all the items in the gallery to user and user adding to the cart will be done as part of this blog.

Read More


Scene.js - Library to Create Timeline-Based Animation

  • scenejs css timeline javascript animation motion

Scene.js is a JavaScript timeline-based animation library for creating animation websites. As an animated timeline library, it allows you to create a chronological order of movements and positions of objects.

Read More



React Patent Clause Licensing issue. Is it something to worry?

  • react react-license facebook

React libraries from Facebook is one of the most used UI libraries. It is competitive to AngularJS. There are many open source UI components or frameworks available but mostly people narrow down to two choices Angular / React. Recently Facebook has updated React license and added a patent clause which makes companies to worry and rethink whether to use React or not.

Read More


React JS Developer Salary Overview

  • reactjs javascript salary

These days, web development is a need for any business - it attracts huge investments and can kick-start businesses. As for the tools mainly used for development, JavaScript is riding the wave right now. StackOverflow has been naming it the most popular programming language for six years straight. React, as one of the most popular JS libraries is also the first choice for interface developers. It offers some of the best web development tools for mobile and single-page applications.

Read More


React Reduce Vs Jotai

  • jottai react redux

While developing web applications, we built many components and having a data model across the application wide model will be difficult. We need common store management to update and get information across all the components. In React based Web UI, redux is the official centralized state management to be used which is internally wired as state changes to the component. There are other alternatives to redux which are light-weight and simple to use. One among them is Jotai, a minimalistic API for state management. In this blog we will take one of the redux examples given in the redux site and do the same in Jotai for deeper understanding.

Read More


Glific - Open Source Two Way Communication Platform for Social Sector Organizations

  • glific elixir communication architecture social-sector

Glific is an open source two way communication platform with primary focus on helping social sector organizations to interact with millions of beneficiaries concurrently through automated messages with rich media content and manual intervention wherever required. With Glific one can design flows to automate conversations, see how each of the beneficiaries is interacting with the bot and measure engagement.

Read More


JHipster - Generate simple web application code using Spring Boot and Angular

  • jhipster spring-boot angular web-application

JHipster is one of the full-stack web app development platform to generate, develop and deploy. It provides the front end technologies options of React, Angular, Vue mixed with bootstrap and font awesome icons. Last released version is JHipster 6.0.1. It is licensed under Apache 2 license.

Read More


Understanding Web Real-Time Communication (WebRTC)

  • webrtc communication web

Web Real-Time Communication (WebRTC) is an open source project currently being developed with an aim to provide real time, peer-to-peer communication between web applications. WebRTC provides simple JavaScript APIs that help developers to easily build web applications with real time audio, video and data transfer capabilities. This blog has been written assuming that the reader has zero knowledge of how WebRTC works and hence have explained the entire working in detail using simple terms and analogies wherever possible. Let’s get started!

Read More


Top 10 AI development tools which you should know in 2020

  • artificial-Intelligence neural-networks frameworks ai machine-learning

It is a fact the 2020 is not going the way we expected to be but when it comes to technology breakthrough we can say 2020 will be the heir of greatness. <br />Speaking of technical breakthroughs we have got artificial intelligence which is known to be taking over the mankind like a wildfire. Everything around us is connected through AI be it shopping travelling or even reading. Every other activity of ours is transforming into a whole new extent.

Read More


Appserver.io – The First Multithreaded Application Server for PHP written in PHP

  • appserver application-server php

What if you could reliably run PHP without Nginx or Apache, but also without relying on its internal server? What if you could do async operations in PHP with true multi threading, fully taking advantage of multi core processors without hacks or a jungle of callbacks? What if you had drag and drop installation support for your PHAR packaged web apps in an environment identical to its production counterpart? Welcome to appserver.io – the worlds first open source application server for PHP.

Read More


Generate PDF from Javascript using jsPDF

  • pdf jspdf javascript

We show lot of data in our web applications, it will be awesome if we quickly download specific part of PDF rather than printing it. It will be easy to share for different stakeholders and also for focused meetings. In web application development, download to PDF means, we need to develop backend api specifically and then link it in frontend which takes longer development cylce. Instead it would be really great, if there is way to download what we see in the user interface quickly with few lines of Javascript, similar to export options in word processing application.

Read More


Enhancing The Experience With Android TV: Briefly About One Developer's Impressions

  • android android-tv

In my software development career, I have always been attracted to new technologies and innovative solutions. Project by project, I have been exploring something new, discovering and implementing different approaches and trying new solutions. When Android TV showed up, I set a new personal goal. I described my impressions and the overall opinion on the application development for Android TV right here. Hope you will find it useful and interesting.

Read More


Know everything about Dependency Injection in Magento 2

  • magento dependency-injection php

Magento 2 is no longer a buzzing term. Since Its inception one and a half years ago, developers are in love with its rich technology stack. The following post emphasizes on Dependency Injection (DI), one of the best design patterns that Magento 2 uses.

Read More


All About Multi-Provider Feature of Angular Version 2.0

  • angular dependency-injection multi-providers

The newly introduced concept of dependency injection in Angular version 2.0 makes it an attractive front-end technology all because of one amazing feature called 'Multi-Providers'. In general, it allows the users to attach certain operations by themselves and a few plugin custom functionality which is not required in our mobile app use case.

Read More


Rowy - Airtable-like simplicity for managing your Firestore data

  • airtable-alternative spreedsheet admin-dashboard low-code cloud-function

Rowy an open-source platform to manage your data in an intuitive spreadsheet-like UI. Say goodbye to emailing that "vFinalFinal" Excel sheet. It helps to write Cloud Functions effortlessly in the browser, and connect to your favorite third party platforms such as SendGrid, Twilio, Algolia, Slack and more.

Read More


LogicalDOC - Open Source DMS

  • dms document-management-system

LogicalDOC is both a document management and a collaboration system. The software is loaded with many functions and allows organizing, indexing, retrieving, controlling and distributing important business documents securely and safely for any organization and individual.

Read More


Laravel eCommerce Platform - Bagisto

  • ecommerce shopping laravel php

Nowadays on the web, Shopping is one of the most popular activities. Everyone can shop at their recess, anytime from anywhere. However, this is interesting that anyone can have their pages built to display their favourite products and services.

Read More







We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.