Как передать отзывчивый размер DIV в PHP? - PullRequest
Новая
       18

Как передать отзывчивый размер DIV в PHP?

0 голосов
/ 25 октября 2019

Я пытался передать определенную высоту и ширину Div в код PHP, проблема в том, что страница должна быть отзывчивой, с изменением высоты и ширины Div соответственно.

Как я могупередать эти значения динамически? 

 <?php    
    /* Configuration Start */

    $thumb_directory = 'img/thumbs';
    $orig_directory = 'img/original';

    $stage_width=600;   // How big is the area the images are scattered on
    $stage_height=400;

    /* Configuration end */

    $allowed_types=array('jpg','jpeg','gif','png');
    $file_parts=array();
    $ext='';
    $title='';
    $i=0;

    /* Opening the thumbnail directory and looping through all the thumbs: */

    $dir_handle = @opendir($thumb_directory) or
 die("There is an error with your image directory!");

    $i=1;
    while ($file = readdir($dir_handle)) 
    {
        /* Skipping the system files: */
        if($file=='.' || $file == '..') continue;

        $file_parts = explode('.',$file);
        $ext = strtolower(array_pop($file_parts));

        /* Using the file name (withouth the extension) as a image title: */
        $title = implode('.',$file_parts);
        $title = htmlspecialchars($title);

        /* If the file extension is allowed: */ 
        if(in_array($ext,$allowed_types))
        {
            /* Generating random values for the position and rotation: */
            $left=rand(0,$stage_width);
            $top=rand(0,400);
            $rot = rand(-40,40);         

            /* Outputting each image: */

            echo '
            <div id="pic-'.($i++).'" class="pic" style="top:'.$top.'px;left:'.$left.'px;background:url('.$thumb_directory.'/'.$file.') no-repeat 50% 50%; -moz-transform:rotate('.$rot.'deg); -webkit-transform:rotate('.$rot.'deg);">
            <a class="fancybox" rel="fncbx" href="'.$orig_directory.'/'.$file.'" target="_blank">'.$title.'</a>
            </div>';
        }
    }

Конкретными переменными являются $ stage_width и $ stage_height, они должны получить размер div, но, как вы можете видеть, сейчас я могу только установить в них статическое значение.

Есть ли в любом случае, чтобы сделать это? Или с JS, PHP или с чем-то еще полностью?

1 Ответ

1 голос
/ 25 октября 2019

Найдите минутку, чтобы узнать о AJAX .

AJAX расшифровывается как асинхронный JavaScript и XML. В двух словах, это использование объекта XMLHttpRequest для связи с серверами. Он может отправлять и получать информацию в различных форматах, включая JSON, XML, HTML и текстовые файлы. Наиболее привлекательной характеристикой AJAX является его «асинхронный» характер, который означает, что он может обмениваться данными с сервером, обмениваться данными и обновлять страницу без обновления страницы.

В этом случае вы должны:

  1. Вычисление фактического размера div на клиенте с использованием javascript
  2. Отправка ajax-запроса на сервер с этими значениями
  3. Создание разметки div с правильными значениями
  4. Замените div на клиенте на уценку, полученную из асинхронного запроса.

Это, однако, немного неуклюже. Лучше всего выполнить все эти преобразования на клиенте, используя JavaScript:

  1. Создать разметку с помощью PHP (как вы делаете), но без верхнего и левого стилей
  2. На стороне клиента, после загрузки страницы (событие «DOMContentLoaded» в JavaScript) вычислите фактические размеры и соответственно измените div. 
window.addEventListenet('DOMContentLoaded', () => {
  // get the div real size with getComputedStyle or something like that
  // replace the div's style with correct calculations
})
...