Gallery without XML definition of image size

Question

Hello,
In my application, the images are actually created on the
fly. So knowing the exact dimensions at the time the XML is created
was a bit troublesome, since some images can be landscape, some can
be portrait, and they all can have different aspect ratios. So, in
it's original form, the gallery script didn't work very well for
me. Last night, I sought out a solution that would not require the
sizes to be in the XML file. Below is my refactored SetMainImage
function. Where the original version of this function downloads the
image after the opacity is reduced, this one starts by loading the
new image, then uses the Size effect to resize the frame to the new
image's size.
Hope this helps somebody else! Spry certainly has helped
me!!!!!! Thank you Adobe!
Peace,
Matt
function SetMainImage(imgPath, tnID)
var img = document.getElementById("mainImage");
if (!img) {
return;
CancelBehavior("mainImage");
Spry.Utils.SelectionManager.clearSelection("thumbnailSelection");
if (tnID) {
Spry.Utils.SelectionManager.select("thumbnailSelection",
document.getElementById(tnID), "selectedThumbnail");
if (gImageLoader)
gImageLoader.onload = function() {};
gImageLoader = null;
// 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()
gBehaviorsArray["mainImage"] = new Spry.Effect.Opacity(img,
GetOpacity(img), 0, { duration: 400,
finish: function()
gBehaviorsArray["mainImage"] = new
Spry.Effect.Size(img.parentNode, GetDimensions(img.parentNode), {
width: gImageLoader.width, height: gImageLoader.height}, {duration:
400, steps: 10,
finish: 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();
} // End finish function for Size call.
}); // End params for size call
gBehaviorsArray["mainImage"].start();
} // End finish function for first Opacity call.
}); // end parameters for first opacity call
gBehaviorsArray["mainImage"].start();
}; // End gImageLoader function
gImageLoader.src = imgPath;
}

Answer 1

Howdy,
I decided to strip the effects from the thumbnails, so they
all do show in their original full size. As a portrait
photographer, my goal with using technology is to help me sell
prints. Shrinking a portrait orientation photo down to fit in a
square makes people look short and fat, and even if the large image
is correct, people don't buy photos that make them look short and
fat. Plus, it was also important to me to include the filename as a
caption for the thumbnail. So that is a rather long explanation of
how I got out of defining the sizes of the thumbnails.
As for the large images, the code above is a replacement for
the SetMainImage function in gallery.js. You'll also need to change
the call to the function in ShowCurrentImage() from:
SetMainImage("galleries/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
to:
SetMainImage("galleries/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
"tn" + curRow["ds_RowID"]);
Kin--You bring up some really good points. In my case, it
would be too server intensive to calculate all the image sizes on
the first load, as my server does not actually create the web
images until they are requested--then they are stored in a cache on
the server for future requests. So, I needed to do something that
would not depend on knowing the size before loading the image.
I totally understand why you did things the way you did. I
think I might have to figure out a pre-loading strategy as you
mention. Or, I may try some of the new spry effects to do something
a bit different so the user sees some action immediately on click.
That is probably pretty important, and I have not addressed it yet.
Anyways, here is the link for my development site. I'll post
here when it is done, because i'm not close to being done yet. The
password for now is 'blue'
http://www.mattjones.org/order_test/
Peace,
Matt