<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Gallery</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>Gallery</h1>
        <p>
        This site combines a few features of the package:
        </p>

        <ul>
        <li>
        Automatic resizing on this page (using the <em>resizeWidth</em> property of the <em>imageGroups</em> element).
        </li>
        <li>
        Restricting the group that does the resizing to only work on this page 
         (using the <em>pageUrlMatch</em> property of the <em>imageGroups</em> element).
        </li>
        <li>
        On the fly compression of large jpeg images on the picture pages (using the <em>jpegQuality</em> property of the <em>imageGroups</em> element).
        </li>
        <li>
        Creating 
        </li>
        </ul>

        <p>
        To see the generated html, do a View Source of each page. The generated sprites are in the ___spritegen directory in the root of this site.
        </p>

        <h2>Thumbnails</h2>
        <p>
        Physically resized on the fly using the <em>resizeWidth</em> property.
        This has been coded with ASP.NET HyperLink controls rather than anchor and img tags, to show that
        the package works with HyperLink controls and other ASP.NET controls as well. 
        </p>
        <p>
        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Picture1.aspx" ImageUrl="~/largeimages/vanuatu1.JPG">Vanuatu picture 1</asp:HyperLink>
        </p>
        <p>
        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Picture2.aspx" ImageUrl="~/largeimages/vanuatu2.JPG">Vanuatu picture 2</asp:HyperLink>
        </p>

        <h2>Small png icons</h2>

        <p><img src="images/contactus.png" /></p>
        <p><img src="images/cart.png" /></p>
        <p><img src="images/print.png" /></p>
    </div>
    </form>
</body>
</html>
