DreamWeaver Toolbar: Photo Gallery

Allows the owner of a website to maintain an image gallery.  This module takes a lot of the work out of building an online image gallery. It takes the uploaded image and creates two copies, a small, high quality preview, and a web friendly copy.  The original is discarded.

Features

  • High quality previews.
  • Web friendly file formatting.
  • Optional text captioning with text size settings.
  • A variable number of columns and rows.
  • Designer's choice of pop-up or roleover to display the full sized image.

Installation

  1. Open an HTML file in DreamWeaver.
  2. Place the cursor at the insertion point (in code view or design view).
  3. Go to the Zencil toolbar and click the photo gallery icon.

Discussion

In short, this module creates a table of replaceable images that the owner can manage.  If they need some photoshopping done, they are encouraged to use the "request support" button at the bottom of the page to contact you, their developer.  Information on the request support button is available here.

Code Sample 1 - Popup Style

<zencil:hidden module="photogallery" name="photogallery1" gallerystyle="popup"
thumb_width="150" thumb_height="150" image_width="600" image_height="600">
<script>
function zencil_examplePopup(color){
var html = "";
html += "<html><body style="margin: 0">";
html += "<a href="#" onClick="window.close();" style='display: block; width: 100%; height: 100%; background-color: "+color+"'></a>";
html += "</body></html>";
var popup = window.open("", "imagepopup", "width=600,height=600");
popup.document.write(html);
popup.document.close();
}
</script>
  <style>
.zencil_examplethumb {
width: 150px;
height: 150px;
text-decoration: none;
color: grey;
border: 1px grey dotted;
display: block;
}
</style>
  <table align='center' width='50%' cellspacing='2' cellpadding='2' border='0' >
    <tr>
      <td align="center"><a href='#' onclick="zencil_examplePopup('lightgreen')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightgreen;'></a></td>
      <td align="center"><a href='#' onclick="zencil_examplePopup('lightgreen')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightgreen;'></a></td>
<td align="center"><a href='#' onclick="zencil_examplePopup('lightgreen')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightgreen;'></a></td>
</tr>
<tr>
      <td align="center"><a href='#' onclick="zencil_examplePopup('lightgreen')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightgreen;'></a></td>
      <td align="center"><a href='#' onclick="zencil_examplePopup('lightgreen')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightgreen;'></a></td>
<td align="center"><a href='#' onclick="zencil_examplePopup('lightgreen')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightgreen;'></a></td>
</tr>
<tr>
      <td align="center"><a href='#' onclick="zencil_examplePopup('lightgreen')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightgreen;'></a></td>
      <td align="center"><a href='#' onclick="zencil_examplePopup('lightgreen')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightgreen;'></a></td>
<td align="center"><a href='#' onclick="zencil_examplePopup('lightgreen')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightgreen;'></a></td>
</tr>
  </table>
</zencil:hidden>

Code Sample 2 - Mouse Over Style

<zencil:hidden module="photogallery" name="photogallery1" gallerystyle="mouseover"
thumb_width="150" thumb_height="150" image_width="600" image_height="600">
  <script>
function zencil_replaceImage(color){
var image = document.getElementById('zencil_changeimage');
image.style.backgroundColor =  color;
}
</script>
  <style>
.zencil_examplethumb {
width: 150px;
height: 150px;
text-decoration: none;
color: grey;
border: 1px grey dotted;
display: block;
}
</style>
  <table align='center' width='50%' cellspacing='2' cellpadding='2' border='0' >
    <tr>
      <td align="center" colspan="3">
<div id='zencil_changeimage' style='width: 600px; height: 600px; background-color: lightblue'>
</div>
</td>
    </tr>
    <tr>
      <td align="center"><a href='#' onmouseover="zencil_replaceImage('lightblue')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightblue;'></a></td>

      <td align="center"><a href='#' onmouseover="zencil_replaceImage('lightblue')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightblue;'></a></td>

      <td align="center"><a href='#' onmouseover="zencil_replaceImage('lightblue')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightblue;'></a></td>
    </tr>
    <tr>

      <td align="center"><a href='#' onmouseover="zencil_replaceImage('lightblue')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightblue;'></a></td>


      <td align="center"><a href='#' onmouseover="zencil_replaceImage('lightblue')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightblue;'></a></td>

      <td align="center"><a href='#' onmouseover="zencil_replaceImage('lightblue')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightblue;'></a></td>
    </tr>
    <tr>

      <td align="center"><a href='#' onmouseover="zencil_replaceImage('lightblue')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightblue;'></a></td>

      <td align="center"><a href='#' onmouseover="zencil_replaceImage('lightblue')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightblue;'></a></td>

      <td align="center"><a href='#' onmouseover="zencil_replaceImage('lightblue')" class='zencil_examplethumb'
title='Example Gallery Image' style='background-color: lightblue;'></a></td>
    </tr>
  </table>
</zencil:hidden>
 
    Copyright Clear Site Web Solutions Corporation  |  Victoria, B.C. Canada