react-media-gallery v1.0.2

A responsive customizable media gallery for React apps.

Let your multimedia content take center stage with react-media-gallery. The easy to use component supports images, videos (YouTube, Vimeo, Dailymotion), Soundcloud and Spotify tracks, IFRAME's and AJAX content.

Based on poptrox

Preview

Installation

npm install react-media-gallery

Minimal setup example

Let's create a minimal gallery. A multimedia content to be shown by PopReactrox must, at least, be an anchor nesting an image as shown below.

<div id='minimal-gallery'>
	<a href="path/to/serve/src1">
		<img src="path/to/thumbnail1.jpg" />
	</a>
	<a href="path/to/serve/src2">
		<img src="path/to/thumbnail2.jpg" />
	</a>
</div>

The anchor points to the source we want to show in PopReactrox. The inner image points to the thumbnail we want our gallery to show. All that remains is to provide a selector to PopReactrox in order to find media contents to show:

import React from 'react'
import PopReactrox from 'react-media-gallery'

//...
render() {
    return (
      <PopReactrox PRTSettings={{selector: '#minimal-gallery a'}} />    
    );
}
//...

Props

Key shortcuts

Use left and right arrow keys to switch contents when usePopupNav is enabled. Close the popup with Escape key.

Captions

Don't forget to set usePopupCaption to true if you want to show captions inside PopReactrox. You can choose between three assignment methods: 1. Setting caption to null causes PopReactrox to search for the caption's content in the title attribute of the img tag of your media element:

<a href="path/to/serve/src">
	<img src="path/to/thumbnail" title="What a nice media element!" />
</a>

caption: null // Show "What a nice media element!"

2. Caption's content can be taken from the text content or from the data-attribute of a separate element, as long as the element is inside the anchor.

<a href="path/to/serve/src1">
	<img src="path/to/thumbnail1" title="What a nice media element!" />
	<span style="display: none;" class="description">Awesome media</span>
</a>
<a href="path/to/serve/src2">
	<img src="path/to/thumbnail2" title="What a nice media element!" />
	<span style="display: none;" class="description" data-desc="Magnificent media"></span>
</a>

caption: { selector: ".description" } // Show "Awesome media"

caption: { selector: ".description", attribute: "data-desc" } // Show "Magnificent media"

3. The advanced method consists in using a callback function (whose only argument is the anchor element) to retrieve nested contents.

<ul>
	<li data-desc="Superb media">
		<a href="path/to/serve/src1">
			<img src="path/to/thumbnail1" />
		</a>
	<li>
	<li>
		<a href="path/to/serve/src2">
			<img src="path/to/thumbnail2" />
		</a>
	<li>
</ul>

caption: a => {
	const suppliedContent = a.parentNode.getAttribute('data-desc')
	return suppliedContent
		? suppliedContent
		: 'No description'
}
// Show respectively "Superb media" and "No description"

Supported Types

PopReactrox supports different media types. To allow PopReactrox to recognize them, a data-popreactrox attribute must be provided to the anchors tag. By default a media anchor pointed by selector is interpreted as an image and does not require any data-popreactrox.

<a href="path/to/serve/src" data-popreactrox="type,sizes,options"><img src="path/to/thumbnail" /></a>

The content of data-popreactrox is a string consisting in a comma separated list of parameters:

• type: Media type (see below)
• sizes: Optional width and height separated by the 'x' character for custom popup sizes. Examples: 600x400 (pixel) or 80%x75% (percentage) or 100%x200 (hybrid). No other format is accepted.

• options: An optional list of options separated by the '&' character for those elements that support it. The parameter will not be interpreted if sizes is not provided.

AJAX Content

• Link format: Anything (as long as it's on the same domain)
• Type: ajax
• Default sizes: 600x400
• Options: Not supported

<a href="path/to/whatever.html" data-popreactrox="ajax"><img src="path/to/thumbnail" /></a>

Dailymotion Videos

• Link format: http://dai.ly/xxxxx (found via the "Share" button under "Copy link")
• Type: dailymotion
• Default sizes: 800x480
• Options: Dailymotion parameters

<a href="https://dai.ly/x7cf11d" data-popreactrox="dailymotion,600x400,autoplay=true"><img src="path/to/thumbnail"/></a>

IFRAMEs

• Link format: Anything.
• Type: iframe
• Default Sizes: 600x400
• Options: Not supported

<a href="path/to/whatever.html" data-popreactrox="iframe"><img src="path/to/thumbnail" /></a>

Soundcloud Tracks

• Link format: https://soundcloud.com/xxxxx/xxxxx (found via the "Share" button)
• Type: soundcloud
• Default Sizes: 600x200
• Options: Soundcloud Parameters

<a href="https://soundcloud.com/reminiscience/chopin-nocturne-op-9-no-2" data-popreactrox="soundcloud,80%x30%,download=true"><img src="path/to/thumbnail" /></a>

Spotify Tracks

• Link format: https://open.spotify.com/xxxxx/xxxxx (Right-click any song, album, artist, playlist or podcast. Get link under “Copy Song Link” or "Copy Album link" ...)
• Type: spotify
• Default Sizes: 350x380
• Options: Not supported

<a href="https://open.spotify.com/album/6GOR8TzS51xkdUCOfM4KjX" data-popreactrox="spotify"><img src="path/to/thumbnail" /></a>

Vimeo Videos

• Link format: http://vimeo.com/xxxxxxxx (found via the "Share" button under "Link")
• Type: vimeo
• Default Size: 800x480
• Options: Vimeo Parameters

<a href="https://vimeo.com/17160715" data-popreactrox="vimeo,100%x85%,autoplay=1&#t=85s"><img src="path/to/thumbnail" /></a>

YouTube Videos

• Link format: http://youtu.be/xxxxxxxx (found via the "Share" button)
• Type: youtube
• Default sizes: 800x480
• Options: Youtube Parameters

<a href="https://youtu.be/6JQm5aSjX6g" data-popreactrox="youtube,800x600,autoplay=1&mute=1"><img src="path/to/thumbnail" /></a>

Ignore

This type tells PopReactrox to treat whatever's in anchor's href as if it were a normal link.

• Link format: Anything.
• Type: ignore
• Options: Not supported

<a href="https://reactjs.org" data-popreactrox="ignore"><img src="path/to/thumbnail" /></a>

Custom style

Are you not satisfied with the customization possibilities offered by the PopReactrox's props?

• Set usePopupDefaultStyling to false
• Assign a custom selector to internal popup components you want to customize through popupSelector, popupLoaderSelector, popupCloserSelector, popupCaptionSelector, popupNavPreviousSelector, popupNavNextSelector
• Point to the assigned selectors in your own external style sheet

Test

Tested through Jest and Enzyme.

npm run test

License

MIT Licensed. Copyright (c) Mirko Monaco 2019.