Select an image attached to a OBJECT topic
jpe?g|JPE?G|gif|GIF|png|PNG|svg|SVG|webp|WEBP
%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%
.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; }
"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; }); }); });
I | Attachment | Action | Size | Date | Who | Comment |
---|---|---|---|---|---|---|
png | nobody.png | manage | 2 K | 2019-05-02 - 09:18 | ProjectContributor | |
js | script.js | manage | 549 bytes | 2019-05-02 - 09:18 | ProjectContributor | Generated by AttachContentPlugin |
css | style.css | manage | 397 bytes | 2019-05-02 - 09:18 | ProjectContributor | Generated by AttachContentPlugin |