Как активировать галерею от отдельной кнопки, а не кликом на картинку?

Question

Подключил Material Box галерею https://materializecss.com/media.html

Как активировать её от отдельной кнопки, а не кликом на картинку?

$('.materialboxed').materialbox();

.btn {
    position: absolute;
    top: 10%;
    background: #fff;
    left: 10%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<img class="materialboxed" width="650" src="https://materializecss.com/images/sample-1.jpg">
<a href="#" class="btn">увеличить</a>

Answer 1

$('.btn').on('click', () => {
  $('.materialboxed').materialbox('open')
})

Выбираете любой нужный элемент(ы) и вызываете функцию

Либо такой вариант, если хотите конкретную фотку привязывать к конкретной кнопке. Прошу прощения за код, пишу с телефона и думаю можно красивее, но так понятнее

index.html

    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <img class="materialboxed1" width="650" src="https://materializecss.com/images/sample-1.jpg">

<img class="materialboxed2" width="650" src="https://materializecss.com/images/sample-1.jpg">

    <a href="#" class="btn btn1">увеличить</a>
<a href="#" class="btn btn2">увеличить</a>

/////script.js

let elem1 = document.querySelector('.materialboxed1');
let instance1 = M.Materialbox.init(elem1);


let btn1 = document.querySelector('.btn1')

btn1.addEventListener('click', () =>{
  instance1.open()
})


let elem2 = document.querySelector('.materialboxed2');
let instance2 = M.Materialbox.init(elem2);

let btn2 = document.querySelector('.btn2')

btn2.addEventListener('click', () =>{
  instance2.open()
})

БЛОГ НА HUSL

Как активировать галерею от отдельной кнопки, а не кликом на картинку?

Ответы (1 шт):