styling titles in react-image-gallery

user_13569082 0
Viewed 3264

I am using react-image-gallery to have a slideshow on my webpage. I am fetching the data from a json file that looks like this.

"pastdogs": [
    {
      
      "description": " Buddy, Dog given to the king of England",
      "original": "./puppies/firstday.jpg"
    },

This is working fine, both the image and the description are showing up. The issue is the description is awkwardly on the side of the gallery. on the side

I am wanting to make the description in the middle of the image, and preferably on the top. I can manipulate the entire gallery by using a wrapping a div around the component

<div className="container-fluid slider">
      <ImageGallery
        className=""
        items={pastdogs}
        showFullscreenButton={false}
        autoplay={true}
      ></ImageGallery>
    </div>
    

.slider {
  width: 50% !important;
}

This reduces the size of the entire gallery, which is not ideal. How do I change only the description element? Thank you for your help and expertise.

reactjs sass css javascript
1 Answers

You can adjust description css by adding the flowing

.image-gallery-slide .image-gallery-description {
    background: rgba(0, 0, 0, 0.4);
    bottom: 70px;
    color: #fff;
    left: 45%; // you can modify this value to center the text
    line-height: 1;
    padding: 10px 20px;
    position: absolute;
    white-space: normal;
    justify-content: center;
    align-items: center;
}

or you can use custom renderItem and use your own css with the block

import React, { Component } from 'react';
import ImageGallery from 'react-image-gallery';
import './App.css';
import "react-image-gallery/styles/css/image-gallery.css";

class App extends Component {

  myRenderItem () {
    return <div>
          <img className="image-gallery-image" src="https://picsum.photos/id/1018/1000/600/" title="hello world" />
          <span style={{ left: '45%' }} className="image-gallery-description">hello world</span>
      </div>;
  }
  
  render() {
    const images = [
      {
        original: 'https://picsum.photos/id/1018/1000/600/',
        thumbnail: 'https://picsum.photos/id/1018/250/150/',
        renderItem: this.myRenderItem,
      },
      {
        original: 'https://picsum.photos/id/1015/1000/600/',
        thumbnail: 'https://picsum.photos/id/1015/250/150/',
      },
      {
        original: 'https://picsum.photos/id/1019/1000/600/',
        thumbnail: 'https://picsum.photos/id/1019/250/150/',
      },
    ];

    return (
      <div>
        <ImageGallery items={images} />;
      </div>
    );
  }
}

export default App;
user_112782710
Related