https://github.com/nextlevelshit/gatsby-plugin-react-image-map
This GatsbyJS plugin is creating a multi-layered react component with changing background images on mouse or touch moves
https://github.com/nextlevelshit/gatsby-plugin-react-image-map
gatsbyjs images mousemove plugin react touchmov
Last synced: 3 months ago
JSON representation
This GatsbyJS plugin is creating a multi-layered react component with changing background images on mouse or touch moves
- Host: GitHub
- URL: https://github.com/nextlevelshit/gatsby-plugin-react-image-map
- Owner: nextlevelshit
- Created: 2019-09-24T14:59:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-10-05T13:17:07.000Z (over 5 years ago)
- Last Synced: 2025-02-14T06:21:50.134Z (3 months ago)
- Topics: gatsbyjs, images, mousemove, plugin, react, touchmov
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
gatsby-plugin-react-image-map
GatsbyJS Plugin · React
This GatsbyJS plugin is creating a multi-layered react component with changing background images on mouse or touch moves.
The images are in full width and cover the whole wrapper element.
It's showen one image at a time.
While moving the mouse in any direction the images are beeing iterated and exchanged.
On touch devices only the x-axis is beeing tracked for iterating the images.
## Dependencies
To use this plugin correctly you should have installed [`gatsby-transformer-sharp`](https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/) and an source processor for your images, which will be in most cases [`gatsby-source-filesystem`](https://www.gatsbyjs.org/packages/gatsby-source-filesystem).
1. Install `gatsby-transformer-sharp` and `gatsby-source-filesystem`
```shell
yarn add gatsby-transformer-sharp gatsby-source-filesystem
# or
npm install --save gatsby-transformer-sharp gatsby-source-filesystem
```
2. Configure `gatsby-config.js`
```javascript
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `image-map`,
path: `${__dirname}/src/images/image-map/`,
},
},
`gatsby-transformer-sharp`,
// ...
]
// ...
}
```
## Install
1. Install `gatsby-plugin-image-map`
```shell
yarn add gatsby-plugin-react-image-map
# or
npm i --save-dev gatsby-plugin-react-image-map
```
2. Configure `gatsby-config.js`
```javascript
module.exports = {
plugins: [
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
`gatsby-plugin-react-image-map`,
// ...
],
// ...
}
```
## Available options
These are the default options and can/should be modified.
`nodes` is the only required property.
All the rest is optional.
```javascript
activeClass: ``, // (optional) class of an active image wrapper
activeStyle: { // (optional) active styles for active image wrapper
opacity: 1,
},
imageStyle: { // (optional) custom styles for image element
maxWidth: `100%`,
maxHeight: `100vh`,
},
itemClass: ``, // (optional) class of an active image wrapper
itemStyle: { // (optional) custom styles for image wrapper
position: `absolute`,
top: 0,
right: 0,
bottom: 0,
left: 0,
display: `block`,
opacity: 0,
width: `100%`,
height: `100%`,
},
nodes: [], // list of your images
threshold: 100 // (optional) the bigger the threshold, the longer
// the mouse movement has to be to change an image
```
## When do I use this plugin?
This plugin is perfect to have an interactive first impression of your website.
The images are in the background so you can easily put content in front of them.
It is a kind of interactice slide show.
## Examples of usage
```javascript
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import ImageMap from "gatsby-plugin-react-image-map" // import the image-map plugin
const ImageMapContainer = () => {
/**
* Query the images you'd like to be visible inside the image map.
* In this case the regular expression is looking for images inside
* the `image-map` folder inside your `src`
*/
const data = useStaticQuery(graphql`
query ImageMapQuery {
allFile(filter: {sourceInstanceName: {eq: "image-map"}}) {
nodes {
childImageSharp {
fluid {
...GatsbyImageSharpFluid_noBase64
}
}
relativePath
}
}
}
`)
return (
)
}
export default ImageMapContainer
```
## Examples
- [Paula Stoll · Documentary Director](https://paulastoll.de)
- [Guenter Krauss](https://gk.dailysh.it)