Carousel Image Popup

Description

• click list carousel image (if item has no url) will open image in lightbox
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use Carousel layout

#1.2. Hover on top right of section > Click EDIT SECTION

#1.3. at Format > Anchor Link > enter word: list-carousel-clickable

#1.4. Hover on Page where you use Carousel > Click Gear icon

#1.5. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 08.26c03v11 Carousel Image Popup -->
<script>
window.ListCarouselClickableConfig = {
  itemLink: false,
  imageLink: true,
  titleLink: false,
  descriptionLink: false,
  hideButton: false,
  hideEmptyButton: true,
  lightboxForNoUrl: true,
  lightboxScope: 'noUrlOnly'
};
</script>
<script src="https://code.beaverhero.com/listcarousel/0826c03v11carouselimgpopup.js"></script>

#1.6. Code will do something

• With item has button url >> will open page
• With item has no button url >> will open image in lightbox popup + code will hide button

#2. Customize

#2.1. If you want to make whole item clickable, change this line

itemLink: false,

to

itemLink: true,

#2.2. If make title clickable, change this line

titleLink: false,

to

titleLink: true,

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Carousel) > Add a Block > Choose Markdown

Add this code into Markdown

<script>
window.ListCarouselClickableConfig = {
  itemLink: false,
  imageLink: true,
  titleLink: false,
  descriptionLink: false,
  hideButton: false,
  hideEmptyButton: true,
  lightboxForNoUrl: true,
  lightboxScope: 'noUrlOnly'
};
</script>
<script src="https://code.beaverhero.com/listcarousel/0826c03v11carouselimgpopup.js"></script>