OzWaz Ответов: 2

Расширение изображения, источник базы данных

Я хотел бы иметь возможность вставить средство (надеюсь, модальное поле или подобное) для отображения увеличенного вида изображения, помещенного в таблицу на веб-странице, полученной из базы данных с использованием php.

Что я уже пробовал:

Я пробовал использовать модальный код, но не знаю, как его изменить, чтобы получить исходный файл изображения

2 Ответов

Рейтинг:
1

Afzaal Ahmad Zeeshan

Цитата:
отображение увеличенного вида изображения, помещенного в таблицу
Вы можете увеличить масштаб изображения, но это не улучшит качество, если это вызывает беспокойство. Во-вторых, какую базу данных вы используете? Я сомневаюсь, что HTML5 способен общаться с базой данных сам по себе — без JavaScript для других горячих голов.

В таких случаях большинство разработчиков будет хранить две версии образа. Один в виде значка или масштабированной версии изображения. Еще один, который является оригинальной версией изображения. Вы показываете уменьшенную версию изображения, например, на странице для всех изображений, /изображения/, и по запросу вы представляете полное изображение — как на новой странице, /изображения/image-file-1234.png.

Наконец, это никогда не является хорошим подходом для хранения изображений (или любого другого двоичного содержимого, такого как файлы, документы, отчеты) в базе данных. Вы должны рассмотреть возможность хранения двоичного содержимого в файловой системе, а затем просто сохранить имя файла в базе данных для целей запроса. Это может помочь, потому что

* Хранение базы данных стоит дорого
* Двоичный контент не получает никакой общей выгоды от функций, которыми обладает база данных; индексирование.

Итак, хороший способ сделать это-переписать пару вещей.

Рейтинг:
0

OzWaz

Привет Azaal
Спасибо, что нашли время ответить на мою просьбу

Я использую средство MYSQL, предоставленное моим провайдером веб-хостинга. Файлы изображений извлекаются из базы данных с помощью PHP и отображаются в таблице HTML5.

Поскольку изображения имеют размер миниатюр, я хотел бы иметь возможность включить в них возможность расширенного просмотра.

HTML и Javascript могут сделать это с помощью [модальная система] Но я не могу вычленить это из кода, чтобы это произошло.

Компонент базы данных веб-сайта был установлен третьей стороной и работает отлично, но то, что я пытаюсь сделать, это решить, как использовать PHP-код, чтобы позволить модальной системе работать

Вот компонент JavaScript модального кода, который работает с HTML-вложенным изображением 

<pre><script><br />
// Get the modal<br />
var modal = document.getElementById('myModal');<br />
<br />
// Get the image and insert it inside the modal - use its "alt" text as a caption<br />
var img = document.getElementById('$image');<br />
var modalImg = document.getElementById("img01");<br />
var captionText = document.getElementById("caption");<br />
img.onclick = function(){<br />
    modal.style.display = "block";<br />
    modalImg.src = this.src;<br />
    captionText.innerHTML = this.alt;<br />
}<br />
<br />
// Get the <span> element that closes the modal<br />
var span = document.getElementsByClassName("close")[0];<br />
<br />
// When the user clicks on <span> (x), close the modal<br />
span.onclick = function() { <br />
    modal.style.display = "none";<br />
}<br />
</script><br />
</pre>


А еще CSS 

img {
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 10%;
    top: 5%;
    width: 50%; /* Full width */
    height: 70%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 90%;
}

Richard Deeming

Если вы хотите ответить на решение, нажмите кнопку "есть вопрос или комментарий?" кнопка под этим решением.

Если вы хотите обновить свой вопрос с отсутствующим кодом, Нажмите зеленую ссылку "улучшить вопрос" и отредактируйте свой вопрос.

НЕ публикуйте комментарии или обновления как новое "решение".

OzWaz

Спасибо за совет. Я искал кнопку "ответить" и не пришел к выводу, что "есть вопрос или комментарий" - это одобрительный путь, но теперь я знаю