CrowLightBoxReader

v0.1.7

Hi !! here we have react component I made, its a classic lightbox but we can read image video and song on same poolList of item. I made another component to work with this, is CrowMediaGallery if you want show media gallery (with images songs and videos) before to show LightBoxReader to see this component go to the github_project.

Install LightBoxReader

First you know need to install the project you have 3 way :

• download on github download zip.
• clone on github git clone https://github.com/InitialCrow/crow-lightbox-reader
• install via npm npm install crow-lightbox-reader --save

if you need just the component get the lib folder and put CrowLightBoxReader.min.js and CrowLightBoxReader.css in your project

else you can do npm install on directory if you clone from github to install dependencies to work on this component

Use CrowLightBoxReader

CrowLightBoxReader is work with react so make sure you have install react if you get component in lib folder and css to To use we need :

load component

import CrowLightBoxReader from 'crow-lightbox-reader' //or directory location

or

let CrowLightBoxReader = require('crow-lightbox-reader')//or directory location

use component

I take simple exemple of use but you can import LightBox on container to

import React from 'react';
import ReactDOM from 'react-dom';
import CrowLightBoxReader from 'crow-lightbox-reader'; //or directory location

const items = [
	{
		type : "image",
		src : "https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg",
		desc : "my desc here",
		alt : "my alt here",
		width : 4928,
		height :3264,
		thumbWidth: 50,
		thumbHeight : 50,
	},
	{
		type : "image",
		src : "https://www.w3schools.com/w3css/img_fjords.jpg",
		desc : "my desc2 here",
		alt : "my alt here",
		width : 300,
		height :300,
		thumbWidth: 50,
		thumbHeight : 50,
	},
	
	{
		type : "image",
		src : "http://reparation-materiel-montagne.fr/wp-content/uploads/2017/09/trial-300x300.jpg",
		desc : "my desc here",
		alt : "my alt here",
		width : 300,
		height :300,
		thumbWidth: 50,
		thumbHeight : 50,
	},
	{
		type : "video",
		src : "http://vjs.zencdn.net/v/oceans.mp4",
		desc : "my desc here4",
		thumbWidth: 50,
		width : 1080,
		height :450,
		thumbHeight : 50,
	},
	{
		type : "audio",
		src : "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
		thumbSrc : "https://au.yamaha.com/en/files/front%20page%20banner_1200x480_d5a393465b9094b78c6cde73d642f31e.jpg",
		desc : "my desc here",
		width : 300,
		height :300,
		thumbWidth: 50,
		thumbHeight : 50,
	},]
ReactDOM.render(<CrowLightBoxReader settings={{showLightBox : true}} items={items} />, document.getElementById('root'));

like this you will have the lightbox as you can see we have to props needed items props is pool of item you want to show follow this items array model

Options

if you want change LightBox settings you can do like this

import React from 'react';
import ReactDOM from 'react-dom';
import CrowLightBoxReader from 'crow-lightbox-reader'; //or directory location

const settings = { //this is settings configuration 
	showPool : true, // if you want render thumbnail on lightBox
	showBtn : true, // if you want to show next and prev buttin
	showDesc : true, // if you want to show the top desc
	showLightBox : true, // if you want to show the CrowLightBoxReader
	showPagination : true, // if you want to show the pagination
	showCloseBtn : true, // if you want to show close lightBox Button
    nodeToHide : 'root' // put id of node if you want hide node content befor show lightbox
	debug : false, // if you want to show debug messages
}

const items = [
	{
		type : "image",
		src : "https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg",
		desc : "my desc here",
		alt : "my alt here",
		width : 4928,
		height :3264,
		thumbWidth: 50,
		thumbHeight : 50,
	},
	{
		type : "image",
		src : "https://www.w3schools.com/w3css/img_fjords.jpg",
		desc : "my desc2 here",
		alt : "my alt here",
		width : 300,
		height :300,
		thumbWidth: 50,
		thumbHeight : 50,
	},
	
	{
		type : "image",
		src : "http://reparation-materiel-montagne.fr/wp-content/uploads/2017/09/trial-300x300.jpg",
		desc : "my desc here",
		alt : "my alt here",
		width : 300,
		height :300,
		thumbWidth: 50,
		thumbHeight : 50,
	},
	{
		type : "video",
		src : "http://vjs.zencdn.net/v/oceans.mp4",
		desc : "my desc here4",
		thumbWidth: 50,
		width : 1080,
		height :450,
		thumbHeight : 50,
	},
	{
		type : "audio",
		src : "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
		thumbSrc : "https://au.yamaha.com/en/files/front%20page%20banner_1200x480_d5a393465b9094b78c6cde73d642f31e.jpg",
		desc : "my desc here",
		thumbWidth: 50,
		thumbHeight : 50,
		width : 1080,
		height :450,
	},
]

ReactDOM.render(<CrowLightBoxReader isRead={0// index of pool you want to begin to show} closeCallBack={mycallback //trigger close action} settings={settings} items={items} />, document.getElementById('root'));

here you have all settings you can change now

have good dev :)

License

MIT CrowLightBoxReader is free to use mention is apreciate thank you.