Skip to content

Video & Iframe support #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Video & Iframe support #16

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
25e196b
Added option to add thumbnail
Ovi May 16, 2019
d339b1b
Updated package.json *v0.1.6*
Ovi May 16, 2019
231eef1
Add Support to Video and Iframe's
hamsahmedansari Aug 20, 2019
93e091f
Auto Thumbnail Added
hamsahmedansari Aug 20, 2019
247a121
readme updated
hamsahmedansari Aug 20, 2019
2d846e7
remove dependencies
hamsahmedansari Aug 20, 2019
dd60eb9
Removed Logs"
hamsahmedansari Aug 20, 2019
3c468ae
Remove all un used code
hamsahmedansari Aug 21, 2019
773b3c0
Fixed Bugs
hamsahmedansari Aug 21, 2019
d1101fe
Fixed all changes
hamsahmedansari Aug 21, 2019
c6c3f22
improve code readability
hamsahmedansari Aug 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 51 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# react-fb-image-grid

An image library that's used to show the images in beautiful grids.

Below you will find some information on how to perform common tasks.<br>


## Table of Contents

- [What's new](#whats-new)
@@ -12,68 +12,101 @@ Below you will find some information on how to perform common tasks.<br>
- [Pull Requests](#pr)
- [License](#license)

## What's new `v0.1.6`

## What's new `v0.1.5`
* Fixed key warning.

- Added option to provide thumbnail.

## Demo
![react-fb-image-grid](https://media.giphy.com/media/g04KayLmHrF5hqXzf6/giphy.gif)

![react-fb-image-grid](https://media.giphy.com/media/g04KayLmHrF5hqXzf6/giphy.gif)

## Some Features Video
https://youtu.be/HdEhsDNkw6s

https://youtu.be/HdEhsDNkw6s

## Installation

Run the following

```
npm install react-fb-image-grid
```

or

```
yarn add react-fb-image-grid
```

## Basic Usage

```jsx
import FbImageLibrary from "react-fb-image-grid";

<FbImageLibrary images={["img_01", "img_02", "..."]} />;
```
import FbImageLibrary from 'react-fb-image-grid'

<FbImageLibrary images={[]}/>
or

```jsx
import FbImageLibrary from "react-fb-image-grid";

<FbImageLibrary
images={[
{ url: "img_01", thumbnail: "thumb_01" },
{ url: "......", thumbnail: "........" }
]}
/>;
```

or

## Props
```jsx
import FbImageLibrary from 'react-fb-image-grid'

Props | Type | Default | Example
:--- | :---: | :---: | :---
images | Array (String) | **required** | `{['https://some-url.com/image.jpg', importedImage]}` `//Local image should be imported first`
countFrom | Number | 5 | `{2}` `//Should be from 1 to 5`
hideOverlay | Boolean | false | `{true}`
renderOverlay | Function | `() => 'Preview Image'` | `{() => <button>Show Image</button>}`
overlayBackgroundColor | String | `#222222` | `'green'` or `'#000000'` or `'rgb(255, 26, 26)'`
onClickEach | Function | null | `{({src, index}) => {}}`
<FbImageLibrary images={[
{url: 'video_01', thumbnail: 'thumb_01',isVideo:true},
{url: 'video_02',isVideo:true},
{url: 'Youtube/video_03',iFrame:true},
{url: 'Youtube/video_02', thumbnail: 'thumb_02',iFrame:true},
...
]}/>
```

## Props

| Props | Type | Default | Example |
| :--------------------- | :------------------------------------------------: | :---------------------: | :----------------------------------------------------------------------------------------------------------------------------- |
| images | **Array (String)** <br> OR <br> **Array (Object)** | **required** | `{['imgURL', 'imgURL', '...']}` <br> OR <br> `{[ {url: 'imgURL, thumbnail: 'thumbnailURL'}, {url, '...', thumbnail: '...'} ]}` |
| countFrom | Number | 5 | `{2}` - _Should be between 1 to 5_ |
| hideOverlay | Boolean | false | `{true}` |
| renderOverlay | Function | `() => 'Preview Image'` | `{() => <button>Show Image</button>}` |
| overlayBackgroundColor | String | `#222222` | `'green'` or `'#000000'` or `'rgb(255, 26, 26)'` |
| onClickEach | Function | null | `{({src, index}) => {}}` |
| isVideo | Boolean | `false` | `{true}` |
| iFrame | Boolean | `true` | `{true}` |

## Pull Requests

Feel free to make Pull Requests for your feature/fix.
To run the project, run

```
npm install
```

or

```
yarn
```

then

```
npm start
```


## License

[MIT](./LICENSE)
135 changes: 118 additions & 17 deletions demo/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,123 @@
import React, {Component} from 'react'
import {render} from 'react-dom'
import '../../src/css/style.css';
import FbImageLibrary from '../../src'
import React, { Component } from "react";
import { render } from "react-dom";
import "../../src/css/style.css";
import FbImageLibrary from "../../src";

const images = ['https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg',
'https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg',
'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350',
"https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
"https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg"]
const images = [
"https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350",
,
"https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg",
"https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
"https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg",
"https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350",
"https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
"https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000"
];

const imgs = [
{
url:
"https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg",
thumbnail:
"https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000"
},
{
isVideo: true,
url:
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
props: {}
// thumbnail:
// "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"
},
{
isVideo: true,
url:
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
props: {}
// thumbnail:
// "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
},
{
url: "https://www.youtube.com/embed/5dsGWM5XGdg",
iFrame: true,
props: {}
// thumbnail:
// "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg"
}
];

class Demo extends Component {
render() {
return <div>
<FbImageLibrary images={images}/>
</div>
}
render() {
return (
<div>
{/* images can be 'images' or 'imgs' */}
<FbImageLibrary images={imgs} />
</div>
);
}
}

render(<Demo/>, document.querySelector('#demo'))
render(<Demo />, document.querySelector("#demo"));
Loading