扩展图像，数据库来源 [英] Expanding an image, database sourced

问题描述

我希望能够插入设施（希望模态框或类似设备）来显示图像的放大视图，放在使用php从数据库源代码的网页中的表格中。



我尝试了什么：



我尝试过使用模态代码，但我不知道如何修改它以便获取图像文件

I would like to be able to insert the facility (hopefully Modal box or similar) to display an enlarged view of an image, placed into a table in a web page sourced from a database using php.

What I have tried:

I have tried using Modal code but I do not know how to modify it so as to source the image file

推荐答案

引用：

显示放大到桌子中的放大的图像视图

display an enlarged view of an image, placed into a table

您可以放大图像，但如果这是一个问题，那么这不会改善任何质量。其次，你使用的数据库是什么？我怀疑HTML5能够自己与数据库进行通信 - 没有JavaScript用于其他热门。



在这种情况下，大多数开发人员会做的是存储两个版本的图像。一个作为图标，或图像的缩放版本。另一个，这是图像的原始版本。您显示图像的缩小版本，例如在所有图像的页面上， / images / ，并根据请求显示完整图像 - 如在新页面上， / images /image-file-1234.png 的。



最后，将数据（或任何其他二进制内容，如文件，文档，报告）存储在数据库中绝不是一种好方法。您应该考虑将二进制内容存储在文件系统中，然后将文件名存储在数据库中以进行查询。这可以提供帮助，因为



*数据库存储很昂贵

*二进制内容没有从数据库所具有的功能中获得整体利益;索引。



因此，一个好方法就是重写几件事。

You can scale the image up, but that will not improve any quality if that is a concern. Secondly, what database are you using? I doubt HTML5 being able to communicate with a database all by itself — without JavaScript for other hot heads.

In such cases, what most developers would do, is to store two versions of the image. One as the icon, or a scaled version of the image. Another one, which is the original version of the image. You show the scaled down version of the image, such as on the page for all images, /images/, and upon request you present the full image — like on a new page, /images/image-file-1234.png.

Lastly it is never a good approach to store the images (or any other binary content, such as files, documents, reports) in the database. You should consider storing the binary content in file system and then just store the file name in database for querying purposes. This can help, because

* Database storage is expensive
* Binary content gets no overall benefit from the features a database has; indexing.

So, a good way to do this would be to rewrite a couple of things.

Hi Azaal

感谢您抽出宝贵时间回复我的请求



我正在使用我的网络托管服务提供商提供的MYSQL工具。图像文件使用PHP从数据库中提取并显示在HTML5表格中。



因为图像是缩略图，我希望能够合并容量让他们有一个扩展的视图。



HTML和Javascript可以使用[模态系统]但我无法解决这个问题。



数据库组件该网站已由第三方安装并且运行良好但我正在尝试做的是弄清楚如何利用PHP代码以允许Modal系统执行



这是Modal代码的JavaScript组件，它支持HTML嵌入图像

Hi Azaal
Thank you for taking the time to respond to my request

I am using the MYSQL facility provided by my web hosting provider. The image files are extracted from the database using PHP and displayed in a HTML5 table.

Because the images are thumbnail in size I would like to be able to incorporate the capacity for them to have an expanded view.

HTML and Javascript can do this using [the Modal system] BUT I cannot work it out of the coding for this to occur.

The database component of the website has been installed by a third party and works perfectly well but what I am trying to do is work out how to utilise the PHP code in order to allow the Modal system to perform

Here is the JavaScript component of the Modal code which work on a HTML imbedded Image

<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 />
//获取< span>关闭模态的元素< br />
var span = document.getElementsByClassName（close）[0];< br />
< br />
//当用户点击< span> （x），关闭模态< br />
span.onclick = function（）{< br />
modal.style.display =none;< br />
}< br />
< / script>< br />
< / pre>

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

And the 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%;
}

这篇关于扩展图像，数据库来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！