<!DOCTYPE html> | |
<html lang="ru"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Выбор файла</title> | |
<!-- <link rel="stylesheet" href="/style.css"> --> | |
<style> | |
.l-wrap { | |
max-width: 1140px; | |
margin-right: auto; | |
margin-left: auto; | |
} | |
.grid-item { | |
width: calc((100% - 24px * 4) / 4); | |
margin-top: 24px; | |
margin-left: 12px; | |
margin-right: 12px; | |
float: left; | |
} | |
@media (max-width: 600px) { | |
.grid-item { | |
width: 100%; | |
margin-top: 8px; | |
margin-left: 4px; | |
margin-right: 4px; | |
} | |
} | |
.grid-item { | |
justify-content: center; | |
align-items: center; | |
height: 80px; | |
text-align: center; | |
margin-bottom: 8em; | |
margin-top: 3em; | |
} | |
.grid-item .img-table { | |
width: 96%; | |
height:150px; | |
min-height:150px; | |
max-height:150px; | |
background-size: contain !important; | |
background-position: center !important; | |
} | |
.grid-item .row { | |
width: 100%; | |
} | |
</style> | |
<script> | |
// Функция для получения параметров из строки запроса. | |
function getUrlParam(paramName) { | |
var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' ); | |
var match = window.location.search.match( reParam ); | |
return (match && match.length > 1) ? match[1] : null; | |
} | |
// Немного измененая функция из официальной документации, которая передает нужные параметры обратно в CKEditor. | |
// Она принимает КНОПКУ КАК ОБЪЕКТ которую ВЫ выбрали. | |
// Далее мы вынимаем у кнопки атрибут href (а он соотвествует ссылке у картинки), через split и pop получаем название файла (например 1.png) | |
// И прибавляем к нему путь той самой папки c картинкам куда мы изначально складывали их с помощью upload.php. | |
function returnFileUrl(img) { | |
var funcNum = getUrlParam('CKEditorFuncNum'); | |
var href = img.href.split('/').pop(); | |
href = '/img/' + href; | |
window.opener.CKEDITOR.tools.callFunction(funcNum, href); | |
window.close(); | |
} | |
</script> | |
</head> | |
<body> | |
<div class="uk-container"> | |
<h1 style="padding-top: 2em;" class="uk-h2">Выберите изображение</h1> | |
<div class="l-wrap"> | |
<div class="three-col-grid"> | |
<?php | |
$srcdir = '/img'; // Папка c картинкам куда мы изначально складывали их с помощью upload.php. | |
$dir = $_SERVER['DOCUMENT_ROOT'].$srcdir; // Тут мы создали переменную dir в которую поместили полный путь к нашей папке где хранятся картинки. | |
$files = array_diff(scandir($dir), array('..', '.')); // Здесь мы просканировали нужную нам директорию, получили N-ое кол-во файлов, после удалили мусор из массива. | |
// Тут мы пускаем цикл, который будет выполняться пока массив files не опустеет. | |
// А с помощью onclick="returnFileUrl(this); return false;" мы получаем по нажатию на кнопку выбранный объект (кнопку на которую нажали) и передаем в функцию returnFileUrl | |
// А и еще, return false; запрещает переход по кнопке. | |
foreach ($files as &$value) { | |
echo '<div class="grid-item"> | |
<p class="uk-text-emphasis"> | |
<div class="img-table" style="background: url(/img/' . $value . ') no-repeat;"></div> | |
<div> | |
<p class="uk-text-emphasis down"><b>' | |
. $value . | |
'</b></p> | |
<p class="uk-text-emphasis down"> | |
<a onclick="returnFileUrl(this); return false;" href="'. $value . '" class="uk-button uk-button-primary">Выбрать</a><b> | |
</div> | |
</div>'; | |
} | |
?> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment