Question

我的网站有两个div列：垂直导航菜单和主要内容。我使用php将我网站的不同页面导航到主div（similar to this php example）...（例如，index.php？pg = about_us - ＆gt;从/page/about.html获取内容）。但是其中一个页面我想在主div上显示这个库（http://sye.dk/sfpg/）。

如何在主div中正确显示我的图库（安装在/pages/gallery/index.php下）（例如宽度约700px）？如果导航菜单指向外部网站，我也有同样的问题。（让我们说google）使用div时，大小和字符集无法正确显示。谢谢。

<?php
  // ...blah blah blah
  $pgname = isset($_GET['pg']) ? trim(strip_tags($_GET['pg'])) : 'index';
  //....
?>

// starts html, header and body
<div class="left_col">  
  <nav id="navigation">
    <ul>
      <li><a href="index.php" title="Home">Home</a></li>
      <li><a href="index.php?pg=news" title="News">News</a></li>
      <li><a href="index.php?pg=gallery" title="Gallery">Gallery</a></li>
      <li><a href="index.php?pg=donate" title="Donate">Donate</a></li>
      <li><a href="index.php?pg=about_us" title="About Us">About Us</a></li>
    </ul>
  </nav>
</div>

<section class="main_col clearfix">         
  <?php                                     
    if ($pgname != 'gallery'){      
        echo file_get_contents('pages/'. $pgname. '.html');     
    } else {
        echo file_get_contents('http://google.com/'); // this doesn't work, and neither work with '/pages/gallery/index.php'
    }
  ?>                    
</section>

Answer 1

简化，以上内容成为：

gallery.php：

<?php
    $name = 'gallery'; // Fixed for this example.
    $html_gallery = 'pages/'. $name . '.html';
?>
<html>
    <section>
        <?php include $html_gallery ?>
    </section>
</html>

页/ gallery.html：

<img src="/images/foo.jpg">
<img src="/images/bar.jpg">
<img src="/images/baz.jpg">

gallery.php将呈现如下：

<html>
    <section>
        <img src="/images/foo.jpg">
        <img src="/images/bar.jpg">
        <img src="/images/baz.jpg">
    </section>
</html>

正如您所看到的，由您决定输出的样式。

Answer 2

我非常喜欢你的想法...但我认为你可以更轻松地使用JavaScript和AJAX。此外，这种方法将阻止页面重新加载！

编辑 - 因此，如果您说要同时使用HTML和PHP文件，则事件中的ext参数（扩展名）将起作用。 - 编辑

我的想法是在每个onclick调用JavaScript函数时发出li个事件，比方说onclick="getContent(page, ext)"。所以当然你需要将page替换为你喜欢的任何字符串，让我们说gallery;以及ext作为字符串所需的任何扩展名，我们说php。

示例结果：

<li onclick="getContent('news', 'html')" title="News">News</li>
<li onclick="getContent('gallery', 'php')" title="Gallery">Gallery</li>

现在，让我们构建JavaScript-AJAX。我们首先需要做的是创建函数，然后将<body>标记放在<script>标记内。然后记得在主列中添加id，在以下示例中，它将是content。

<script type="text/javascript">
function getContent(pageName, ext){
    var url = "pages/"+pageName+"."+ext, // gallery.php - news.html
        xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("content").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}
</script>

现在，此功能会创建请求并从您的网址获取数据，然后在您的section中将全部 HTML放入其中。当然，请确保HTML文件仅包含section中所需的内容。

HTML中的主要列应如下所示：

<section class="main_col clearfix" id="content"></section>

- 编辑 -

关于预制的单个文件PHP库和调整大小的问题...我看到了演示，我想我知道它是如何工作的...我的建议是确保你设置宽度为main_col部分因为演示提供的内容似乎有很多div个，其中thumbbox类恰好由CSS display:inline-block排列，因此它应该可以正常工作。< / p>

但我看到的最大问题是，一旦你在页面上加载内容，除非你include();（PHP）文件或至少你的单页PHP库的源代码，否则它将无法工作，因为你只会加载HTML，我也会看到它像我的想法一样使用JavaScript onclick事件。

我能说的是，为了帮助你完全解决这个问题，我应该能够看到你是如何实现这个库以及其他许多东西的。我认为你可以解决这个问题，如果你像我说的那样包含文件（这样PHP代码加载并希望打印出必要的JavaScript）。

此外，可以使用PHP utf8_encode();或utf8_decode();来解决字符集问题。使用第一个编码从ISO-8859-1到UTF8编码，第二个编码反过来。

如何在div中显示php图库？

2 个答案: