You are viewing a plain text version of this content. The canonical link for it is here.
Posted to photark-commits@incubator.apache.org by lr...@apache.org on 2009/09/13 23:01:12 UTC
svn commit: r814432 -
/incubator/photark/trunk/photark-embedded/src/main/resources/gallery.html
Author: lresende
Date: Sun Sep 13 23:01:12 2009
New Revision: 814432
URL: http://svn.apache.org/viewvc?rev=814432&view=rev
Log:
Finalizing basic navigation between gallery and it's multiple albums
Modified:
incubator/photark/trunk/photark-embedded/src/main/resources/gallery.html
Modified: incubator/photark/trunk/photark-embedded/src/main/resources/gallery.html
URL: http://svn.apache.org/viewvc/incubator/photark/trunk/photark-embedded/src/main/resources/gallery.html?rev=814432&r1=814431&r2=814432&view=diff
==============================================================================
--- incubator/photark/trunk/photark-embedded/src/main/resources/gallery.html (original)
+++ incubator/photark/trunk/photark-embedded/src/main/resources/gallery.html Sun Sep 13 23:01:12 2009
@@ -18,19 +18,37 @@
-->
<html>
<head>
-<title>Photo Gallery</title>
+<title>Apache PhotArk - Photo Gallery</title>
<link href="styles.css" rel="stylesheet">
<script type="text/javascript" src="gallery.js"></script>
<script language="JavaScript">
+ index_off= new Image(31,31); index_off.src = "index.gif";
+ index_on = new Image(31,31); index_on.src = "index_on.gif";
+ next_off = new Image(31,31); next_off.src = "next.gif";
+ next_on = new Image(31,31); next_on.src = "next_on.gif";
+ prev_off = new Image(31,31); prev_off.src = "prev.gif";
+ prev_on = new Image(31,31); prev_on.src = "prev_on.gif";
+
//@Reference
var gallery = new tuscany.sca.Reference("gallery");
var galleryName;
var galleryAlbums;
+ var albumName;
+ var albumItems;
+ var albumPos = 0;
+ function initGallery() {
+ try {
+ gallery.getAlbums(gallery_getAlbumsResponse);
+ } catch(exception) {
+ alert(e);
+ }
+ }
+
function gallery_getAlbumsResponse(albums, exception) {
if(exception) {
alert(exception.msg);
@@ -39,11 +57,12 @@
galleryAlbums = albums;
if(galleryAlbums.length > 0) {
- showGallery();
+ initializeGallery();
+ displayGallery();
}
}
- function showGallery() {
+ function initializeGallery() {
var table=document.getElementById('tableGallery');
var lastRow = table.rows.length;
for(i=0; i<galleryAlbums.length; i++) {
@@ -53,7 +72,8 @@
var albumName = galleryAlbums[i].name;
var albumCover = gallery.getAlbumCover(albumName);
var img_src = albumCover;
- var html = "<img src=" + "gallery/" + albumName + "/" + img_src + " class=\"slideImage\" height=25% width=25% ondragstart=\"return false\" onselectstart=\"return false\" oncontextmenu=\"return false\" galleryimg=\"no\" usemap=\"#imagemap\" alt=\"\"/>";
+ var img_html = "<img src=" + "gallery/" + albumName + "/" + img_src + " class=\"slideImage\" height=25% width=25% ondragstart=\"return false\" onselectstart=\"return false\" oncontextmenu=\"return false\" galleryimg=\"no\" usemap=\"#imagemap\" alt=\"\"/>";
+ var html="<a href=\"javascript:initializeAlbum('" + albumName +"')\">" + img_html + "</a>";
column.innerHTML = html;
row = table.insertRow(lastRow++);
@@ -67,40 +87,129 @@
}
- function showImage(pos) {
+ function displayGallery() {
+ setVisibility('gallery',true);
+ setVisibility('album',false);
+ }
+
+ function initializeAlbum(albumName) {
+ try {
+ this.albumName = albumName;
+ gallery.getAlbumPictures(albumName, gallery_getAlbumPicturesResponse);
+ } catch(exception) {
+ alert(e);
+ }
+ }
+
+ function gallery_getAlbumPicturesResponse(items, exception) {
+ if(exception) {
+ alert(exception.msg);
+ displayGallery();
+ return;
+ }
+ albumItems = items;
+ albumPos = 0;
+ showAlbum();
+ }
+
+ function showAlbum() {
+ if(albumItems.length > 0) {
+ showImage(albumPos);
+ }
+ displayAlbum();
+ }
+
+ function displayAlbum() {
+ setVisibility('gallery',false);
+ setVisibility('album',true);
+ }
+
+ function showImage(albumPos) {
var img = document.createElement("img");
img.onload = function(evt) {
document.getElementById("albumImage").src = this.src;
document.getElementById("albumImage").width=this.width;
document.getElementById("albumImage").height=this.height;
}
- img.src = albumItems[pos];
+ img.src = "gallery/" + albumName + "/" + albumItems[albumPos];
return false;
- }
-
+ }
+ function goNext() {
+ if(albumPos < albumItems.length) {
+ albumPos++;
+ showImage(albumPos);
+ }
+ }
- function init() {
- try {
- gallery.getAlbums(gallery_getAlbumsResponse);
- } catch(exception) {
- alert(e);
+ function goPrevious() {
+ if(albumPos > 0) {
+ albumPos--;
+ showImage(albumPos);
}
}
+
+ function setVisibility(divId, visible) {
+ //valid values { visible, hidden }
+ if (document.getElementById) {
+ var element = document.getElementById(divId)
+ if(visible) {
+ element.style.display = 'block';
+ element.style.visibility = 'visible';
+ } else {
+ element.style.display = 'none';
+ element.style.visibility = 'hidden';
+ }
+ }
+ }
+
+
</script>
</head>
-<body onload="init()">
+<body onload="initGallery()">
<br>
<h1><center>Apache PhotArk Gallery</center></h1>
<br>
<br>
- <div id="gallery">
+
+<div id='gallery' style='display:none;visibility:hidden;'>
<center>
- <table id="tableGallery" style="width:720px;" border="0" cellspacing="0" cellpadding="1"/>
+ <table id='tableGallery' style='width:720px;' border='0' cellspacing='0' cellpadding='1'></table>
</center>
- </div>
+</div>
+
+<div id="album" style="display:none;visibility:hidden;">
+ <center>
+
+ <table style="height:54px;" cellspacing="0" cellpadding="0" border="0">
+ <tr>
+ <td valign="middle">
+ <!-- Navigation Header -->
+ <table style="width:100%;" cellspacing="0" cellpadding="0" border="0">
+ <tr>
+ <td style="width:31px;"><a href="javascript:displayGallery()" onmouseover="document.index.src=index_on.src" onmouseout="document.index.src=index_off.src"><img src="index.gif" width="31" height="31" border="0" title="Index page" name="index" alt=""></a></td>
+ <td style="width:31px;"><a href="javascript:goPrevious()" onmouseover="document.previous.src=prev_on.src" onmouseout="document.previous.src=prev_off.src"><img src="prev.gif" width="31" height="31" border="0" title="Previous image" name="previous" alt=""></a></td>
+ <td style="width:31px;"><a href="javascript:goNext()" onmouseover="document.next.src=next_on.src" onmouseout="document.next.src=next_off.src"><img src="next.gif" width="31" height="31" border="0" title="Next image" name="next" alt=""></a></td>
+ <!-- <td style="width:31px;"><a href="javascript:void(0)" onmouseover="show_over();" onmouseout="show_out();" onmousedown="show_down();" ondblclick="change_delay();"><img src="show_slide.gif" width="31" height="31" border="0" title="Start/Stop slideshow - DoubleClick to change speed" name="show" alt=""></a></td> -->
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+
+ <table style="width:720px;" border="0" cellspacing="0" cellpadding="0">
+ <tr>
+ <td align="center"> <!-- Image without original -->
+ <img id="albumImage" src="space.gif" class="slideImage" width="720" height="540" ondragstart="return false" onselectstart="return false" oncontextmenu="return false" galleryimg="no" usemap="#imagemap" alt="">
+ </td>
+ </tr>
+ </table>
+
+ </center>
+</div>
+
</body>
</html>