Embed photos as a slideshow with carousel widget

After a pause when I only improved the existing tool, I represent a new component for you that is meant to embed a photos album to a website. It is a carousel widget that is also the basis part of the new component of the gallery, which I will describing in some another post.

Carousel widget demo with my favorite Mr. Monstro.

Why a new slideshow widget for website?

You write me many good things and suggestions for improvement. That’s why I decided to create a completely new type of galley widget. This carousel widget uses part of the completely new gallery component whitch I’m preparing. And because some features are already available, I want to share it with you to also use it.

For whom is a component designed for?

The Carousel component is for everyone who wants to show photos on your site as a graphic add-on or slide show showing your photos on the site.

Carousel widget not contains any additional features such as fullpage or fullscreen mode. Included simply switching forward and back and automatically playing back.

How to correctly insert a carousel widget into website?

There are many ways to do this. I will describe two basic ones here. The first is probably the easiest one for you.

1) Embed carousel slideshow with Google photos album.

You can use the same tool as generating code for embed from google photos album. You can generate the html code using a new feature called “carousel only“. So, there is a certain advantage of combining Google Photos albums with the generated carousel code.

To generate the code you will need a link of Google photos shared album like this: https://photos.app.goo.gl/somehash. Paste the shared link into the following form and press the “Create embed code” button. Next, setup parameters and paste the resulting code into your website.

2) Insert the script with the carousel widget manually

The base is an html code containing information about the carousel widget setting. It is decorated with javascript, which creates the widget in place of the embedded code.

Code example to insert into website:

<script src="/link/to/embed-ui.min.js" async></script>
<div class="pa-carousel-widget"
  style="width: 100%; height: 480px; display: none;"
  data-link="https://photos.app.goo.gl/CSV7NDstShTUwUZq5"
  data-title="Mr. Monstro">
    <img data-src="https://...image1.jpg" />
    <img data-src="https://...image2.jpg" />
    <img data-src="https://...image3.jpg" />
</div>

First of all, you need a decorator. Put it in front of the code or at the end of the page, but also in the header element. Choose the best solution for you. The complete content of the script element is as follows:

<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>

The div container contains several attributes.

• class – Class is the main identification that it is a carousel.
• style – Style is helpful. The widget will be hidden until it is decorated.
  It also allows you to adjust the dimensions.
• data-link – Album link, or website, if available.
• data-title – Caption of the carousel.
• data-delay – Delay between frames in seconds.
• data-autorepeat – Repeat all the time.
• data-background-color – This is a hexadecimal code of color for background color setup. The default is #000000(black).

The img element contains the following:

• src – Empty default attribute if necessery.
• alt – Same as src.
• data-src – Absolute or relative url to real fullsize image.
• data-initial-src – If you have a thumbnail, you can put it in to this.
• data-width – If you need setup diferent width of image, you may set it manualy.
• data-height – This option is a similar as previouse.
• data-stretch – Enable or disable image stretch.
• data-enlarge – Enable or disable image enlarge.

Some settings may not be stable. I will be glad for your comments and ideas.