react-trilogo-images
Version:
A simple, responsive lightbox component for displaying an array of images with React.js with extended features
13 lines • 10.3 kB
HTML
<head> <meta charset=utf-8> <title>React-Images-Extended</title> <meta name=viewport content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width"> <meta name=keywords content="react,reactjs,react component,lightbox,react lightbox,react images,image,images,ui,javascript,react-images-extended"> <meta name=description content="A simple, responsive Lightbox React JS component for displaying an array of images with zooming and rotating."> <meta property=og:locale content=en-us> <meta property=og:title content=React-Images-Extended> <meta property=og:description content="A simple, responsive Lightbox React JS component for displaying an array of images with zooming and rotating."> <meta property=og:url content=https://react-images-extended.surge.sh> <meta property=og:site_name content=React-Images-Extended> <meta property=og:type content=article> <link rel=stylesheet href=example.css> <link rel=icon type=image/x-icon href=favicon.ico> </head> <body> <div class=page-wrapper> <div class=container> <nav class=left-col> <ul class=page-nav> <li class=page-nav__item> <a class=page-nav__link href=#examples>Examples</a> </li> <li class=page-nav__item> <a class=page-nav__link href=#getting-started>Getting started</a> </li> <li class=page-nav__item> <a class=page-nav__link href=#options>Options</a> </li> <li class=page-nav__item> <a class=page-nav__link href=#license>License</a> </li> <li class=page-nav__item> <a class=page-nav__link href=#help>Help</a> </li> </ul> </nav> <div class=right-col> <div class=page-content> <header class=page-header> <h1 class=page-header__title>React Images</h1> <p class=page-header__subtitle>A simple, responsive Lightbox component for <a href=http://facebook.github.io/react/ target=_blank>ReactJS</a> to display an array of images.</p> <p>This is a fork of <a href=https://github.com/jossmac/react-images>jossmac/react-images</a> extending it with zooming, rotating and saving features</p> </header> <div class=page-subheader> <a href=http://github.com/simokhalil/react-images-extended class=page-subheader__link target=_blank>Code and Docs on GitHub</a> <span class=page-subheader__button> <a id=github-stars-button class=github-button data-style="" href=https://github.com/simokhalil/react-images-extended data-count-href=/simokhalil/react-images-extended/stargazers data-count-api=/repos/simokhalil/react-images-extended#stargazers_count data-count-aria-label="# stargazers on GitHub" aria-label="Star simokhalil/react-images-extended on GitHub">Star</a> </span> </div> <div class=page-body> <section id=examples class=section-examples> <h2>Examples</h2> <div id=example></div> </section> <section id=getting-started class=section-getting-started> <h2>Getting Started</h2> <p>1. Install using yarn:</p> <pre>yarn add react-images-extended</pre> <p>… or npm:</p> <pre>npm install react-images-extended --save</pre> <p>2. Example usage with JSX:</p> <pre><code><Lightbox
images={[
{ src: '../images/photo-1.jpg' },
{ src: '../images/photo-2.jpg' }
]}
isOpen={this.state.lightboxIsOpen}
onClickPrev={this.gotoPrevLightboxImage}
onClickNext={this.gotoNextLightboxImage}
onClose={this.closeLightbox}
rotatable={true}
zoomable={true}
onSave={(currentImageIndex, params) => console.log('currentImageIndex, currentImageSrc, params : ', currentImageIndex, this.props.images[currentImageIndex].src, params)}
/></code></pre> </section> <section id=options class=section-options> <h2>Options</h2> <div class=options-table-container> <table class=options-table> <thead> <tr> <th align=left>Property</th> <th align=left>Type</th> <th align=left>Default</th> <th align=left>Description</th> </tr> </thead> <tbody> <tr> <td align=left>backdropClosesModal</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Allow users to exit the lightbox by clicking the backdrop</td> </tr> <tr> <td align=left>currentImage</td> <td align=left>number</td> <td align=left>0</td> <td align=left>The index of the image to display initially</td> </tr> <tr> <td align=left>customControls</td> <td align=left>array</td> <td align=left>undefined</td> <td align=left>An array of elements to display as custom controls on the top of lightbox</td> </tr> <tr> <td align=left>enableKeyboardInput</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Supports keyboard input - <code>esc</code>, <code>arrow left</code>, and <code>arrow right</code></td> </tr> <tr> <td align=left><a href=#images>images</a></td> <td align=left>array</td> <td align=left>undefined</td> <td align=left>Required. An array of objects containing valid src and srcset values of img element</td> </tr> <tr> <td align=left>imageCountSeparator</td> <td align=left>string</td> <td align=left>' of '</td> <td align=left>Custom separator for the image count</td> </tr> <tr> <td align=left>isOpen</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Whether or not the lightbox is displayed</td> </tr> <tr> <td align=left>onClickPrev</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Fired on request of the previous image</td> </tr> <tr> <td align=left>onClickNext</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Fired on request of the next image</td> </tr> <tr> <td align=left>onClickImage</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Handle click event on the current image</td> </tr> <tr> <td align=left>onClickThumbnail</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Handle click on thumbnail</td> </tr> <tr> <td align=left>onClose</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Required. Handle closing of the lightbox</td> </tr> <tr> <td align=left>onSave</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Show save button and handle click / params : currentImageIndex, {rotation, zoom}</td> </tr> <tr> <td align=left>preloadNextImage</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Based on the direction the user is navigating, preload the next available image.</td> </tr> <tr> <td align=left>preventScroll</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Determines whether scrolling is prevented</td> </tr> <tr> <td align=left>rotatable</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Show rotate buttons</td> </tr> <tr> <td align=left>showCloseButton</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Optionally display a close "X" button in top right corner</td> </tr> <tr> <td align=left>showImageCount</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Optionally display image index, e.g., "3 of 20"</td> </tr> <tr> <td align=left>showThumbnails</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Optionally display thumbnails beneath the Lightbox</td> </tr> <tr> <td align=left>theme</td> <td align=left>object</td> <td align=left>undefined</td> <td align=left>Pass through styles to theme each component; <code>arrow</code>, <code>container</code>, etc.</td> </tr> <tr> <td align=left>width</td> <td align=left>number</td> <td align=left>1024</td> <td align=left>Maximum width of the carousel; defaults to 1024px</td> </tr> <tr> <td align=left>zoomable</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Show zoom buttons</td> </tr> </tbody> </table> </div> <h2>Images</h2> <div class=options-table-container id=images> <table class=options-table> <thead> <tr> <th align=left>Property</th> <th align=left>Type</th> <th align=left>Default</th> <th align=left>Description</th> </tr> </thead> <tbody> <tr> <td align=left>src</td> <td align=left>string</td> <td align=left>undefined</td> <td align=left>Required. The primary image path</td> </tr> <tr> <td align=left>srcset</td> <td align=left>array</td> <td align=left>undefined</td> <td align=left>List of alternative image sizes</td> </tr> <tr> <td align=left>caption</td> <td align=left>string</td> <td align=left>undefined</td> <td align=left>Displayed benath the current image. Great for description or attribution</td> </tr> <tr> <td align=left>thumbnail</td> <td align=left>string</td> <td align=left>undefined</td> <td align=left>Thumbnail to display if <code>showThumbnails</code> is set to <code>true</code></td> </tr> <tr> <td align=left>initialZoom</td> <td align=left>number</td> <td align=left>1</td> <td align=left>Initial zoom level for showing the image</td> </tr> <tr> <td align=left>initialRotation</td> <td align=left>number</td> <td align=left>0</td> <td align=left>Initial rotation angle for showing the image</td> </tr> </tbody> </table> </div> </section> <section id=license class=section-license> <h2>License</h2> <p>React Images is free to use for personal and commercial projects under <a target=_blank href=https://github.com/jossmac/react-images/blob/master/LICENSE>the MIT license</a>.</p> <p>Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.</p> </section> <section id=help class=section-help> <h2>Help</h2> <h3>Have a question?</h3> <p>Follow the <a target=_blank href=https://github.com/simokhalil/react-images-extended#quick-start>quick start guide</a> on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.</p> <h3>Found a bug?</h3> <p>If you find a bug, please read the <a target=_blank href=https://github.com/jossmac/react-images/blob/master/CONTRIBUTING.md>Contribution Guildelines</a> before you <a target=_blank href=https://github.com/simokhalil/react-images-extended/issues>report the issue</a>.</p> </section> </div> </div> </div> <footer class=page-footer> <span class=page-footer__copyright--small>Copyright </span> <span class=page-footer__copyright--large>© </span> <a target=_blank href=https://twitter.com/jossmackison target=_blank>Joss Mackison</a> 2016 </footer> </div> </div> <script>document.getElementById("github-stars-button").dataset.style=window.innerWidth>480?"mega":null</script> <script src=common.js></script> <script src=app.js></script> <script async defer=defer id=github-bjs src=https://buttons.github.io/buttons.js></script> </body>