Question

您好我创建了一个php页面，它可以从文件夹中动态读取图像，并将它们放在图库的某个页面中。但我不能使用链接的CSS文件，我必须使用我的所有的CSS，但这不是真正的问题，问题是我不能使用jQuery既不是在单独的script.js文件中也不是从单独的script.js文件。第二个问题是我想使用灯箱查看图像，但这不起作用。这是PHP代码：

$folder = 'images/shirini/';
$filetype = '*.jpg';
$files = glob($folder.$filetype);
$count = count($files);

$sortedArray = array();
for ($i = 0; $i < $count; $i++) {
$sortedArray[date ('YmdHis', filemtime($files[$i]))] = $files[$i];
}
$i =1;
$n = 1;

krsort($sortedArray);
echo '<div class=\"total\">';
foreach ($sortedArray as &$filename) {

echo '<a href="#img'.$n.'"><img src="'.$filename.'" /></a>';
echo '<a href="#" class=\"lightbox\" id=\"#img'.$n.'\"><img src="'.$filename.'"/ </a>';

$i += 1;

$n += 1;

while($i === 7) {
        echo '<br>';
    $i=1;
}
};

echo '</div>';

这是CSS代码：身体 { 保证金：0自动20px; 填充：0; 背景：#acacac; text-align：center; }

img{
position:relative;
width:150px;

right:0px;
top:0px;
border:0.3spx solid red;
/* Apply a CSS3 Transition to width, height, top and left properties */
transition: width 0.3ss ease,height 0.3ss ease,left 0.3ss ease,top 0.3ss ease;
-webkit-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
-o-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
-moz-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
vertical-align: middle;
}

img:hover{
width:300px;
right:0px;
top:0px;
z-index:9999;
}

.frame{
display: table-row;
}

.total{
overflow:visible;
display: block;

}

.total ul{
clear:both;
}

.total li
{
width:102px;
height:82px;
margin:4px;
float: left;
overflow:visible;
display: block;
}

.lightbox {
display: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}

.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}

.lightbox:target {
display: block;
outline: none;
}

任何人都知道如何使用lightbox或jquery或链接CSS的html ??

感谢

Answer 1

如果我正确理解你......

为什么不创建单独的文件并只包含php脚本？所以我可能会在你的情况下做这样的事情（如果你想保持你单独发布的php）

创建
- gallery.php
- style.css
- gallery-images.php

你的gallery-images.php将包含你上面粘贴的php代码。

style.css会有你在

中发布的css

你的gallery.php看起来像是：

<!doctype html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>My gallery</title>
   <link rel="stylesheet" href="/path/to/your/style.css">
  </head>
  <body>

  <?php include('gallery-images.php'); ?>  

  <script src="/path/to/jquery.js">
  <script src="/path/to/lightbox.js">
  </body>
 </html>

这样您就可以在gallery.php

中使用任何想要的css / script

这有帮助吗？

在动态php页面中使用灯箱

1 个答案: