3

我通常在 .html 中构建我的网站页面，然后，当一切正常时，我为 db 和所有服务器端的东西创建 .php 页面。'直到现在我没有任何问题，但是因为当我尝试在我的页面中集成一些 JS 脚本时，每次 .html 示例中的相同脚本在 .php 页面中都可以正常工作或根本不起作用。今天，我正在与集成在我的 gallery.php 文件中的 LightGallery 脚本“战斗”。在发布这个问题之前，我尝试了一切可能的方法，但没有成功；我绝对需要你的帮助！.html 页面中的这段代码引用了 jQuery 库，它工作正常：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="test/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>

<body>
  <!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>

    <script src="test/js/lightgallery.js"></script>

    <!-- lightgallery plugins -->
    <script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
    <script src="test/js/lg-thumbnail.js"></script>
    <script src="test/js/lg-fullscreen.js"></script>
    <script src="test/js/lg-autoplay.js"></script>

<div id="header">
  ....
</div>

<div id="content">
  <div id="selector1">
  <div class="item" data-src="img/art.jpg">
      <figure>
        <img src="img/urban.jpg" />
      </figure>
  </div>
  <div class="item" data-src="img/art.jpg">
      <figure>
        <img src="img/urban.jpg" />
      </figure>
  </div>
  </div>
</div>

<div id="footer">
  .....
</div>

<script type="text/javascript">
    $('#selector1').lightGallery({
        selector: '.item'
    });
</script>

</body>
</html>

由于它有效，我将它集成到这个 .php 文件中：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Marco Brigonzi">
<?php
/* check URL */
$query_url = $_SERVER['QUERY_STRING'];
$pageID = substr($query_url, 6);
?>
<title>Album: &quot;<?php $title = ucfirst($pageID); 
                          echo $title; ?>&quot; | Photo</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="script/lightgallery/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<?php include("php/header-footer.php"); ?>
</head>

<body>
<?php include_once("php/analyticstracking.php"); ?>

 <!-- jQuery version must be >= 1.8.0; -->
    <!-- <script src="jquery.min.js"></script> -->

    <!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>

    <script src="script/lightgallery/js/lightgallery.js"></script>

    <!-- lightgallery plugins -->
    <script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
    <script src="script/lightgallery/js/lg-thumbnail.js"></script>
    <script src="script/lightgallery/js/lg-fullscreen.js"></script>
    <script src="script/lightgallery/js/lg-autoplay.js"></script>
    <script src="script/lightgallery/js/lg-hash.js"></script>
    <script src="script/lightgallery/js/lg-pager.js"></script>
    <script src="script/lightgallery/js/lg-zoom.js"></script>

<?
$current = "photo";
head($current);
?>

<div id="content">
  <div id="selector1">
<?php
/* check URL */
if($pageID == 'urban')
  {$pageCode = '1';}
elseif($pageID == 'art')
  {$pageCode = '2';}
elseif($pageID == 'street')
  {$pageCode = '3';}
elseif($pageID == 'nature')
  {$pageCode = '4';}
else
  {echo 'Error 0';}

/* connessione */
......connection values........
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) 
  {die("Connection failed: " . mysqli_connect_error());}

/* SET utf8 charset for special characters */
if (!mysqli_set_charset($conn, "utf8")) 
  {printf("Error loading character set utf8: %s\n", mysqli_error($conn));
    exit();
  } 

$sql_pic = 'SELECT * FROM photos WHERE album="'.$pageCode.'" ORDER BY rating DESC';
$result_pic = mysqli_query($conn, $sql_pic);
if (mysqli_num_rows($result_pic) > 0) 
  {
   while($row_pic = mysqli_fetch_assoc($result_pic)) 
     {
      echo '<div class="item" data-src="img/photo/'.$pageID.'/'.$row_pic["name"].'.jpg" alt="">
              <figure>
                  <img src="img/photo/'.$pageID.'/thumb/'.$row_pic["thumb"].'.jpg" alt="">
              </figure>
            </div>';
     }
  }
else
  {echo 'Error 1';}

mysqli_close($conn);
?>
  </div>
</div>

<?php foot(); ?>

<script type="text/javascript">
    $('#selector1').lightGallery({
        selector: '.item'
    });
</script>

</body>
</html>

而且，当然，它停止工作。我试图将 JS 脚本的调用放在页面末尾，但没有任何变化。我真的不知道，因为代码完全一样！它仅集成在 .php 动态页面中。

[已解决] 这次的问题是 CSS 调用中的大写字母：服务器主机在 lightgallery.css 中重命名了 lightGallery.css，因此缺少 CSS 文件。感谢大家的帮助！

4

0 回答 0