--- a/website/custom.html
+++ b/website/custom.html
@@ -264,6 +264,113 @@
<br clear="all">
<img src="resparpics/default.png"/>
+<h3>Alternating bands, bigger previews, and custom paragraph
+typesetting</h3>
+
+ <p>The author's description for the following code:
+ <blockquote>
+ It uses the "Alternating Results Background" from that page,
+ plus my own layout which incorporates a larger view of image
+ files. The 'large image' is scaled down from the actual
+ image, rather than a scaled up version of the thumbnail.
+ </blockquote>
+ </p>
+
+ <p>The header fragment has the javascript for
+ alternating backgrounds, and the CSS code:</p>
+
+<pre>
+<!-- Custom Header -->
+<script type="text/javascript">
+ function altRows() {
+ var rows = document.getElementsByClassName("rclresult");
+ for (i = 0; i < rows.length; i++) {
+ if (i % 2 == 0) {
+ rows[i].style.backgroundColor = "#f0f0f0";
+ }
+ }
+ }
+ window.onload = function() {
+ altRows();
+ }
+</script>
+
+<style type="text/css">
+.thumbnail {
+ display:block;
+ position:relative;
+ padding: 4px;
+ width: auto; /* set width of thumbnail image in 'paragraph' code - not here */
+ border:none;
+ z-index:0;
+ }
+.thumbnail:hover {
+ border:none;
+ background-color: transparent;
+ z-index: 50;
+ }
+.thumbnail span {
+ position: absolute;
+ left: -9999px;
+ visibility: hidden;
+ }
+.thumbnail span img {
+ max-width:256px; /* set 'large image' max width/height - advise keeping these */
+ max-height:256px; /* the same to avoid inadvertently changing the aspect ratio */
+ width:auto; /* leave set to auto */
+ height:auto; /* leave set to auto */
+ background-color: gray;
+ padding: 1px;
+ border: 1px solid black;
+ }
+.thumbnail:hover span {
+ visibility: visible;
+ top: 4px; /* top/left positions 'large image' relative to top left */
+ left: 88px; /* of parent thumbnail (plus padding) */
+ }
+</style>
+<!-- End of Custom Header -->
+</pre>
+
+ <p>And the paragraph format:</p>
+
+<pre>
+<!-- Custom Paragraph -->
+<table>
+ <tr>
+ <td>
+ <a class="thumbnail" href="#">
+ <img src="%I" width="64px" height="auto"> <!-- set width of thumbnail -->
+ <span>
+ <img src="%U">
+ </span>
+ </a>
+ <td>
+ <table>
+ <tr>
+ <td>
+ <div>
+ <b>%T</b></br>
+ %L</br>
+ <p><font color="grey">%A </font><font color="#CD6688"><i>%K</i></font></p>
+ <font color="green"><font size=1>
+ %U</br>
+ %R ��� %S���%D ��� %M
+ </font></font></br>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+</table>
+<!-- End Custom Paragraph -->
+</pre>
+
+ <p>Result:</p>
+<br clear="all">
+<img src="resparpics/pip.png"/>
+
<h3>A simpler format, suggested in Bitbucket issue #69</h3>
<pre>