https://github.com/sjafferi/svelte-images

A Svelte component for displaying images
https://github.com/sjafferi/svelte-images

svelte svelte-components svelte-v3 sveltejs

Last synced: 6 days ago
JSON representation

A Svelte component for displaying images

• Host: GitHub
• URL: https://github.com/sjafferi/svelte-images
• Owner: sjafferi
• License: mit
• Created: 2020-01-28T22:47:52.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-05T05:54:51.000Z (about 2 years ago)
• Last Synced: 2024-12-16T06:12:09.326Z (22 days ago)
• Topics: svelte, svelte-components, svelte-v3, sveltejs
• Language: HTML
• Size: 17.6 MB
• Stars: 21
• Watchers: 2
• Forks: 5
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-images

A Svelte component for displaying images

[Demo](https://sjafferi.github.io/svelte-images/)

## Installation

Install svelte-images

   `yarn add svelte-images`

## Examples

### Gallery + Carousel

```html

  import { Images } from "svelte-images";

  const images = [

    {

      src: "/borat.png"

    },

    {

      src: "/borat.png"

    },

    {

      src: "/borat.png"

    },

    {

      src: "/borat.png"

    },

    {

      src: "/borat.png"

    },

    {

      src: "/borat.png"

    }

  ];

  main {

    height: 75vh;

  }

  

```

### Carousel only

```html

  import { Carousel } from "svelte-images";

  const { Modal, open, close } = Carousel;

  export let images = [];

  const popModal = idx =>

    setTimeout(() => {

      open(images, idx);

    }, 0);

  .gallery {

    display: flex;

    flex-flow: row wrap;

  }

  img {

    width: 100%;

    height: auto !important;

    cursor: pointer;

  }

  img:hover {

    opacity: 0.5;

    filter: grayscale(0.5) blur(1px);

  }



  {#each images as image, i}

     popModal(i)} />

  {/each}



```

### Images component properties

| Property | Format                                                    | Default                                           |

| -------- | --------------------------------------------------------- | ------------------------------------------------- |

| images*  | `[{ src: "...", thumbnail: "...", ... attributes }]` | []                                                |  |

| gutter   | number                                                    | 3                                                 |  |

| numCols  | number                                                    | automatically set depending on width of container |

  

## Contributing

Found a bug or have suggestions for improvement? We would love to hear from you!

Please open an issue to submit feedback or problems you come across.