I'm using light gallery for the image viewer. The problem here is when i have multiple images all those are stacked in rows with 2 images in a row and i have 10 rows for 20 images. So i'm trying to integrate a custom carousel in the light gallery with which i'll have one row of images and a slider.
Both work individually well but couldn't integrate. Also wanted to know if the light gallery has an slider inbuilt.
//Light gallery code:
<LightGallery speed={100} download={true} plugins={[lgThumbnail]} mode="lg-fade" >
{
abc.xyz.attachments.map((item: any) => {
let fileName = item.split('/').pop();
return (
<a
data-lg-size="1400-933"
className="gallery-item"
data-src={item}
data-sub-html={"<h4>" + fileName + "</h4>"}
>
<img style={{ margin: '10px' }}
className="img-responsive"
src={item} width={240} height={160}
/>
</a>
)
})
}
</LightGallery>
//Carousel Code:
<Carousel items={abc.xyz.attachments} />
Any help?
Related
have problem with avatar, when I change size (28, 18, 16) - everything is fine.
But when I change size to 24, 22, 20 and other - image is hidden.
Here is my screenshots and code:
Img Component:
import Image from "next/image";
function Img(props) {
return (
<>
<div className={`relative flex h-[${props.size}px] w-[${props.size}px]`}>
<Image
src={
"https://images.unsplash.com/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2095&q=80"
}
alt="image"
fill
style={{
objectFit: "cover",
borderRadius: "999px",
}}
/>
</div>
</>
);
}
export { Img };
import { Img } from "../../elements/common/Img";
export default function AvatarPage() {
return (
<>
<div className="flex p-24">
<Img size={14} />
</div>
</>
);
}
Example 1
Example 2
What I do wrong?
Example 3 - if I change size to 38px the image will appear
That is simply not how Tailwind works.
Tailwind just-in-time basically scrapes all of your files (that matches paths in your content from tailwind.config.js) for existing classes and add them to the final distributed CSS. It is totally impossible to create Tailwind dynamic classes via props. You should use style= to add Height.
As a little tip, in the case the possible classes to be generated would be predictable (not [] values, but Tailwind classes), you can make usage of safelist which you can find the documentation here.
I am confused in setting custom preview as like
image set in grid
I want to do this in react-dropzone-uploader custom preview, where I can upload multiple files.
Current scenario: my normal uploaded images
Code snippet:
const Preview = ({ meta }: IPreviewProps) => {
const { name, percent, status, previewUrl } = meta ;
return (
<Grid item xs={6}>
<div className="preview-box">
<img src={previewUrl} /> <span className="name">{name}</span> - <span className="status">{status}</span>{status !== "done" && <span className="percent"> ({Math.round(percent)}%)</span>}
</div>
</Grid>
)
}
<Dropzone
getUploadParams={getUploadParams}
onSubmit={handleSubmit}
PreviewComponent={Preview}
inputContent="Drop Files"
/>
I am using MUI V4
We don't have any index for images, how can I set images in grid view of 2-2 images using material UI?
You need to wrap the Grid items inside the Grid container.
Please have a look at the guide. https://mui.com/components/grid/
// Parent PreviewContainer.js
...
<Grid container spacing={2}>
{
images.map((image, i) => (
<PreviewItem key={i} meta={meta} />
))
}
</Grid>
...
// Child PreviewItem.js
...
<Grid item xs={4}>
// You can update the item size as you expect, but it seems like it should be 4 regarding the image attached
// Your preview component
</Grid>
...
My client requested an image gallery feature. Such that I will have an array of images and on clicking each image, I will get like a modal that shows all the images available one by one. I want to achieve this with the Ionic Swiper Component. The example below is for Ionic-Angular, I need Ionic-React.
https://www.youtube.com/watch?v=BGoL0uWRTrY
Is there a way to open the image as a gallery and have zoom, prev and next swipe functionality?
<div className="mt-2">
<IonSlides ref={slideRef} options={slideOpts}>
{bridImages.map((image, idx) => (
<IonSlide key={idx} className="img-container">
<img
src={image.url}
alt={image.alt}
/>
</IonSlide>
))}
</IonSlides>
</div>
Or if there's any other library that is mobile friendly and can also work with Ionic-React, please let me know.
<IonSlides
options={slideOpts}
ref={mySlides}
onIonSlideDidChange={handleSlideChange}
>
list with the event handler and get the swiper object which holds the activeIndex
const handleSlideChange = async () => {
const swiper = await mySlides.current.getSwiper();
console.log("Slide Index", swiper.activeIndex);
// setDisablePrevBtn(swiper.isBeginning);
// setDisableNextBtn(swiper.isEnd);
};
See working project - https://codesandbox.io/s/ionic-react-slides-jq57g
See video describing code and more - https://youtu.be/mCkrZYIbH10
I have an image slider built using react image gallery and populated with images from backend for an e-commerce project. When there is a product with video, show video image and when clicked on the image play video inside the carousel.
I had tried to implement react image gallery demo code given but unable to get a successful result.
<div className="leftSlider">
<ImageGallery ref={el => this.imagegallery = el}
thumbnailPosition={window.matchMedia('(min-width: 600px)').matches ? 'left' : 'bottom'}
showFullscreenButton={false}
showPlayButton={false}
showNav={false}
renderItem={this.imageHover}
showThumbnails={this.showThumbnails(Object.keys(this.state.images) ? this.state.images[selectedVariant] : [])}
items={Object.keys(this.state.images) ? this.state.images[selectedVariant] : []}
onSlide={(slide) => this.onslide(slide)}/></div>
Expected result is exactly the same like shown in the demo of react-image-gallery
https://www.npmjs.com/package/react-image-gallery
There is an example created by package author where he uses custom itemRender for video media.
He is rendering video on description click, but you can of course change it to immediately render video in the slider.
Whole application can be seen:
https://github.com/xiaolin/react-image-gallery/blob/master/example/app.js
// items
{
thumbnail: `${PREFIX_URL}4v.jpg`,
original: `${PREFIX_URL}4v.jpg`,
embedUrl: 'https://www.youtube.com/embed/4pSzhZ76GdM?autoplay=1&showinfo=0',
description: 'Render custom slides within the gallery',
renderItem: this._renderVideo.bind(this)
},
_renderVideo(item) {
return (
<div>
{
this.state.showVideo[item.embedUrl] ?
<div className='video-wrapper'>
<a
className='close-video'
onClick={this._toggleShowVideo.bind(this, item.embedUrl)}
>
</a>
<iframe
width='560'
height='315'
src={item.embedUrl}
frameBorder='0'
allowFullScreen
>
</iframe>
</div>
:
<a onClick={this._toggleShowVideo.bind(this, item.embedUrl)}>
<div className='play-button'></div>
<img className='image-gallery-image' src={item.original} />
{
item.description &&
<span
className='image-gallery-description'
style={{right: '0', left: 'initial'}}
>
{item.description}
</span>
}
</a>
}
</div>
);
}
I am using react-motion to loop through a bunch of images. I'm trying to make the background change programmatically after a certain amount of time.
The component render should be something like this. Motion and spring are from 'react-motion' package. Checkout the code for the photo demo for more details.
<Motion style={{height: spring(currHeight), width: spring(currWidth)}}>
{container =>
<div className="demo4-inner" style={container}>
{configs.map((style, i) =>
<Motion key={i} style={style}>
{style =>
<img className="demo4-photo" src={`./${i}.jpg`} style={style} />
}
</Motion>
)}
</div>
}
</Motion>