PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
leon2k
Отправлено: 08 Октября, 2018 - 18:42:11
Post Id


Новичок


Покинул форум
Сообщений всего: 4
Дата рег-ции: Окт. 2018  


Помог: 0 раз(а)




День добрый.
У меня есть задача:
Пользователи кладут каждый час новые картинки в папку в пределах 10 шт.

Нужно картинки которые положили в папку вывести на большую плазму ТВ. Картинки должны меняться анимацией каждые 5 -10 мин.

Загрузили новые картинки в папку, старые удалили, Новые Картинки крутятся анимацией на ТВ.

Я разобрался отдельно как сделать: отдельно анимацию заданных картинкой делать где используется - html и css

разобрался как сделать сканирование папки где находятся фото( с помощью PHP) c выводом на html страничку.
index.php
PHP:
скопировать код в буфер обмена
  1.  
  2. <head>
  3.    <meta charset="utf-8" />
  4.    <link type="text/css" rel="stylesheet" href="css/styles.css" media="all" />
  5.   <title> =) </title>
  6.   </head>
  7.   <body>
  8.  
  9.       <div id="title">
  10.         <p>Сканирование папки с картинками с помощью PHP-функции scandir();</p>
  11.       </div>
  12.  
  13.          <div id="main-container">
  14.              <div id="img">                    
  15.                 <div class="img">        
  16.                            <?PHP $files = require 'php/scanfolder.php';?>              
  17.                 </div>
  18.            
  19.            </div>
  20.  
  21.   </div>
  22.  
  23.  
  24.  </body>
  25. </html>
  26.  

scanfolder.php
PHP:
скопировать код в буфер обмена
  1.  
  2. <?PHP $directory = 'images/';
  3.                                   $scandir = scandir($directory);
  4.  
  5.                                    for ($i=0; $i<count($scandir); $i++)
  6.                        
  7.                                    {
  8.                                       if ($scandir[$i] != '.' && $scandir[$i] != '..')
  9.                          
  10.                                       {
  11.                                         echo '<img src="'. $directory . $scandir[$i] . '" alt="'. $scandir[$i] . '" />';
  12.                                       }
  13.                          
  14.                                    }
  15. ?>
  16.  

а нужно показывать на HTML странице по одной картинке, плавно делая анимацию на следующую.

а т.к. анимацией делается с помощью @keyframes

что бы плавно сменялась анимация картинка на другую кратинку нужно каждой картинке дать класс

что то типа вот этого:

@keyframes div-style1
{
from { opacity: 1; }
16% { opacity: 1; }
25% { opacity: 0; }
91% { opacity: 0; }
to { opacity: 1; }
}

