1

I have used this "Yet Another React Lightbox" on my website, and I am happy with that, but I need a little help. I want to show the slide images a little zoomed by default (transform: scale(5)), can anyone help me with how can I do that?

LightBox Demo - https://yet-another-react-lightbox.com/examples/basic

Full documentation of LightBox zoom plugin - https://yet-another-react-lightbox.com/plugins/zoom

My Code (everything is working fine, just want to show slide images a little zoomed by default)

import React, { useState } from "react";
import { IoMdImages } from "react-icons/io";
import Lightbox from "yet-another-react-lightbox";
import Captions from "yet-another-react-lightbox/plugins/captions";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import Video from "yet-another-react-lightbox/plugins/video";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";

const PortfolioCard = (portfolioImages) => {

const [openLightBox, setopenLightBox] = useState(false);

  return (
<div className="open_gallery_button">
   <IoMdImages
      className="portfolio_gallery_btn"
      type="button"
      onClick={() => setopenLightBox(true)}
   />
   <Lightbox
      open={openLightBox}
      close={() => setopenLightBox(false)}
      plugins={[
      Captions,
      Fullscreen,
      Slideshow,
      Thumbnails,
      Video,
      Zoom,
      ]}

     slides={portfolioImages.galleryImages}
   />
</div>
);
};
Programmer Injamam
  • 39
  • 6

1 Answers1

0
    <Lightbox
      open={open}
      plugins={[Zoom,FullScreen]}
      close={() => setClose(false)}
      slides={[{ src: url }]}
      zoom={{
        scrollToZoom:true,
        maxZoomPixelRatio:5
      }}
    />

Use maxZoomPixelRatio

Akash Sinha
  • 130
  • 2
  • 4