Используйте лайтбокс на динамической странице php

0

Привет, я создал страницу php, которая динамически читала изображения из папки и помещала их на какую-то страницу для галереи. но я не могу использовать связанный файл css, и я должен использовать все мои css, но это не настоящая проблема, проблема в том, что я не могу использовать jQuery ни в отдельном файле 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: body {margin: 0 auto 20px; padding: 0; заполнение: 0; background: #acacac; фон: #acacac; text-align: center; 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;
}

кто-нибудь знает, как использовать лайтбокс или jquery или ссылку CSS из html??

благодаря

1 ответ

1
Лучший ответ

Если я правильно понимаю вас...

Почему бы вам не создать отдельные файлы и просто включить скрипт php? Поэтому я, вероятно, сделаю что-то подобное в вашем случае (если вы хотите, чтобы php вы разместили отдельно)

Создайте
- gallery.php
- style.css
- gallery-images.php

Ваша галерея-images.php будет иметь код php, который вы вставили выше.

style.css будет иметь css, который вы разместили в

Ваша галерея.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>

Таким образом, вы сможете использовать любые css/скрипты, которые вы хотели в gallery.php

Это помогает?

  • 0
    спасибо большое вот сработало;)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню