3

私は通常、自分の Web サイトのページを .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