Documentation

Select an image attached to a SOURCE topic

Parameters

• SELECTED
• SOURCE
• DEFAULT
• FIELDNAME

Implementation

%STARTINCLUDE%<!-- -->
<div class="fwbImageSelector">
  <div class='fwbImage %IF{"'%SELECTED%'='%DEFAULT%' or not defined SELECTED" then=" selected orig"}%' id='fwbImage0'>
    <label>
      <input type='radio' name='%FIELDNAME%' value='%DEFAULT%' %IF{"'%SELECTED%'='%DEFAULT%' or not defined SELECTED" then=" checked='checked'"}%/>
      <img src='%DEFAULT%' alt='default' height='100px' />
    </label>
  </div>
  %ATTACHMENTS{
    topic="%SOURCE%"
    name=".*\.(jpe?g|JPE?G|gif|GIF|png|PNG)$"
    exclude="%DEFAULT%"
    sort="name"
    format="<div class='fwbImage $percntIF{\"'%SELECTED%'='$urlpath'\" then=\" selected orig\"}$percnt' id='fwbImage$index'>
      <label>
        <input type='radio' name='%FIELDNAME%' value='$urlpath' $percntIF{\"'%SELECTED%'='$urlpath'\" then=\" checked='checked'\"}$percnt />
        <img src='$urlpath' alt='$name' height='100px' />
      </label></div>"
  }%
  %CLEAR%
</div>
<div class="fwbImageButtons">
  %BUTTON{"%MAKETEXT{"Clear"}%" icon="application" id="fwbImageButtonClear"}%
  %BUTTON{"%MAKETEXT{"Undo"}%" icon="arrow_undo" id="fwbImageButtonUndo"}%
  %CLEAR%
</div>
%ADDTOZONE{"script" section="js" requires="JQUERYPLUGIN"}%
%ADDTOZONE{"head" section="css"}%
<!-- -->%STOPINCLUDE%

Css

%STARTSECTION{"css"}%<literal>
<style>
.fwbImageSelector input {
  display:none;
}
.fwbImageSelector .fwbImage {
  float:left;
  border:1px solid #fff;
  margin:0 5px 5px 0;
  padding:1px;
}
.fwbImageSelector .selected {
  border:1px solid red;
}
.fwbImageSelector .fwbImage img {
  float:left;
}
</style>
</literal>%ENDSECTION{"css"}%

Javascript

%STARTSECTION{"js"}%<literal>
<script>
jQuery(function($) {
   $("#fwbImageButtonClear").click(function() {
     var $this = $(this);
     $this.blur();
     $('.fwbImage').removeClass('selected');
     $('.fwbImageSelector input').removeAttr('checked');
     $('#fwbImage0 label').trigger('click');
     return false;
  });
  $("#fwbImageButtonUndo").click(function() {
    var $this = (this);
    $this.blur();
    $('.fwbImage').removeClass('selected');
    $('.fwbImageSelector input').removeAttr('checked');
    $('.orig').parent().attr('checked', 'checked');
    $('.orig').addClass('selected');
    return false;
  });
  $(".fwbImageSelector label").click(function() {
    var $this = $(this);
    $('.fwbImage').removeClass('selected');
    $('.fwbImageSelector input').removeAttr('checked');
    $this.parent().addClass('selected');
    $this.parent().find("input").attr("checked", "checked");
    return false;
  });
});
</script>
</literal>%ENDSECTION{"js"}%

Test

Copyright

© 2006 - 2013 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.