SHARE
TWEET

Untitled

a guest Jun 16th, 2019 50 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from 'react';
  2.  
  3. function Gallery({ data }) {
  4.   const [showInLightbox, setInLightbox] = useState(0);
  5.   const [openLightbox, setOpenLightbox] = useState(0);
  6.  
  7.   const ImagesData = data;
  8.  
  9.   const numbersImages = ImagesData.length;
  10.   let imageInit = 0;
  11.  
  12.   let prevdata = 0;
  13.   let prev = 0;
  14.   let nextdata = 0;
  15.   let next = 0;
  16.   const addIndice = myindice => {
  17.     console.log(myindice);
  18.     imageInit = myindice;
  19.     prevdata = imageInit - 1;
  20.     prev = prevdata < 0 ? numbersImages - 1 : prevdata;
  21.     nextdata = imageInit + 1;
  22.     next = nextdata >= numbersImages ? 0 : nextdata;
  23.     console.log('numbersImages', numbersImages);
  24.     console.log('imageInit', imageInit);
  25.     console.log('prev', prev);
  26.     console.log('next', next);
  27.   };
  28.  
  29.   const controlsLightboxPrev = () => {
  30.     console.log('test click controls prev');
  31.   };
  32.   const controlsLightboxNext = () => {
  33.     console.log('next viene con', next);
  34.  
  35.     setTimeout(function() {
  36.       next = next + 1 >= numbersImages ? 0 : next;
  37.       console.log('next desde stimeout', next);
  38.     }, 100);
  39.   };
  40.  
  41.   return (
  42.     <div className="gallery">
  43.       {ImagesData.map((img, i) => (
  44.         <figure key={i} onClick={() => (addIndice(i), setInLightbox(i), setOpenLightbox(1))}>
  45.           <img src={img.image} width="392" height="190" alt="" />
  46.           <figcaption>{img.caption}</figcaption>
  47.         </figure>
  48.       ))}
  49.       <div className={`wrap-lightbox ${openLightbox === 1 && 'active'}`}>
  50.         <div className="close-lightbox" onClick={() => setOpenLightbox(0)}>
  51.           <img src="/static/iconos/close-w.svg" width="20" alt="" />
  52.         </div>
  53.         <span className="lightbox-next" onClick={() => (controlsLightboxNext(), setInLightbox(next))}>
  54.           <img src="/static/iconos/arrow-next.svg" width="40" alt="" />
  55.         </span>
  56.         <span className="lightbox-prev" onClick={() => (setInLightbox(prev), controlsLightboxPrev())}>
  57.           <img src="/static/iconos/arrow-prev.svg" width="40" alt="" />
  58.         </span>
  59.  
  60.         <div className="list-lightbox">
  61.           {ImagesData.map((img, i) => (
  62.             <div key={i} className={`item-lightbox ${showInLightbox === i && 'active'}`}>
  63.               <img src={img.image} width="392" height="190" alt="" />
  64.               <figcaption>{img.caption}</figcaption>
  65.             </div>
  66.           ))}
  67.         </div>
  68.       </div>
  69.       <style jsx>
  70.         {`
  71.           .gallery {
  72.             figure {
  73.               cursor: pointer;
  74.               transition: all 0.3s;
  75.               margin-bottom: 20px;
  76.               &:last-child {
  77.                 margin-bottom: 0;
  78.               }
  79.               &:hover {
  80.                 opacity: 0.8;
  81.               }
  82.               @media screen and (max-width: 640px) {
  83.                 width: 100%;
  84.                 img {
  85.                   width: 100%;
  86.                 }
  87.               }
  88.             }
  89.             figcaption {
  90.               font-size: 12px;
  91.               margin-top: 10px;
  92.               color: rgba(54, 54, 54, 0.6);
  93.               @media screen and (max-width: 480px) {
  94.                 display: none;
  95.               }
  96.             }
  97.           }
  98.           .wrap-lightbox {
  99.             width: 100%;
  100.             position: fixed;
  101.             top: 0;
  102.             left: 0;
  103.             background-color: rgba(0, 0, 0, 0.5);
  104.             z-index: 1200;
  105.             height: 0;
  106.             overflow: hidden;
  107.             visibility: hidden;
  108.             opacity: 0;
  109.             transition: opacity 0.3s;
  110.             &.active {
  111.               height: 100vh;
  112.               opacity: 1;
  113.               visibility: visible;
  114.             }
  115.             .close-lightbox {
  116.               width: 40px;
  117.               height: 40px;
  118.               border-radius: 100%;
  119.               background-color: #000;
  120.               position: absolute;
  121.               top: 10px;
  122.               right: 10px;
  123.               font-size: 20px;
  124.               display: flex;
  125.               align-items: center;
  126.               justify-content: center;
  127.               transition: all 0.3s;
  128.               cursor: pointer;
  129.               &:hover {
  130.                 opacity: 0.5;
  131.               }
  132.             }
  133.             .item-lightbox {
  134.               position: absolute;
  135.               top: 0;
  136.               bottom: 0;
  137.               margin: auto 0;
  138.               left: 0;
  139.               height: 85vh;
  140.               width: 100%;
  141.               text-align: center;
  142.               z-index: 1;
  143.               opacity: 0;
  144.               visibility: hidden;
  145.               transition: all 0.5s;
  146.               &.active {
  147.                 opacity: 1;
  148.                 visibility: visible;
  149.               }
  150.  
  151.               img {
  152.                 height: 100%;
  153.                 width: auto;
  154.               }
  155.               figcaption {
  156.                 font-size: 16px;
  157.                 color: #fff;
  158.               }
  159.             }
  160.             .lightbox-next,
  161.             .lightbox-prev {
  162.               position: absolute;
  163.               top: 0;
  164.               bottom: 0;
  165.               margin: auto 0;
  166.               width: 40px;
  167.               height: 40px;
  168.               background-color: #fff;
  169.               border-radius: 100%;
  170.               display: flex;
  171.               align-items: center;
  172.               justify-content: center;
  173.               z-index: 2;
  174.               transition: all 0.3s;
  175.               cursor: pointer;
  176.               &:hover {
  177.                 opacity: 0.5;
  178.               }
  179.             }
  180.             .lightbox-next {
  181.               right: 10px;
  182.             }
  183.             .lightbox-prev {
  184.               left: 10px;
  185.             }
  186.           }
  187.         `}
  188.       </style>
  189.     </div>
  190.   );
  191. }
  192.  
  193. export default Gallery;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top