Question

我尝试了很多选项，但没有任何作用。在my website点击任意帖子打开一个模式框中的iframe（使用Featherlight.js）并使用wordpress single.php

问题是我无法将模态框放到里面的图像中，我只是决定到目前为止html代码的大小。

<div id="post">
<a href="#" data-featherlight="#featherlight-<?php echo get_the_ID(); ?>"> 

        <?php
        if ( has_post_thumbnail() ) {
        the_post_thumbnail('post-thumbnails');
        }
        ?>  

    </a>

<div class="myframe">
<iframe class="lightbox" src="<?php the_permalink(); ?>" width="400" height="600" id="featherlight-<?php echo get_the_ID(); ?>" style="border:none;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

</div>

你认为使用javascript或jquery有可能吗？我只知道html，css和一些php，但如果我必须......

谢谢！

Answer 1

如果我理解正确您正在使用Featherlight作为“灯箱”，并且当该框打开时，您希望将该框的大小调整为与其中的图像大小相同。

基本上你想要做的是：

添加灯箱打开后触发的代码
让代码检查图像的尺寸
将private void CaptureImage() { int width, height; width = webBrowser1.ClientRectangle.Width; height = webBrowser1.ClientRectangle.Height; using (Bitmap image = new Bitmap(width, height)) { using (Graphics graphics = Graphics.FromImage(image)) { Point p, upperLeftSource, upperLeftDestination; p = new Point(0, 0); upperLeftSource = webBrowser1.PointToScreen(p); upperLeftDestination = new Point(0, 0); Size blockRegionSize = webBrowser1.ClientRectangle.Size; graphics.CopyFromScreen(upperLeftSource, upperLeftDestination, blockRegionSize); } //saveout the image var path = System.IO.Path.Combine(System.Environment.CurrentDirectory, "image.png"); image.Save(path, System.Drawing.Imaging.ImageFormat.Png); } }的尺寸更新为图片的尺寸

如果我有这个权利，那么棘手的部分（特别是如果你是网络开发的新手）是你需要了解所有的网页开发都围绕着“文档”（网页），当你使用任何框架时多个“文档”：一个用于<iframe>的父级，另一个用于<iframe>内的页面。

因此，首先你需要编写在灯箱打开时触发的逻辑。您必须阅读Featherlight的文档，看看它是否为您提供了“钩子”。如果不是，您将不得不添加自己的“onClick”逻辑，该逻辑在用户单击以打开灯箱时发生。如果您执行后者操作，则可能需要使用<iframe>等待一两秒钟才能让Featherlight创建window.setTimeout。

一旦该逻辑触发，它将需要等待<iframe>加载。您可以通过将<iframe>事件处理程序附加到iframe（来自onLoad处理程序）来执行此操作。触发该处理程序后，将加载onClick，您可以检查图像的大小。

要实际访问<iframe>文档，请参阅此SO：Accessing the document object of a frame with JavaScript。

一旦你这样做，你就可以访问图像（类似于<iframe>，如果页面上只有一个图像），并检查它是iframeDocument.getElementsByTagAndClassName('img')[0]和height CSS属性。

最后，完成后，您可以更改width的{{1}}和height CSS属性，您应该全部设置。

适合图像的iframe，采用模态

1 个答案: