\n","This will add a ","cloudinary"," property to the ","window"," object which will contain\na ","productWidget"," method that you can use to initialize the widget.","🚀 Get Started with This Example","Create an environment variable file ",".env."," and inside add:","VITE_CLOUDINARY_CLOUD_NAME=\"\"\n","Install the project dependencies with:","yarn install\n# or\nnpm install\n","Start the development server with:","yarn dev\n# or\nnpm run dev\n","Visit the project at http://127.0.0.1:5173/!","Footer","\n © 2024 GitHub, Inc.\n ","Footer navigation","Terms","Privacy","Status","Docs","Kontakt","\n Manage cookies\n ","\n Do not share my personal information\n ","\n You can’t perform that action at this time.\n "]}
Skip to content

Latest commit

 

History

History

react-product-gallery

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
public
public
 
 
src
src
 
 
.eslintrc.cjs
.eslintrc.cjs
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
index.html
index.html
 
 
package.json
package.json
 
 
vite.config.js
vite.config.js
 
 

README.md

React Cloudinary Product Gallery Widget

You can use the Product Gallery widget to display an image gallery in your application.

View Demo: [COLBY DEPLOY THIS ON NETLIFY PLS]

🧰 Using ProductGallery in a React project

To use the ProductGallery widget in a React app, first load its script:

<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript">
</script>

This will add a cloudinary property to the window object which will contain a productWidget method that you can use to initialize the widget.

🚀 Get Started with This Example

  • Create an environment variable file .env. and inside add:
VITE_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
  • Install the project dependencies with:
yarn install
# or
npm install
  • Start the development server with:
yarn dev
# or
npm run dev