Skip to main content
December 18, 2008
Answered

Display Images Instead Of Field Names

  • December 18, 2008
  • 3 replies
  • 402 views
Hi There,

I am trying to use some animation slide show Moo Tool for a web page that uses a SPRY/AJAX results and detail data and set.The problem looks to be that the data fields are not being parsed to present the file paths of where the images are located. Here is the particular snippet of code in question, and I can post the whole code if needed.

<script type="text/javascript" src="JavascriptFiles/Slideshow2r113/Slideshow 2!/js/slideshow.kenburns.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'{rsListing::IMXA}': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
'{rsListing::IMXB}': { caption: 'A Ceibu tree.' },
'{rsListing::IMXC}': { caption: 'The view from Volcano Maderas.' },
'{rsListing::IMXD}': { caption: 'Beer and ice cream.' }
};
var myShow = new Slideshow.KenBurns('show', data, {controller: true, height: 400, thumbnails: false, width: 300});
});
//]]>

Appreciate your input.
This topic has been closed for replies.
Correct answer _V11
thats not going to work that way. You cant populate javascript variables with Spry that way. You must use the dataset in question using datasetname.getData();

that returns the dataset array where you can loop through and find the correct files. Also your script is wrapped around a domready event which is useless as it needs to wait till the dataset is completly ready. So its better to execute that code using observers.

the observer onPostLoad would be good for this.

datasetname.addObserver({
onPostLoad:function(ds,data){
// do your stuff here.
}
});

3 replies

_V11
Participating Frequently
December 18, 2008
under var rsListing;

rsListing.addObserver({
onPostLoad:function(ds,data){
var dataset = ds.getData();
var data = {
dataset[0]['IMXA']: { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
dataset[0]['IMXB']: { caption: 'A Ceibu tree.' },
dataset[0]['IMXC']: { caption: 'The view from Volcano Maderas.' },
dataset[0]['IMXD']: { caption: 'Beer and ice cream.' }
};
var myShow = new Slideshow.KenBurns('show', data, {controller: true, height: 400, thumbnails: false, width: 300});
}});

something like that might help.
December 18, 2008
Fusion,

Thanks for the reply. I am simply out of my league here with the Spry/Javascript as you can probably already tell from my post.

Are you telling me to replace 'window.addEvent('domready', function()' with 'datasetname.addObserver({
onPostLoad:function(ds,data){
// do your stuff here.
}
}); '

And I am not certain where to place the datasetname.getData();

Here is all of the code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMasterDetail.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
var rsListing = new Spry.Data.HTMLDataSet("VTData.asp", "Data", {columnNames: ['TListings_ID', 'UserAgent', 'MLNumber', 'ListingPrice', 'PropertyAddress', 'PropertyCity', 'PropertyCounty', 'PropertyState', 'Subdivision', 'PropertyZipCode', 'TListings_Latitude', 'TListings_Longitude', 'Acres', 'Age', 'Bathrooms', 'Bedrooms', 'Directions', 'FullBathrooms', 'HalfBathrooms', 'MarketingRemarks', 'Aplliances', 'BedroomMaster', 'Bedroom2', 'Bedroom3', 'Bedroom4', 'Bedroom5', 'BreakfastRm', 'Basement', 'Bath1', 'Bath2', 'Bath3', 'Bath4', 'Construction', 'Cooling', 'DiningRm', 'EntryRm', 'FamilyRm', 'FormDiningRm', 'Fireplace', 'Foundation', 'Garage', 'Heating', 'InteriorFeatures', 'Kitchen', 'KitchenFeatures', 'Laundry', 'LandDesc', 'Levels', 'LivingRoom', 'GreatRoom', 'NewConst', 'Occupancy', 'OutsideFeatures', 'PropertyDesc', 'Roof', 'Sewer', 'Study', 'Suburb', 'TaxRate', 'View', 'WaterSource', 'Windows', 'VirtualTourURL', 'SchoolDistrict', 'Status', 'Zoning', 'M1BedroomUnits', 'M1BedroomRent', 'M2BedroomUnits', 'M2BedroomRent', 'M3BedroomUnits', 'M3BedroomRents', 'MEfficiencyUnits', 'MEfficiencyRent', 'MHeatPaid', 'MleaseInfo', 'LAceragePrice', 'LDeedRestrictions', 'LElevations', 'Type', 'Subtype', 'CBays', 'CTotalBuildings', 'CDock', 'CElectricPower', 'CRailService', 'CTruckDoors', 'CWarehouse', 'IMXA', 'IMXB', 'IMXC', 'IMXD', 'IMXE', 'IMXF', 'IMXG', 'IMXH', 'IMXI', 'IMXJ', 'IMXK', 'IMXL', 'IMXM', 'IMKN', 'IMXO', 'IMXP', 'IMXQ', 'IMXR', 'IMXS', 'IMXT', 'CommentA', 'CommentB', 'CommentC', 'CommentD', 'CommentE', 'CommentF', 'CommentG', 'CommentH', 'CommentI', 'CommentJ', 'CommentK', 'CommentL', 'CommentM', 'CommentN', 'CommentO', 'CommentP', 'CommentQ', 'CommentR', 'CommentS', 'CommentT', 'ElementarySchool', 'MiddleSchool', 'HighSchool', 'OpenHouseDate', 'OpenHouseTime', 'ListingType', 'SoldPrice', 'SoldDate', 'LeaseTerm', 'TAgents_ID', 'AgentUser', 'AgentName', 'agentImageFile', 'agentPhone1Type', 'agentPhone1Num', 'agentPhone2Type', 'agentPhone2Num', 'AgentBio', 'Designations', 'OfficeAffiliation', 'AgentEmail', 'HOGC_OID', 'BranchAfilliation', 'OfficeName', 'OfficeContact', 'O_StreetAddress', 'O_StreetCity', 'O_StreetCounty', 'O_StreetState', 'O_StreetZipCode', 'O_WebPageAddress', 'O_Status', 'OfficePhone', 'FaxPhone', 'TOffices_Longitude', 'TOffices_Latitude', 'Cordinates', 'ID1', 'BrandCode', 'BrandLogo', 'AgentEmailAdress', 'AgentSite']});
//-->
</script>
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="Lightbox/css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="JavascriptFiles/Slideshow2r113/Slideshow 2!/js/mootools.js"></script>
<script type="text/javascript" src="JavascriptFiles/Slideshow2r113/Slideshow 2!/js/slideshow.js"></script>
<script type="text/javascript" src="JavascriptFiles/Slideshow2r113/Slideshow 2!/js/slideshow.kenburns.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'{rsListing::IMXA}': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
'{rsListing::IMXB}': { caption: 'A Ceibu tree.' },
'{rsListing::IMXC}': { caption: 'The view from Volcano Maderas.' },
'{rsListing::IMXD}': { caption: 'Beer and ice cream.' }
};
var myShow = new Slideshow.KenBurns('show', data, {controller: true, height: 400, thumbnails: false, width: 300});
});
//]]>
</script>
</head>
_V11
_V11Correct answer
Participating Frequently
December 18, 2008
thats not going to work that way. You cant populate javascript variables with Spry that way. You must use the dataset in question using datasetname.getData();

that returns the dataset array where you can loop through and find the correct files. Also your script is wrapped around a domready event which is useless as it needs to wait till the dataset is completly ready. So its better to execute that code using observers.

the observer onPostLoad would be good for this.

datasetname.addObserver({
onPostLoad:function(ds,data){
// do your stuff here.
}
});