I'm not entirely sure how you mean to achieve this via css?
here's my current code. With this I can generate multiple
slideshows (currently using the same dataset) however only the
first one seems to acknowledge the defined fixed image sizes, the
rest display the original image dimensions within the container
sized to the defined dimensions. How come the images don't resize
for both? I'm calling the same function. Any help much appreciated
thanks.
// My Xml
<features>
<set id="1">
<cover id="0" path="pics/to/image1.jpg" alt="image
description" />
<cover id="2" path="pics/to/image2.jpg" alt="image
description" />
</set>
<set id="2">
<cover id="0" path="pics/to/image3.jpg" alt="image
description" />
<cover id="2" path="pics/to/image4.jpg" alt="image
description" />
</set>
</features>
// My Index.php
<!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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>Gallery</title>
<link href="../css/screen.css" rel="stylesheet"
type="text/css" />
<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 dsFeatures = new
Spry.Data.XMLDataSet("../../../../../xml/xml_Features.php",
"features/set/cover");
</script>
<script src="gallery.js"
type="text/javascript"></script>
</head>
<body id="gallery">
<div id="wrap">
<div id="previews" style="display: none;">
<div id="thumbnails" spry:region="dsFeatures">
<div spry:repeat="dsFeatures"> <img id="{id}"
alt="{@alt}" src="../../../../../{@path}" width="24" height="24"
style="left: 0px; right: 0px;" /> </div>
<p class="ClearAll"></p>
</div>
</div>
<div id="picture">
<div id="mainImageOutline" style="width: 0px; height:
0px;">
<img id="mainImage" alt="Click to view product details"
onmouseover="if (gSlideShowOn) StopSlideShow();" onmouseout="if
(!gSlideShowOn) StartSlideShow();" />
</div>
<div id="mainImageOutline" style="width: 0px; height:
0px;">
<img id="mainImage2" alt="Click to view product details"
onmouseover="if (gSlideShowOn) StopSlideShow();" onmouseout="if
(!gSlideShowOn) StartSlideShow();" />
</div>
</div>
<p class="clear"></p>
</div>
</body>
</html>
// gallery.js
// Global variables:
var gThumbWidth;
if (gThumbWidth == undefined)
gThumbWidth = 24;
var gThumbHeight;
if (gThumbHeight == undefined)
gThumbHeight = 24;
var gSlideShowInterval;
if (gSlideShowInterval == undefined)
gSlideShowInterval = 3000; // msecs between images.
var gAutoStartSlideShow;
if (gAutoStartSlideShow == undefined)
gAutoStartSlideShow = true;
var gBehaviorsArray = [];
var gSlideShowOn = false;
var gSlideShowTimer = null;
var gImageLoader = null;
// Register a callback on the dsFeatures data set so we can
turn
// off the slide show before it attempts to load new data.
dsFeatures.addObserver(function(nType, notifier, data) {
if (nType == "onPreLoad")
StopSlideShow();
});
// Register a callback on the thumbnails region so we can
show the first
// image in the data set after all the thumbnails have
loaded.
Spry.Data.Region.addObserver("thumbnails", function(nType,
notifier, data) {
if (nType == "onPostUpdate")
{
ShowCurrentImage();
if (gAutoStartSlideShow)
StartSlideShow(true);
}
});
// Trigger the transition animation from the current image
// being displayed to the image at imgPath.
function SetCover(imgPath, width, height, div)
{
var img = document.getElementById(div);
if (!img)
return;
CancelBehavior(div);
gBehaviorsArray[div] = new Spry.Effect.Opacity(img,
Spry.Effect.getOpacity(img), 0, { duration: 400,
finish: function()
{
gBehaviorsArray[div] = new Spry.Effect.Size(img.parentNode,
Spry.Effect.getDimensions(img.parentNode), { width: width, height:
height, units:"px"}, {duration: 400,
finish: 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[div] = new Spry.Effect.Opacity(img, 0, 1, {
duration: 400,
finish: function()
{
gBehaviorsArray[div] = null;
// Our new image is fully visible now. If the slide show
// is on, fire off the timer for the next image.
if (gSlideShowOn)
SetSlideShowTimer();
}});
gBehaviorsArray[div].start();
};
gImageLoader.src = imgPath;
}
});
gBehaviorsArray[div].start();
}
});
gBehaviorsArray[div].start();
}
// Cancel the animation behavior of the object with the given
id.
function CancelBehavior(id)
{
if (gBehaviorsArray[id])
{
gBehaviorsArray[id].cancel();
gBehaviorsArray[id] = null;
}
}
// Show the image of the current selected row inside the
dsPhotos data set.
function ShowCurrentImage()
{
var curRow = dsFeatures.getCurrentRow();
SetCover("../../../../../" +
dsFeatures.getCurrentRow()["@path"], 150, 180, "mainImage");
SetCover("../../../../../" +
dsFeatures.getCurrentRow()["@path"], 200, 300, "mainImage2");
//SetCover("../../../../../" +
dsFeatures.getCurrentRow()["@path"], 120, 150, "mainImage3");
//SetCover("../../../../../" +
dsFeatures.getCurrentRow()["@path"], 120, 150, "mainImage3");
}
// Utility function to advance (forwards or backwards) the
current selected row
// in dsFeatures. This has the side effect of "selecting" the
thumbnail and image
// of the new current row.
function AdvanceToNextImage(moveBackwards)
{
var rows = dsFeatures.getData();
var curRow = dsFeatures.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;
dsFeatures.setCurrentRow(curRow["ds_RowID"]);
ShowCurrentImage();
}
function SetSlideShowTimer()
{
KillSlideShowTimer();
gSlideShowTimer = setTimeout(function(){ gSlideShowTimer =
null; AdvanceToNextImage(false); }, gSlideShowInterval);
}
function KillSlideShowTimer()
{
if (gSlideShowTimer)
clearTimeout(gSlideShowTimer);
gSlideShowTimer = null;
}
// Start the slide show that runs forwards through all
// the rows in dsPhotos.
function StartSlideShow(skipTimer)
{
gSlideShowOn = true;
if (!skipTimer)
SetSlideShowTimer();
}
// Kill any slide show that is currently running.
function StopSlideShow()
{
gSlideShowOn = false;
KillSlideShowTimer();
}
Also if someone could explain how i could set the dataset for
each image(coverImage) to be for each <set id=""> that would
be great.
Thanks for any help you can provide.
