Independent Image Gallery Widget

Description

The image gallery widget is written fully in JavaScript using jQuery (Independent JavaScript Library) and can be interfaced (aka API) to any web platforms (eg ASP, ASPNET, Java, PHP, Python, Perl, Ruby). Thus, the API is simple and fully reusable, following the DRY philosophy and KISS priniciple. Even though we build our web applications on the Microsoft ASPNET, a proprietary web platform. We cannot assume what our future stakeholders requirements will strictly be. Thus, the image gallery was built to be independent of itself using dynamic programming language: JavaScript, markup language: XHTML, and style sheet language: CSS.

The image gallery features:

• The gallery opens inside a modal dialog (or modal popup) using jQuery UI. Then, after selecting an image the modal dialog closes and a preview thumbnail image you selected is embedded on to the form. Finally, the ID, database's table primary key, number is inserted into a hidden input to be retrieved by the server-side. All the actions are done transparently, conveniently, and simultaneously.
• Images are grouped by Public and Private within each tab using jQuery UI.
• Ability to page through set of images.
• Ability to upload image within the gallery using an iframe technique to simulate AJAX because the limitation of XMLHttpRequest handling binary data. The iframe technique allows third party developers to create their own server-side upload form without any knowledge of JavaScript.

Contributor(s)

William Chang

Computer Code

Interfacing with Microsoft ASPNET

Setup: Download

• jQuery
• jQuery UI (dialog and tabs widget)
• Image Gallery Widget
• Image Gallery CSS

Setup: Markup Code

<script src="<%=ResolveClientUrl("~/js/jquery/jquery.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/js/jquery/ui.core.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/js/jquery/ui.dialog.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/js/jquery/ui.tabs.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/js/diehard_gallery_image.js")%>" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('head').append('<link href=\"<%=URL_STYLESHEET%>\" media=\"screen\" rel=\"stylesheet\" type=\"text/css\"/>');
 
$('#gallery').diehard_gallery_image({
strHiddenDataPublicId:'<%=hidDataPublic.ClientID%>',
strHiddenDataPrivateId:'<%=hidDataPrivate.ClientID%>',
strUrlItem:'<%=URL_ITEM%>',
strUrlAdd:'<%=URL_ADD%>'
});

});
//]]>
</script>
<div id="gallery" style="display:none;"></div>

<asp:hiddenfield id="hidDataPublic" runat="server"/>
<asp:hiddenfield id="hidDataPrivate" runat="server"/>

Usage: Markup Code

<a href="#" class="gallery-trigger_open">Click here for image gallery.</a>
<asp:hiddenfield id="hidImage" runat="server"/>

Usage: Server-side

protected void Page_Load(Object sender, EventArgs e) {
    URL_STYLESHEET = ResolveClientUrl("~/css/component/diehard_gallery.css");
    URL_ITEM = ResolveClientUrl("~/restaurant/image.aspx") + "?small=1&type=menu";
    URL_ADD = ResolveClientUrl("~/common/gallery_image_upload.aspx");
    hidDataPublic.Value = "pageslength=3&images_1=1,1&images_2=42,42&images_3=1,42";
    hidDataPrivate.Value = "pageslength=3&images_1=1,42&images_2=42,42&images_3=1,1";
}

Related Code Links

• Using Microsoft ASPNET to populate image gallery widget from database.

FrontPage | SAGE Computer Code