https://github.com/funkymed/fullscreen

https://github.com/funkymed/fullscreen

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/funkymed/fullscreen
• Owner: funkymed
• Created: 2014-01-24T14:02:35.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T03:10:17.000Z (about 2 years ago)
• Last Synced: 2024-10-30T02:44:50.562Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 3.96 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fullscreen

Author : Cyril Pereira

Put a HTML node in fullscreen fitted homothetically inside the browser

GitHub : https://github.com/funkymed/fullscreen

# Demo

Image : http://medcg.free.fr/tmp/fullscreen/index.html

# Install

```bash

yarn add funkymed-fullscreen --save

```

## Build

```bash

yarn build

```

## Test

```bash

yarn start

```

# Install in React

```javascript

import $ from "jquery";

import '../dist/Fullscreen'

```

```javascript

componentDidMount()

{

    $('.imgresized').Fullscreen({fade:3000});

}

```

```javascript

render()

{

    return (

        


            

        

    );

}

```


# How to use ?

Just do this

```javascript

$('img').Fullscreen();

```

## options

```javascript

$('img').Fullscreen({transition:'ease-in-out',speed:0});

```

transition : ease-in, ease-out, ease-in-out

speed : time in second

### Fade

```javascript

$('img').Fullscreen({fade:3000});

```

fade : time in millisecond for the fade after load img

### Width and height

if you need use something else than image, you will need to set the size

just add width and height to the object option

```javascript

$('img').Fullscreen({width:1280,height:720});

```