Gallery Modification

Question

I was wondering if you guys could help me out with this. I am
trying to implement an art gallery to show just an image and a next
and previous button and I have modified the gallery.js to exclude
the thumbnails. The data loads succesfully but the image and
current row are not working. Any help is deeply appreciated.
Script tags in the html file:
<script type="text/javascript"
src="includes/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryData.js"></script>
<script type="text/javascript"
src="includes/SpryEffects.js"></script>
<script type="text/javascript">
var dsArt= new Spry.Data.XMLDataSet("gallery.xml",
"gallery/art");
var row = dsArt.setCurrentRowNumber(0); // to dynamically
call an artwork outside gallery.html
</script>
<script type="text/javascript"
src="includes/gallery.js"></script>
Gallery.js:
var gBehaviorsArray = [];
var gSlideShowTimer = null;
var gImageLoader = null;
function GetOpacity(ele)
var o = Spry.Effect.getStyleProp(ele, "opacity");
if (o == undefined || o == null)
o = 1.0;
return o;
dsArt.addDataChangedObserver("mainImage", { onDataChanged:
function(dataSet, odcType)
if (odcType != Spry.Data.DataSet.ODC_DataChanged)
return;
StopSlideShow();
setTimeout(function() { ShowCurrentImage(); }, 100);
function GetDimensions(element)
// Spry.Effect.getDimensions() returns offsetWidth and
offsetHeight
// which includes the dimensions of the element and its
padding.
// We need the dimensions of the content area without the
padding,
// so we look up width and height in style first. If we get
dimensions
// back in pixels, we use it. If not, we fall back to using
offsetWidth
// and offsetHeight.
dimensions = Spry.Effect.getDimensions(element);
if (element.style.width)
dimensions.width = parseInt(element.style.width);
if (element.style.height)
dimensions.height = parseInt(element.style.height);
return dimensions;
function GetOffsetPosition(element)
// Spry.Effect.getOffsetPosition() returns offsetLeft and
offsetTop
// which includes the position of the element content and
its padding.
// We need the position of the content area without the
padding,
// so we look up width and height in style first. If we get
position
// back in pixels, we use it. If not, we fall back to using
offsetLeft
// and offsetTop.
pos = Spry.Effect.getOffsetPosition(element);
if (element.style.left)
pos.x = parseInt(element.style.left);
if (element.style.top)
pos.y = parseInt(element.style.top);
return pos;
// Trigger the transition animation from the current image
// being displayed to the image at imgPath.
function SetMainImage(imgPath, width, height)
var img = document.getElementById("mainImage");
if (!img)
return;
CancelBehavior("mainImage");
Spry.Utils.SelectionManager.clearSelection("thumbnailSelection");
if (gImageLoader)
gImageLoader.onload = function() {};
gImageLoader = null;
gBehaviorsArray["mainImage"] = new Spry.Effect.Opacity(img,
GetOpacity(img), 0, { duration: 400,
onComplete: function()
gBehaviorsArray["mainImage"] = new
Spry.Effect.Size(img.parentNode, GetDimensions(img.parentNode), {
width: width, height: height}, {duration: 400, steps: 10,
onComplete: function()
// Use an image loader to make sure we only fade in the new
image after
// it is completely loaded.
gImageLoader = new Image();
gImageLoader.onload = function()
img.src = gImageLoader.src;
gImageLoader = null;
gBehaviorsArray["mainImage"] = new Spry.Effect.Opacity(img,
0, 1, { duration: 400, steps: 10, finish: function() {
gBehaviorsArray["mainImage"] = null; }});
gBehaviorsArray["mainImage"].start();
gImageLoader.src = imgPath;
gBehaviorsArray["mainImage"].start();
gBehaviorsArray["mainImage"].start();
// Cancel the animation behavior of the object with the given
id.
function CancelBehavior(id)
if (gBehaviorsArray[id])
gBehaviorsArray[id].cancel();
gBehaviorsArray[id] = null;
function SizeAndPosition(id, toX, toY, toWidth, toHeight,
callback)
CancelBehavior(id);
var effectCluster = new Spry.Effect.Cluster;
var ele = Spry.Effect.getElement(id);
var moveEffect = new Spry.Effect.Move(ele,
GetOffsetPosition(ele), { x: toX, y: toY}, { duration: 400 });
var sizeEffect = new Spry.Effect.Size(ele,
GetDimensions(ele), { width: toWidth, height: toHeight}, {
duration: 400 });
effectCluster.addParallelEffect(moveEffect);
effectCluster.addParallelEffect(sizeEffect);
effectCluster.finish = callback;
gBehaviorsArray[id] = effectCluster;
gBehaviorsArray[id].start();
// Show the image of the current selected row inside the
dsArt data set.
function ShowCurrentImage()
var curRow = dsArt.getCurrentRow();
SetMainImage("images/" + curRow["artist"] + "/" +
curRow["href"], curRow["width"], curRow["height"]);
// Utility function to advance (forwards or backwards) the
current selected row
// in dsArt. This has the side effect of "selecting" the
thumbnail and image
// of the new current row.
function AdvanceToNextImage(moveBackwards)
var rows = dsArt.getData();
var curRow = dsArt.getCurrentRow();
if (rows.length < 1)
return;
for (var i = 0; i < rows.length; i++)
if (rows
== curRow)
if (moveBackwards)
--i;
else
++i;
break;
if (!moveBackwards && i >= rows.length)
i = 0;
else if (moveBackwards && i < 0)
i = rows.length - 1;
curRow = rows;
dsArt.setCurrentRow(curRow["ds_RowID"]);
ShowCurrentImage();
// Start the slide show that runs forwards through all
// the rows in dsArt.
function StartSlideShow()
if (gSlideShowTimer)
clearInterval(gSlideShowTimer);
gSlideShowTimer = setInterval(function(){
AdvanceToNextImage(false); }, 6000);
var playLabel = document.getElementById("playLabel");
if (playLabel)
playLabel.firstChild.data = "Pause";
// Kill any slide show that is currently running.
function StopSlideShow()
if (gSlideShowTimer)
clearInterval(gSlideShowTimer);
gSlideShowTimer = null;
var playLabel = document.getElementById("playLabel");
if (playLabel)
playLabel.firstChild.data = "Play";
}

Answer 1

quote:
Originally posted by:
Keith Dodd
<snip>
Did you check this recently? I *thought* had fixed that
broken title tag this morning.
What seems weird now, that it seems sporatic. Sometimes on
first call to page, it comes up in IE. But then if refresh, it
hangs and doesn't show the picture.
<snip>
Keith
I re-used the
http://labs.adobe.com/technologies/spry/demos/gallery/
without change the code.
Only adaptation were
+ folder names, gallery names, and the individual picture
name
+ integration into my web page
+ display of the photographers name
Everything display fine in Opera and Firefox.
IE 6 and IE 7 are able to display the original demo, but not
my adapted site.
My investigations are not finished yet, but 1st indications
exist:
IE loads the data but refuses to display the gallery
selection.
First problem are blanks and other "special" characters in
the displayed gallery name.
I identified so far " ", "_", "(", ")" as trouble-makers.
example: lack of IE display at
http://www.percolators.de/pics/bild_med.htm
(status as of Nov 7 13:40 GMT)
--> a workaround is to put dashes between the words
example: partly working at
http://www.percolators.de/pics/bild_big.htm
(status as of Nov 7 13:40 GMT)
Second problem are special national characters (e.g.
"ä", "ü", "ö") in the "photographer" part of the
"photos.xml"
--> this hinders to display the respective gallery and the
subsequent one. The 3rd gallery after the troubled one enjoys a
resynch and is displayed again.
Maybe somebody can benefit from these observations - and
maybe somebody can explain additional rules / restrictions to obey
when catering for IE.
Juergen