Nano Hash - криптовалюты, майнинг, программирование

поле материализации не открывает изображение при нажатии

Я создаю страницу, используя angular 8 с materialize, в которой мне нужно будет отобразить несколько изображений, и если пользователь нажмет на одно из них, я хочу, чтобы оно открылось в полноэкранном режиме, у materialize есть класс, где вы можете это сделать, но когда я его использую, изображение не открывается. Я ожидал, что оно откроется, поскольку оно открывается по этой ссылке https://materializecss.com/media.html, но он не показывает никакой реакции на мой щелчок, который я пытался сделать следующим образом:

<img src="assets/img/test.png" class="materialboxed">
that's my html page
<div class="container ">
    <h1>Materialize Image Gallery</h1>
    <div class="row card">
        <div class="col s12 m6 l4">
            <img src="assets/img/test.png" class="materialboxed">
        </div>
        <div class="col s12 m6 l4">
            <img src="assets/img/test1.png" class="materialboxed">
        </div>
        <div class="col s12 m6 l4">
            <img src="assets/img/test2.png" class="materialboxed">
        </div>
    </div>
</div>

а это моя индексная страница

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Test page</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link type="text/css" rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
        media="screen,projection">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <app-root></app-root>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
        type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>

</html>
angular8 html materialize
06.10.2019

Ответы:


1

Как и в ваших фрагментах, вы не инициализировали виджет MaterialBox, как описано в документации.

Внутри вашего индексного файла добавьте скрипт с этим JQuery:

  $(document).ready(function(){
$('.materialboxed').materialbox();
});

Или вы можете добавить ванильный Javascript:

  document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems, options);
});

Окончательный файл индексной страницы с использованием JQuery должен быть таким:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Test page</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link type="text/css" rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
        media="screen,projection">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <app-root></app-root>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
        type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
  //Added Code
  $(document).ready(function(){
    $('.materialboxed').materialbox();
 //End Added Code
 </script>
</body>

</html>

Я надеюсь, что этот ответ поможет кому-то.

08.10.2019
  • О, проблема в том, что я пытался инициализировать виджет не в том месте, спасибо, чувак 09.10.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..