imagePicker
Overview
- imagePicker($directory,$selection,$name);
- Produce a graphic "select", named $name, - highlighting $selection
Links and scripts
|
links and scripts
|
|
|
printf('<link rel=\'stylesheet\' href=\'%s://%s/codelib/imagePicker/scrollToLine.js\'/>',
$_SERVER['REQUEST_SCHEME'],$_SERVER['HTTP_HOST']);"/>
Includes
include_once $_SERVER['DOCUMENT_ROOT'].'/codelib/imagePicker/imagePicker.php';
Usage
<form action="index.php" method="GET">
<?php echo imagePicker($directory,$_SESSION['currentSelection'],'image'); ?>
<br />
<div class="jmp-center" style="width:15em;">
<button type="submit" name="action" value="home" class="jmp-flat-button jmp-theme-light">
<span class="material-symbols-outlined jmp-material">done</span> Submit
</button>
<button type="submit" name="action" value="cancel" class="jmp-flat-button jmp-theme-light">
<span class="material-symbols-outlined jmp-material">cancel</span> Cancel
</button>
</div>
</form>
Files
/codelib/imagePicker/imagePicker.php
<?php
function imagePicker($directory, $cs = null, $name='image', $types = null)
{
$x = "";
$imgTypes = $types === null ? array('ico','png','jpg') : $types;
$currentSelection = $cs === null ? '' : $cs;
$files = array_diff(scandir($directory), array('..', '.'));
$x .= sprintf('<div style="width:15em;height:15em;overflow:auto;border:2px solid var(--theme-d2-background);">');
foreach($files as $file) {
$ft = substr($file, strpos($file, '.') + 1);
if(in_array($ft, $imgTypes)) {
$bg = $file == $currentSelection ? "lightgray" : "inherit";
$ck = $file == $currentSelection ? "id='target-image' checked='checked'" : "";
$x .= sprintf('<div style="width:100%%;padding:2px;background-color:%s;border:1px solid var(--theme-d2-background);">
<input type="radio" name="%s" value="%s" style="transform: scale(1.5);" %s/>
<img src="%s/%s" style="width:32px;vertical-align:middle;"/> %s
</div>', $bg, $name, $file, $ck, $directory, $file, $file);
}
}
$x .= sprintf('</div>');
$x .= '<script>scrollToLine("target-image");</script>';
return $x;
}
JMPTech
(public domain)