@keyframes div-style2
{
from { opacity: 0; }
16% { opacity: 0; }
25% { opacity: 1; }
41% { opacity: 1; }
50% { opacity: 0; }
to { opacity: 0; }

@keyframes div-style3
{
from { opacity: 0; }
16% { opacity: 0; }
25% { opacity: 1; }
41% { opacity: 1; }
50% { opacity: 0; }
to { opacity: 0; }



что поменял по итогу в scanfolder.php
PHP:
скопировать код в буфер обмена
  1. <?PHP
  2.         $directory = 'images/';
  3.         $scandir = scandir($directory);
  4.  
  5.         for ($i=0; $i<count($scandir); $i++) {
  6.                 if ($scandir[$i] != '.' && $scandir[$i] != '..') {
  7.                         echo '<img class="div-style'.$i+1.'" src="'. $directory . $scandir[$i] . '" alt="'. $scandir[$i] . '" />';
  8.                 }
  9.         }
  10. ?>


index.php
PHP:
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html>
  3. <html lang="ru">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <link rel="stylesheet" href="css/style.css">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.  
  11.         <div class="main">
  12.                 <div class="dashboard">
  13.                         <div class="div-style1"><img src=<?PHP $files = require 'php/scanfolder.php';?>
  14.                         </div>
  15.                         <div class="div-style2"><img src=<?PHP $files = require 'php/scanfolder.php';?>
  16.                         </div>
  17.                         <div class="div-style3"><img src=<?PHP $files = require 'php/scanfolder.php';?>
  18.                         </div>
  19.                 </div>
  20.         </div>
  21.  
  22.  
  23. </body>
  24. </html>


Как я подозреваю скорее всего мой косяк в index.php
не могу не как догнать как передать классы div-style1,div-style2,div-style3 которые создаются в scanfolder.php, как грамотно записать их в Index.php ???
Подскажите пожалуйста. примером кода, ну или ссылку киньте где описывается момент, как грамотно написать с классами которыми ты работал в PHP как записать их со стороны html?
 
 Top
Vladimir Kheifets
Отправлено: 08 Октября, 2018 - 21:12:14
Post Id



Посетитель


Покинул форум
Сообщений всего: 277
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 9 раз(а)




leon2k пишет:
День добрый.
У меня есть задача:
Пользователи кладут каждый час новые картинки в папку в пределах 10 шт.

Нужно картинки которые положили в папку вывести на большую плазму ТВ. Картинки должны меняться анимацией каждые 5 -10 мин.

Загрузили новые картинки в папку, старые удалили, Новые Картинки крутятся анимацией на ТВ.

Я разобрался отдельно как сделать: отдельно анимацию заданных картинкой делать где используется - html и css

разобрался как сделать сканирование папки где находятся фото( с помощью PHP) c выводом на html страничку.
index.php
PHP:
скопировать код в буфер обмена
  1.  
  2. <head>
  3.    <meta charset="utf-8" />
  4.    <link type="text/css" rel="stylesheet" href="css/styles.css" media="all" />
  5.   <title> =) </title>
  6.   </head>
  7.   <body>
  8.  
  9.       <div id="title">
  10.         <p>Сканирование папки с картинками с помощью PHP-функции scandir();</p>
  11.       </div>
  12.  
  13.          <div id="main-container">
  14.              <div id="img">                    
  15.                 <div class="img">        
  16.                            <?PHP $files = require 'php/scanfolder.php';?>              
  17.                 </div>
  18.            
  19.            </div>
  20.  
  21.   </div>
  22.  
  23.  
  24.  </body>
  25. </html>
  26.  

scanfolder.php
PHP:
скопировать код в буфер обмена
  1.  
  2. <?PHP $directory = 'images/';
  3.                                   $scandir = scandir($directory);
  4.  
  5.                                    for ($i=0; $i<count($scandir); $i++)
  6.                        
  7.                                    {
  8.                                       if ($scandir[$i] != '.' && $scandir[$i] != '..')
  9.                          
  10.                                       {
  11.                                         echo '<img src="'. $directory . $scandir[$i] . '" alt="'. $scandir[$i] . '" />';
  12.                                       }
  13.                          
  14.                                    }
  15. ?>
  16.  

а нужно показывать на HTML странице по одной картинке, плавно делая анимацию на следующую.

а т.к. анимацией делается с помощью @keyframes

что бы плавно сменялась анимация картинка на другую кратинку нужно каждой картинке дать класс

что то типа вот этого:

@keyframes div-style1
{
from { opacity: 1; }
16% { opacity: 1; }
25% { opacity: 0; }
91% { opacity: 0; }
to { opacity: 1; }
}

@keyframes div-style2
{
from { opacity: 0; }
16% { opacity: 0; }
25% { opacity: 1; }
41% { opacity: 1; }
50% { opacity: 0; }
to { opacity: 0; }

@keyframes div-style3
{
from { opacity: 0; }
16% { opacity: 0; }
25% { opacity: 1; }
41% { opacity: 1; }
50% { opacity: 0; }
to { opacity: 0; }



что поменял по итогу в scanfolder.php
PHP:
скопировать код в буфер обмена
  1. <?PHP
  2.         $directory = 'images/';
  3.         $scandir = scandir($directory);
  4.  
  5.         for ($i=0; $i<count($scandir); $i++) {
  6.                 if ($scandir[$i] != '.' && $scandir[$i] != '..') {
  7.                         echo '<img class="div-style'.$i+1.'" src="'. $directory . $scandir[$i] . '" alt="'. $scandir[$i] . '" />';
  8.                 }
  9.         }
  10. ?>


index.php
PHP:
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html>
  3. <html lang="ru">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <link rel="stylesheet" href="css/style.css">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.  
  11.         <div class="main">
  12.                 <div class="dashboard">
  13.                         <div class="div-style1"><img src=<?PHP $files = require 'php/scanfolder.php';?>
  14.                         </div>
  15.                         <div class="div-style2"><img src=<?PHP $files = require 'php/scanfolder.php';?>
  16.                         </div>
  17.                         <div class="div-style3"><img src=<?PHP $files = require 'php/scanfolder.php';?>
  18.                         </div>
  19.                 </div>
  20.         </div>
  21.  
  22.  
  23. </body>
  24. </html>


Как я подозреваю скорее всего мой косяк в index.php
не могу не как догнать как передать классы div-style1,div-style2,div-style3 которые создаются в scanfolder.php, как грамотно записать их в Index.php ???
Подскажите пожалуйста. примером кода, ну или ссылку киньте где описывается момент, как грамотно написать с классами которыми ты работал в PHP как записать их со стороны html?

Добрый день!
В index.php нужно убрать:
CODE (html):
скопировать код в буфер обмена
  1. <img src=<?PHP $files = require 'php/scanfolder.php';?></div>

Здесь несколько косяков в PHP и в HTML - тэги <img > должны закрываться.
Оставляем:
CODE (html):
скопировать код в буфер обмена
  1. <div class="div-style1" id='div1' ></div>
  2. ........................................    
  3. ........................................

Добавляем:
CODE (html):
скопировать код в буфер обмена
  1. <iframe src='php/scanfolder.php' id='loader' height="0" width="0" frameborder='0'
  2.        onLoad="IframeToObj(this.id,'div1')" style="visibility:hidden;">
  3. </iframe>


Скрипт php/scanfolder.php загрузит в iframe html-код, а JS IframeToObj(idf,ido) (см.ниже) скопирует содержимое html-кода между тэгами
<body></body> из iframe в контейнер id='div1' и стили заданные в index.php будут прменяться к этому контенту.

CODE (javascript):
скопировать код в буфер обмена
  1.  <script>
  2.     function IframeToObj(idf,ido){
  3.           iframe = document.getElementById(idf);
  4.           iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
  5.           IframeInnerHTML = iframeDocument.body.innerHTML;
  6.           Obj=window.document.getElementById(ido);
  7.           Obj.innerHTML = iframeDocument.body.innerHTML;
  8.     }
  9.  </script>

Удачи!
 
 Top
leon2k
Отправлено: 09 Октября, 2018 - 08:47:00
Post Id


Новичок


Покинул форум
Сообщений всего: 4
Дата рег-ции: Окт. 2018  


Помог: 0 раз(а)




что то не работает..
Подскажите а без script ов нельзя?
я думал грамотно написать
вот эту строчку
<div class="div-style1"><img src=<?php $files = require 'php/scanfolder.php';?>>
аля присвоил класс диву div-style1 а ссылка на картинку из scanfolder.php будет браться.

и зачем в iframe
CODE (html):
скопировать код в буфер обмена
  1. <iframe src="php/scanfolder.php" id="loader" height="0" width="0" frameborder="0" onload="IframeToObj(this.id,'div1')" style="visibility:hidden;">
  2.                         </iframe>


прописывать эти пункты?
height="0" width="0" frameborder="0"

У меня все стили в отдельном файле прописываются style.css там как раз и применяются стили для анимации @keyframes div-style1
Прикреплено изображение (Нажмите для увеличения)
16.JPG

(Отредактировано автором: 09 Октября, 2018 - 08:52:21)

 
 Top
teleoperator27
Отправлено: 09 Октября, 2018 - 09:33:00
Post Id



Частый гость


Покинул форум
Сообщений всего: 246
Дата рег-ции: Янв. 2017  


Помог: 18 раз(а)




CODE (htmlphp):
скопировать код в буфер обмена
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <link rel="stylesheet" href="css/style.css">
  6.                 <title>Document</title>
  7.         </head>
  8.         <body>
  9.                 <div class="main">
  10.                         <div class="dashboard">
  11.                                 <?php $filelist = glob("images/*");?>
  12.                                 <?php foreach ($filelist as $k => $v) :?>
  13.                                 <div class="div-style<?=$k?>"><img src="<?=$v?>" /></div>
  14.                                 <?php endforeach?>
  15.                         </div>
  16.                 </div>
  17.         </body>
  18. </html>
 
My status
 Top
leon2k
Отправлено: 09 Октября, 2018 - 10:35:17
Post Id


Новичок


Покинул форум
Сообщений всего: 4
Дата рег-ции: Окт. 2018  


Помог: 0 раз(а)




teleoperator27 пишет:
CODE (htmlphp):
скопировать код в буфер обмена
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <link rel="stylesheet" href="css/style.css">
  6.                 <title>Document</title>
  7.         </head>
  8.         <body>
  9.                 <div class="main">
  10.                         <div class="dashboard">
  11.                                 <?php $filelist = glob("images/*");?>
  12.                                 <?php foreach ($filelist as $k => $v) :?>
  13.                                 <div class="div-style<?=$k?>"><img src="<?=$v?>" /></div>
  14.                                 <?php endforeach?>
  15.                         </div>
  16.                 </div>
  17.         </body>
  18. </html>





Данный код
[PHP<?php $filelist = glob("images/*");?>
<?php foreach ($filelist as $k => $v) :?>
<div class="div-style<?=$k?>"><img src="<?=$v?>" /></div>
<?php endforeach?>]
[/PHP]
делает тоже самое. что и <?PHP $files = require 'php/scanfolder.php';?>
выводит все картинки из папки..
а нужно что бы он показал одну фотку, а т.к. в style.css прописаны
@keyframes div-style1
{
from { opacity: 1; }
16% { opacity: 1; }
25% { opacity: 0; }
91% { opacity: 0; }
to { opacity: 1; }
}

@keyframes div-style2
{
from { opacity: 0; }
16% { opacity: 0; }
25% { opacity: 1; }
41% { opacity: 1; }
50% { opacity: 0; }
to { opacity: 0; }
}

@keyframes div-style3
{
from { opacity: 0; }
41% { opacity: 0; }
50% { opacity: 1; }
66% { opacity: 1; }
75% { opacity: 0; }
to { opacity: 0; }
}

уже сделал бы анимацию на следующую .
Тоесть скрипт scanfolder.php определил кол-во фоток в папке, после этого присвоил каждой фотке класс div-style1, div-style2, div-style3 и т.д. а уже в style.css эти классы div-style1, div-style2, div-style3 обработал бы в анимацию.
 
 Top
teleoperator27
Отправлено: 09 Октября, 2018 - 10:59:19
Post Id



Частый гость


Покинул форум
Сообщений всего: 246
Дата рег-ции: Янв. 2017  


Помог: 18 раз(а)




leon2k пишет:
выводит все картинки из папки..
конечно все, а как иначе?
 
My status
 Top
leon2k
Отправлено: 09 Октября, 2018 - 11:17:57
Post Id


Новичок


Покинул форум
Сообщений всего: 4
Дата рег-ции: Окт. 2018  


Помог: 0 раз(а)




teleoperator27 пишет:
leon2k пишет:
выводит все картинки из папки..
конечно все, а как иначе?

должно быть вот так:
https://codepen[dot]io/vladimir-ignatov/pen/NLjbdW
я сделал через html и css, но в моем случае, нужно тоже самое, только что бы скнаировало папку с фото и выбрасывала ее на Html страничку.

(Отредактировано автором: 09 Октября, 2018 - 13:13:59)

 
 Top
teleoperator27
Отправлено: 10 Октября, 2018 - 02:35:52
Post Id



Частый гость


Покинул форум
Сообщений всего: 246
Дата рег-ции: Янв. 2017  


Помог: 18 раз(а)




Иии? бери и выводи в цикле картинки

CODE (htmlphp):
скопировать код в буфер обмена
  1. <?php $filelist = glob("images/*");?>
  2.                                 <?php foreach ($filelist as $k => $v) :?>
  3.                                 <img src="<?=$v?>"   title="Image <?=$k?>"  class="img-style next im-<?=$k?>" />
  4.                                 <?php endforeach?>

это и выведет тебе

CODE (htmlphp):
скопировать код в буфер обмена
  1.      <img src="картинка 1" title="Image 1" class="img-style im-1">
  2.         <img src="картинка 2" title="Image 2" class="img-style next im-2">
  3.         <img src="картинка 3" title="Image 3" class="img-style next im-3">
  4.         <img src="картинка 4" title="Image 4" class="img-style next im-4">

(Отредактировано автором: 10 Октября, 2018 - 02:40:12)

 
My status
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« Вопросы новичков »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB