Documentation
Select an image attached to a OBJECT topic
Parameters
- OBJECT, default BASEWEB.BASETOPIC
- SELECTED
- FIELDNAME
- EXTENSIONS, defaults to
jpe?g|JPE?G|gif|GIF|png|PNG|svg|SVG|webp|WEBP
Implementation
%STARTINCLUDE%<!-- -->
<div class="fwbImageSelector clearfix">
%ATTACHMENTS{
topic="%OBJECT{default="%BASEWEB%.%BASETOPIC%"}%"
name=".*\.(%EXTENSIONS{default="jpe?g|JPE?G|gif|GIF|png|PNG|svg|SVG|webp|WEBP"}%)$"
_exclude="%DEFAULT{default=""}%"
sort="name"
format="<label $percntIF{\"'%SELECTED%'='$urlpath'\" then=\"class='selected'\"}$percnt>
<input type='radio' name='%FIELDNAME{default="file"}%' value='$urlpath' $percntIF{\"'%SELECTED%'='$urlpath'\" then=\" checked='checked'\"}$percnt />
<img src='%SCRIPTURLPATH{"rest"}%/ImagePlugin/resize?topic=$web.$topic&file=$name&size=x100>^;&crop=on' alt='$name' style='height:100px' />
</label>"
}%
</div>
%ADDTOZONE{"script"
id="RENDERIMAGESELECTOR::JS"
requires="JQUERYPLUGIN::LIVEQUERY"
text="<script type='text/javascript' src='%PUBURLPATH%/Applications/RenderImageSelector/script.js?t=%GMTIME{"$epoch"}%'></script>"
}%%ADDTOZONE{"head"
id="RENDERIMAGESELECTOR::CSS"
text="<link rel='stylesheet' href='%PUBURLPATH%/Applications/RenderImageSelector/style.css?t=%GMTIME{"$epoch"}%' media='all' />"
}%<!-- -->%STOPINCLUDE%
Css
%STARTATTACH{"style.css"}%
.fwbImageSelector {
margin:0.5em 0;
}
.fwbImageSelector input {
display:none;
}
.fwbImageSelector label {
float:left;
margin:0 5px 5px 0;
padding:1px;
}
.fwbImageSelector label img {
float:left;
border-radius:5px;
overflow:hidden;
margin:2px;
}
.fwbImageSelector label.selected img {
border:2px solid #b22222;
box-shadow:2px 2px 10px -1px #000;
margin:-1px 1px 1px -1px;
}
%ENDATTACH%
Javascript
%STARTATTACH{"script.js"}%
"use strict";
jQuery(function($) {
$(".fwbImageSelector").livequery(function() {
var $selector = $(this);
$selector.find("label").on("click", function() {
var $this = $(this),
isChecked = $this.find("input").prop("checked");
$selector.find("input:checked").prop("checked", false);
$selector.find(".selected").removeClass("selected");
if (!isChecked) {
$this.addClass("selected").find("input").prop("checked", true);
}
return false;
});
});
});
%ENDATTACH%
Test
Copyright
© 2006-2015 Michael Daum
http://michaeldaumconsulting.com
This file is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version. For
more details read the
LICENSE.
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY, to the extent permitted by law; without even the
implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.