Styling Spry Gallery Captions Within Photos.xml
My Spry gallery is working just fine other than I'd like to use italics within some of my image captions. I noticed this line of code in photos.xml.
<italics font = "georgia"> </italics>
I'm wondering if this alludes to the fact that I should be able to use italics selectively without writing any XSLT (I'm not very experienced in that department).
Any advice appreciated.
Hi Flat Top,
perhaps, you need a program that understands the structure of
jpegs like exiftool. Momentarily i use a powershell script:
get-childitem images\*.jpg |
foreach {
$image = [String]::Concat("Images\", $_.name)
$thumb = [String]::Concat("Thumbs\", $_.name)
perl exiftool.pl -c "%d deg %.4f min" -p FmtImage.txt $image
| Out-File xml.xml -append
perl exiftool.pl -c "%d deg %.4f min" -p FmtThumb.txt $thumb
| Out-File xml.xml -append
with FmtImage.txt:
<photo
path = "$FileName"
width = "$ImageWidth"
height = "$ImageHeight"
Kommentar = "$Comment"
GPSLatitude = "$GPSLatitude, $GPSLatitudeRef"
GPSLongitude = "$GPSLongitude, $GPSLongitudeRef"
GPSPosition = "$GPSPosition"
Hersteller = "$Make"
Modell = "$Model"
ISOSpeedRatings = "$ISO"
Date_TimeOriginal ="$DateTimeOriginal"
F_Number = "$FNumber"
ExposureTime = "$ExposureTime"
FocalLength ="$FocalLength"
Flash = "$Flash"
and FmtThumb.txt:
thumbpath = "$FileName"
thumbwidth = "$ImageWidth"
thumbheight = "$ImageHeight">
</photo>
this generates most of the photos.xml. Not automated are in
the moment some problems with the german Umlauts and with the
coordinates to bring them in a form understanable by google maps.
Perhaps that might help you.
I have no knowledge of php or Asp, my provider doesn't allow
it.
Greetings from Germany
Hannes Löhr
Similar Messages
-
Spry Gallery - photos.xml question
Is there a way to generate the "photos.xml" file from a
folder of images automatically. It seems like a lot of hand coding
in the XML file say if you have a gallery with 20 images.Hi Flat Top,
perhaps, you need a program that understands the structure of
jpegs like exiftool. Momentarily i use a powershell script:
get-childitem images\*.jpg |
foreach {
$image = [String]::Concat("Images\", $_.name)
$thumb = [String]::Concat("Thumbs\", $_.name)
perl exiftool.pl -c "%d deg %.4f min" -p FmtImage.txt $image
| Out-File xml.xml -append
perl exiftool.pl -c "%d deg %.4f min" -p FmtThumb.txt $thumb
| Out-File xml.xml -append
with FmtImage.txt:
<photo
path = "$FileName"
width = "$ImageWidth"
height = "$ImageHeight"
Kommentar = "$Comment"
GPSLatitude = "$GPSLatitude, $GPSLatitudeRef"
GPSLongitude = "$GPSLongitude, $GPSLongitudeRef"
GPSPosition = "$GPSPosition"
Hersteller = "$Make"
Modell = "$Model"
ISOSpeedRatings = "$ISO"
Date_TimeOriginal ="$DateTimeOriginal"
F_Number = "$FNumber"
ExposureTime = "$ExposureTime"
FocalLength ="$FocalLength"
Flash = "$Flash"
and FmtThumb.txt:
thumbpath = "$FileName"
thumbwidth = "$ImageWidth"
thumbheight = "$ImageHeight">
</photo>
this generates most of the photos.xml. Not automated are in
the moment some problems with the german Umlauts and with the
coordinates to bring them in a form understanable by google maps.
Perhaps that might help you.
I have no knowledge of php or Asp, my provider doesn't allow
it.
Greetings from Germany
Hannes Löhr -
I have added a caption to the photos.xml file and have not
been able to get it to display below the picture. Can someone
please help me with the code. I am using the code from the Photo
Gallery demo.Hi djbaird,
In the future, you might want to give us a bit more info,
like how you added your caption to the XML file (what you called
the attribute name, or what tag you added).
If you added it as an attribute like this, to each photo
node:
<photo path = "china_01.jpg" width = "263" height = "350"
thumbpath = "china_01.jpg" thumbwidth = "56" thumbheight = "75"
caption="The Great Wall!"></photo>
You would then add your caption somewhere underneath the main
image like this:
<div
spry:detailregion="dsPhotos">{@caption}</div>
The reason I use a detail region is because as you click on a
thumbnail, the gallery code sets the current row of the dsPhotos
data set to the currently selected photo, using a detail region
allows the region to update whenever the dsPhotos data changes, or
the current row of dsPhotos changes.
--== Kin ==-- -
SPRY GALLERY STATIC - main image caption from alt attribute?????
I have been searching and digging for an answer to this question, but nothing comes up... the web , discussions, spry documentation... there is no joy to be had where the static gallery is concerned.
Please, could someone here enlighten me? I am trying to figure out how to add captions with static links. I have a working version of the gallery with thumbnails embedded on the page, but am stuck trying to bring the ALT attribute into the main image.
I have just finished a redesign of my boyfriend’s site, which is image heavy and uses the dynamic gallery in many of its pages (no problem with captions there). I am trying to replace the XML with static content for usability, tracking and general search engine issues. I could post a link to my static version if this helps clarifying the problem.
Help would be hugely appreciated.Please read what I am writing to you.
SparklyArt wrote:
Thank you Ben, for your informative reply and link!
I can see the advantages of an html dataset, it makes a lot of sense, but the problem I am trying to solve right now is due to the fact that the spry gallery static does not use any dataset at all, which is actually great, but I can’t find any information on how to add titles to the main images.
Maybe this will clarify... my test page < http://www.theoland.com/art/spryGalleryStatic.htm > is based on this example:
< http://labs.adobe.com/technologies/spry/demos/gallery_pe/static/china.html > - here, the embedded thumbnails are linked directly to the main images... no xml, no dataset... but, unfortunately, no titles either... are there any scripts that would help solve this? Can the gallery_init.js be modified to grab the alt or title tag?
The site has validated as it is (gallery test not included), but the dynamic pages are definitely not search engine friendly. The static gallery_pe would be a lovely alternative.
Can you help?
Even though you might not think so, your static gallery does have a database of sorts albeit in the form of images placed in a folder. This is called a flat database because it does not have the different relationship tiers of the likes of MySQL.
To update your database, you simply add/remove/change an image and to link that data to your web page you add/remove/change the link; exactly the same process as with MySQL.
The problem that you are faced with is that, except for the name, width, height, size, encode type, there is no information attached to the image that you can use for a caption or title.
That is why I suggested using an HTML table so that you can marry your image up to some useful information. No JavaScript required! These sorts of tables have been in use for more two decades to show the same as what you are showing in your static gallery; but without the fancy features that JavaScript (in our case Spry) adds.
These pages give us the ultimate in search engine intimacy.
Having established the above, we make use of the HTML table to create a Spry dataset on the same page. Nothing else changes.The Spry dataset can then be used to incorporate the fancy features that you so desparately want all without XML.
JavaScript (in our case Spry) data is not search engine friendly, but because we already have the data in our static HTML table we do not have to wory about that.
The end result is a good looking site that is search engine friendly.
Ben -
Gallery Demo - font info in photos.xml
<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
date = "4/11/2006">
<sitename>Standard Parking</sitename>
<photographer></photographer>
<contactinfo></contactinfo>
<email></email>
<security><![CDATA[]]> </security>
<banner font = "Arial" fontsize = "3" color =
"#F0F0F0"> </banner>
<thumbnail base ="thumbnails/" font = "Arial" fontsize =
"4" color = "#F0F0F0" border = "0" rows = "3" col = "3">
</thumbnail>
<large base ="images/" font = "Arial" fontsize = "3" color
= "#F0F0F0" border = "0"></large>
<photos id = "images">
What is all the font stuff for? Why would you have this stuff
here instead of using CSS to control the appearance of the data via
a rule applicable to the element in which it appears?
Is it ok to remove this extra stuff?Actually, almost all (if not absolutely all) the PS CS2 web
galleries
generate XML files.
The font info is included in the XML file because it's a user
generated
choice from a drop-down menu in the Web Gallery creation
dialog. So
Photoshop writes it there in order to read it back in to
whichever
gallery template has been chosen.
kinblas wrote:
> The photos.xml file that is used by the gallery demo was
generated from
> Photoshop CS2 using their Flash Gallery ... there are
only 2 galleries that
> generate the XML file.
>
> I believe they use these style attributes to control the
look of the Flash app
> that displays the album. We don't use any of that stuff
inside our demo. You
> can strip it out if you'd like.
>
> --== Kin ==--
> -
Spry gallery positioning photos
Hi,
I am pretty new to dreamweaver and I am creating my first website.
I've created a spry gallery using the tuturial, which is looking good so far.
However I was wondering if there is any way of having the large photo centered?
Thanks,
Phil.Hi,
Just want to clarify, it is the large picture that displays on the right when clicking on the thumbnail. I was hoping i could have this centered, when displaying landscape and portrait photos.
If anyone has any ideas it would be appreciated as I am hoping to upload my website soon and this is one of the last things i need to do.
thanks,
phil -
Sorry for the rudimentary question, but I want to actually create a spry gallery like the one in the demos, but I am lost as to where to start (using Dreamweaver).
Thanks, DonHi,
The basis of the photo gallery is a spry master region and a detailregion.
Let's say your spry dataset is called photos.
The thumbnails within the master region are just like something below
<div spry:region="photos">
<div spry:repeat="photos">
<img src="{thumbURL}" spry:setrow="photos"/>
</div>
</div>
and the current image being displayed sits within this markup.
<div spry:detailregion="photos">
<img src="{imageURL}"/>
</div>
When you click on the thumbail it sets the current row of the photos dataset to that of the thumbnail. The detailregion automatically listens for this changes to updates it markup to show the matching full size photo for that row.
You then add some classes or div ids and css to style your photos and you have your basic photo gallery.
If you want to be able to select different galleries then you have different XML datasets for each gallery and on clicking the appropriate link or select item you run code like below
photos.setURL("gallery1.xml");
photos.loadData();
photos.setURL("gallery2.xml");
photos.loadData();
photos.setURL("gallery3.xml");
photos.loadData();
This will reload both the master region (thumbnails) and the detailregion (currently selectedphoto).
For the slideshow effects you just use Spry effects and the setrow functionality triggered via a timer (setInterval) i.e. here's some sample code from one of my pages
function pauseShow()
clearInterval(StartSlideTimer);
Spry.$$("#slideshowPlaying")[0].innerHTML = "";
function startShow()
clearInterval(StartSlideTimer);
StartSlideTimer = setInterval("fadeOutContentThenSetRow()", 6000);
if (shuffle)
Spry.$$("#slideshowPlaying")[0].innerHTML = "<p>You are playing the slideshow in shuffle mode</p>";
You can see the working page here www.thehmc.co.uk/photo.html
Our club pages works with our photos and albums on our Picasa account because that way you don't need to produce the xml, Picasa does that via it's rss feeds.
Feel free to use any of the code I've written in your pages or start with a basic version as I've outlined at the top - that's how the above page started out then I styled it with css and added the fancier stuff once the basics were working.
Regards
Phil -
I've been trying to add captions to the photo album demonstrated in the Spry demo page (http://labs.adobe.com/technologies/spry/demos/gallery_pe/dynamic/index.html).
Applying the method suggested in DBooth's tutorial for an earlier version of a Spry album, I added an attribute, "description", to the <photo> element in the xml. In the html, I placed {@description} immediately beneath the image in div="picture". This worked in the DBooth version I built, but not in this one, following the code for the dynamic version above.
Here's what I have:
http://www.lumina-media.com/gallerytest/wjgallery2.html
(Ignoring styling for the time being, the description tag shows up in the padding area. I'll deal with css later.)
But it doesn't work. Can anyone help me?
I'm attaching both the html and xml files.
Thank you in advance.
NickWhen the thumbnail is clicked we want the detailed region updated along with with the main image,
I think this section of code is where it belongs.
<div id="thumbnails" spry:region="dsPhotos">
<div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}" /></a></div>
<p class="ClearAll"></p>
</div>
</div>
<div id="picture">
<div id="mainImageOutline"><img id="mainImage" alt="main image" src=""/></div>
<div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}" /></a></div>
xml file below:
<thumbnail base ="../../gallery/galleries/china/thumbnails/" font = "Arial" fontsize = "4" color = "#F0F0F0" border = "0" rows = "3" col = "5"> </thumbnail>
<large base ="../../gallery/galleries/china/images/" font = "Arial" fontsize = "3" color = "#F0F0F0" border = "0"> </large>
<photos id = "images">
<photo
path = "china_01.jpg"
width = "263"
height = "350"
thumbpath = "china_01.jpg"
thumbwidth = "56"
thumbheight = "75"
caption = "Caption 1a">
</photo>
<photo
path = "china_02.jpg"
width = "350"
height = "263"
thumbpath = "china_02.jpg"
thumbwidth = "75"
thumbheight = "56"
caption = "Caption 2">
</photo>
<photo
path = "china_03.jpg"
width = "350"
height = "263"
thumbpath = "china_03.jpg"
thumbwidth = "75"
thumbheight = "56"
caption = "Caption 3">
</photo>
</photos>
</gallery>
OK, some confusion here, description is now "caption", this was changed in XML file in this thread.
The xml file is above:
Then in my html file I have only added:
<div spry:detailregion="dsPhotos">Hello{caption}</div>
Then my gallery_xds.js file looks like:
function PhotosFilter(ds, row, rowIndex)
row.path = row["large/@base"] + row["photos/photo/@path"];
row.thumbpath = row["thumbnail/@base"] + row["photos/photo/@thumbpath"];
row.caption = row["photos/photo/@caption"];
return row;
The result gives me the "Caption1" once and it is the same for all, no refresh.
Any help would be greatly appreciated.
WBell
Message was edited by: W_Bell -
Movie not displaying in spry gallery
Hi,
I have a project which needs to displays movies instead of pictures gallery, I am using your code example.
Do I need to add any other code or change code before this will display properly, its and intranet so I can't show just add the code as below?
When i view the page the url only shows up, no image!
Can anyone help me please.
thanks
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Capita Charity Week - 2 - 6 November 2009</title>
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<link href="CharityWeek.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="Movies/includes/xpath.js"></script>
<script type="text/javascript" src="Movies/includes/SpryData.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("Movies/movies.xml", "gallery/photos/photo");
</script>
<style type="text/css">
<!--
img.thumbs {
float:left;
height:60px;
width:60px;
margin-right: 2px;
margin-bottom: 2px;
border: solid black 1px;
cursor:pointer;
#thumbnail {
position:absolute;
left:372px;
top:294px;
width:296px;
height:273px;
z-index:1;
#main {
position:absolute;
left:560px;
top:292px;
width:491px;
height:315px;
z-index:2;
-->
</style>
<link href="CharityNav.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColLiqLtHdr">
<div id="thumbnail" spry:region="dsGallery"> <img src="Movies/thumbnails/{@thumbpath}" spry:repeat="dsGallery" class="thumbs"onclick="thumbs" spry:setrow="dsGallery"/></div>
<div id="main" spry:detailregion="dsGallery"><img src="Movies/images/{@path}"/><br/>
Name:{@path} </div>
<div id="container">
<div id="header">
<div id="Logo"> <img src="images/logo.gif" alt="Macmillan Cancer Support" width="156" height="44" /> </div>
<div id="MacLogo">
<p><img src="images/macmillanlogo.gif" alt="Macmillan Cancer Support" width="144" height="60" /> </p>
</div>
<h1><br />
<br />
Charity Week </h1>
<h1>2 - 6 November 2009</h1>
</div>
<!-- end #header -->
<div id="Nav">
<ul>
<li class="Grey"><a href="index.html" title="Home" target="_self" >Home</a></li>
<li class="Grey"><a href="AboutMacmillan.html" title="About Macmillan" target="_self">About Macmillan</a></li>
<li class="Grey"><a href="Fundraising.html" title="Fundraising" target="_self" >Fundraising</a></li>
<li class="Grey"><a href="Games.html" title="Games" target="_self">Games</a></li>
<li class="Grey"><a href="Quiz.html" title="Quiz" target="_self">Quiz</a></li>
<li class="Grey"><a href="Auction.html" title="Auction" target="_self">Auction</a></li>
<li class="Orange"><a href="Capita_got_Creative.html" title="Capita's got creativity" target="_self">Capita's got creativity</a></li>
<li class="Grey"><a href="Nominate.html" title="Nominate a Hero" target="_self">Nominate a Hero</a></li>
<li class="Grey"><a href="create_your_own_poster.html" title="Create your own posters" target="_self">Create your own posters</a></li>
<li class="Grey"><a href="FormsPRPack.html" title="Forms & PR pack" target="_self">Forms & PR pack</a></li>
<li class="Grey"><a href="Contact.html" title="Contacts" target="_self">Contacts</a></li>
</ul>
<!-- end #sidebar1 -->
<!-- end #menu -->
</div>
<div id="DGreyline">
<!-- end #DGreylines -->
</div>
<div id="sidebar1">
<div id="sidebarTitle">
<p>In this section</p>
<!-- end #sidebarTitle -->
</div>
<div id="menu7">
<ul>
<li><a href="Capita_got_Creative.html" title="Capita's got Creativity" target="_self">Capita's got Creativity</a></li>
<li><a href="CapitagotCreative_Images.html" title="Upload Images" target="_self">Upload Images</a></li>
<li><a href="CapitagotCreative_movies.html" title="Upload Movies" target="_self">Upload Movies</a></li>
<li><a href="CapitagotCreative_short_stories.html" title="Upload Short Stories" target="_self">Upload Short Stories</a></li>
<li><a href="DrawingComp.html" title="Drawing competition" target="_self">Drawing Competition</a></li>
</ul>
</div>
</div>
<!-- end #sidebar1 -->
<noscript>
</noscript><div id="mainContent">
<h2>Upload Movies</h2>
<p class="newdesignFin"> </p>
<p align="left"> </p>
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
<div id="Greyline">
<!-- end #Greylines -->
</div>
<div id="Greenline">
<!-- end #Greenlines -->
</div>
<div id="footer">
<p>© 2009 CAPITAconnect. All rights reserved. </p>
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
</body>
</html>Could you post a online url instead? this way we can acutally see where it goes wrong with your files.
-
Recently found Don Booth's Spry photo gallery tutorial and all worked fine. But when it displays the photos online it listes the photo name as a .jpg.
Is there a command I can add or change to make it show what I want instead of the file name.
example from my photo.xml file
<photo
path = "Frontcover.jpg"
width = "263"
height = "350"
thumbpath = "Frontcover.jpg"
thumbwidth = "56"
thumbheight = "80">
</photo>Have you had a look at Spry UI?
Spry UI is a complete rebuild of the Spry Widget framework. Spry UI is more powerful, consistent and customizable than before. One of the major changes is that all Spry UI now make use of the same base class. Rather than creating a base for each widget, its now broken up in to "components".
All Spry UI widgets come with a plugin based architecture so you can extend the existing functionality simply by adding a plugin to your widget.
You can find more info about Spry UI at the Spry Site.
http://labs.adobe.com/technologies/spry/ui/
I hope this helps.
Ben -
My other question is about the photos.xml (and gallery.xml)
file.
I don't own ColdFusion, and can't afford it. I do Dreamweaver
8, and Photoshop Elements 4 (for the Mac).
Before I embark on writing something, is there any utility I
can use to create these XML files? Typing all this information in
is tedious and error-prone. It also makes my (hopefully
forthcoming) photo site difficult to maintain.
Thanks again
Carolyn AnnGood question. I installed PE4 and as I had hoped, the Web
Photo Gallery creator outputs a XML file of the image information.
This is the kind of file we used from Photoshop when we first
started making Spry.
So you can generate it from that, but you will notice that
they use <image> as their node name. You will have to change
that to <photo> or something other than <image> since
Safari causes trouble with that name in it's processing of Spry.
Hope this helps.
Don -
Spry Gallery, adding content box on thumbnail click
I've attached the html for the page I'm working on. Essentially, it's using the spry gallery. Onclick, the main image is updated dynamically, what I also want to happen onclick, is for a separate DIV with some text in it to be updated with new text. I had thought that by editing the photo.xml and simply adding another tag labeled 'dtext' in each photo area, I could refer back to it. While this does work on the initial page load, it doesn't update onclick.
Thoughts
Website can be viewed here: http://www.thesilversandbox.net/purple/purple_gallery.html
uploaded, a .zip file containing the .html and the photo.xml file being used. You'll note on the web page the blue placeholder section is where I'd like the text to appear and in the .xml file you'll see the 'dtext' tag which I'd like to be where I enter the product descriptions that change on thumbnail click.
Thanks,Can someone comment on this please? Essentially what I'd like to know is if it's possible, using only the Spry Gallery, to add an additional XML comment into the "photo.xml", which contains some text. Then, call this text upon each thumbnail-click event to have a small description appear when the picture changes.
I realize there are content-widgets for this, but they are heavy, all I want is a little comment box, everything else is working properly.
Thoughts?
/bump -
How do i create a styled spry mysql driven menu using dreamweaver cs4?
How do i create a styled spry mysql driven menu using dreamweaver cs4?
I have cs4. I gave up on using MS sql as a datasource. I finally got a php successfull connection in my PHP web page.
I would like a nice video tutorial for creating a dynamic menu.
I guess i can style it by attaching a css file to the page. Are their any already designed css files out there in some online area?
i am not a good designer. so i would like to simply have a collection of menu_style.css files and choose what looks good.
But first i need to build the spry menu from the mysql database.
Any help is apprechiated.
My first choice was to maintain the data in an MS sql server file. If i could directly attach to an ms sql datasource then that would be the best option.
I dont think i want to have to re-generate an XML datasource each time i add or modify the menu. I would like to maintain the MS Sql or mySql file instead.
If i could generate an XML datasource from the MS Sql database then I may even prefere that, but i have spent a lot of time trying to figure out how to do that and not had any success. So i prefere working in MS sql but would settle for mySql if i had to.
Thanks
JerryTo create a dynamic menu take a look here http://labs.adobe.com/technologies/spry/samples/menubar/MenuFromNestedData.html#
The XML file for the above menu looks like this
<?xml version="1.0" encoding="utf-8"?>
<items>
<item id="0001" type="donut">
<name>Cake</name>
<ppu>0.55</ppu>
<batters>
<batter id="1001">Regular</batter>
<batter id="1002">Chocolate</batter>
<batter id="1003">Blueberry</batter>
<batter id="1003">Devil's Food</batter>
</batters>
<topping id="5001">None</topping>
<topping id="5002">Glazed</topping>
<topping id="5005">Sugar</topping>
<topping id="5007">Powdered Sugar</topping>
<topping id="5006">Chocolate with Sprinkles</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
</item>
<item id="0002" type="donut">
<name>Raised</name>
<ppu>0.55</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5001">None</topping>
<topping id="5002">Glazed</topping>
<topping id="5005">Sugar</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
</item>
<item id="0003" type="donut">
<name>Buttermilk</name>
<ppu>0.55</ppu>
<batters>
<batter id="1001">Regular</batter>
<batter id="1002">Chocolate</batter>
</batters>
</item>
<item id="0004" type="bar">
<name>Bar</name>
<ppu>0.75</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
<fillings>
<filling id="7001">
<name>None</name>
<addcost>0</addcost>
</filling>
<filling id="7002">
<name>Custard</name>
<addcost>0.25</addcost>
</filling>
<filling id="7003">
<name>Whipped Cream</name>
<addcost>0.25</addcost>
</filling>
</fillings>
</item>
<item id="0005" type="twist">
<name>Twist</name>
<ppu>0.65</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5002">Glazed</topping>
<topping id="5005">Sugar</topping>
</item>
<item id="0006" type="filled">
<name>Filled</name>
<ppu>0.75</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5002">Glazed</topping>
<topping id="5007">Powdered Sugar</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
<fillings>
<filling id="7002">
<name>Custard</name>
<addcost>0</addcost>
</filling>
<filling id="7003">
<name>Whipped Cream</name>
<addcost>0</addcost>
</filling>
<filling id="7004">
<name>Strawberry Jelly</name>
<addcost>0</addcost>
</filling>
<filling id="7005">
<name>Rasberry Jelly</name>
<addcost>0</addcost>
</filling>
</fillings>
</item>
</items>
Then remains the manner in which you create the XML file which can be found here http://labs.adobe.com/technologies/spry/samples/utils/query2xml.html
One you have your menu up and running, you will be able to apply styles and effects -
Help with Spry Rating Widget within a Spry Repeating Region
My link http://www.youthinkyougotitbad.com
This is a long question, but it seems to me if answered somewhere it could help alot of people in the spry community creating comment boards as it uses three important spry widgets: rating, repeating, and tabbed panels. I am trying to use spry rating widget within a spry repeating region within a spry tabbed panel with xml. I was trying to go with the pulse light script (http://forums.adobe.com/message/3831721#3831721) but Gramps told me about the spry rating widget. But I have ran into a couple more problems. First, I couldnt find that much information on the forums or online about how to do the php page with the spry rating widget. None of these have any information on how to do it:
http://labs.adobe.com/technologies/spry/articles/rating_overview/index .html
http://labs.adobe.com/technologies/spry/articles/data_api/apis/rating. html
http://labs.adobe.com/technologies/spry/samples/rating/RatingSample.ht ml
And it seems that the official examples are so poor (or I am just ignorant, which def could be a possiblity) it shows
to set the initial rating value from the server, but uses a static value of 4
http://labs.adobe.com/technologies/spry/samples/rating/RatingSample.html
<span id="initialValue_dynamic" class="ratingContainer">
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<input id="spryrating1_val" type="text" name="spryrating1" value="4" readonly="readonly" />
<span class="ratingRatedMsg sample">Thanks for your rating!</span>
</span>
<script>
var initialValue_dynamic = new Spry.Widget.Rating("initialValue_dynamic", {ratingValueElement:'spryrating1_val'});
</script>
I finally found a site that has the php and mysql setup.
http://www.pixelplant.ro/en/articles/article-detail/article/adobe-widgets-for-download.htm l
But its not perfect. It has the same problem that I ran into with Pulse light, that you had to use php echo within the spry repeating region to set the initial value from the server:
<span id="spryrating1" class="ratingContainer">
<span class="ratingButton"></span>
<input type="text" id="ratingValue" name="dynamic_rate" value="<?php echo $row['average']?>"/>
</span>
<script type="text/javascript"
var rating1 = new Spry.Widget.Rating("spryrating1", {ratingValueElement:'ratingValue', afterRating:'serverValue', saveUrl: 'save.php?id=spryrating1&val=@@ratingValue@@'});
</script>
So instead, I tried with three of my panels (www.youthinkyougotitbad.com) to get the average rating from xml by using the following queries:
Recent
Returns the blurts in most recent order along with average rating
SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt Group By Id_blurt ORDER BY Blurt.`Date` DESC
Wet Eyed
Returns the blurts in highest ratings order along with the average rating
SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt AND ratings.rating_value > 0.1 Group By Id_blurt ORDER BY average_r Desc
Dry Eyed
Returns the blurts in lowest rating order along with the average rating
SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt AND ratings.rating_value > 0.1 Group By Id_blurt ORDER BY average_r
These all return the correct xml in the correct order.And they return the average rating of each blurt which I can send to my page with xml.
My first question is that I dont know how to configure the query on my fourth panel Empathized & Advised the same way because it already has a Group By for the Comment Id.
SELECT `Comment`.id_Blurt, COUNT(*) as frequency, Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date FROM Blurt, `Comment` WHERE Blurt.Id_blurt = `Comment`.id_Blurt GROUP BY `Comment`.id_Blurt ORDER BY COUNT(*) DESC";
Not sure if you guys need more information to understand that all, if so just ask.
So after I get my average value through xml to the first three panels, I set my spry repeating region up like this:
(Blurt panel)
<div spry:region="pv1" spry:repeatchildren="pv1">
<div class="blurtbox">
<!-- most recent blurt tab-->
<h3> "{pv1::Blurt}"</h3>
<p> Blurted from {pv1::Location} at {pv1::Date}</p>
<p>Empathize or Advise about {pv1::Name}'s Blurt #<a href="detailblurt.php?blurtid={pv1::Id_blurt}"> {pv1::Id_blurt}</a></a></p>
<span id="{pv1::Id_blurt}" class="ratingContainer">
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingRatedMsg">Thank You! Your tears have been tallied.</span>
<input type="text" id="ratingValue" name="dynamic_rate" value="{pv1::average_r}"/>
</span>
<script type="text/javascript">
// overview of available options and their values:
// http://labs.adobe.com/technologies/spry/articles/rating_overview/index.html
var rating1 = new Spry.Widget.Rating("{pv1::Id_blurt}", {ratingValueElement:'ratingValue', afterRating:'serverValue', saveUrl: 'save.php?id={pv1::Id_blurt}&val=@@ratingValue@@'});
</script>
<br/>
</div>
</div>
Ok, it registers the right vote in the database with the right blurt id each time. But I am having two problems so far:
One, even though {pv1::average_r} returns the correct average through xml, it doesn't show the initial rating value for each of the repeating blurts. It seems to show the first one correct, and then just repeat that same value to the other ones that follow. I just dont understand since it can get the correct server value right after you vote (afterRating:'serverValue), that I can't manipulate spryrating.js in some way that I could just replace 'ratingValue' in ratingValueElement:'ratingValue' with something to give me the initial server value.
Two: Is even more mysterious to me, if you play around with voting on the site, sometimes you are unable to vote on different blurts. Its weird. It seems like that the javascript is completely off just on those blurts. And sometimes its a whole row, sometimes none. But so far its never a problem on the first tabbed panel (Recent), only on the other three. As far as I know, the coding is exactly the same in each tab's repeating region except for the different xml input.
And, now on the live server, sometimes the pics of tears used to voting dont show up until you click.
Any help on those three questions (how to query the fourth panel, how to show the initial server value, and the glitches with voting) would be greatly appreciated!! I looked pretty hard on adobe forums and other sites, and didnt see much on how to really use the spry rating widget with php and xml.
Thanks!!Update:
Ok, the first query on the Recent tab doesnt work for me because it wont show unless its already voted, and since these are supposed to be new blurts, that kind of breaks the whole site:
"SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt Group By Id_blurt ORDER BY Blurt.`Date` DESC";
So I replaced it with what I originally had.
"SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date FROM Blurt ORDER BY Blurt.`Date` DESC";
But this doesn't provide me with the initial average rating:( -
I have a website that uses Spry Data XML DataSet to list common pests for the current month. http://www.shspestcontrol.com/
Each month's list of pests is in a separate xml file (e.g. pests-august.xml)
Rather than manually updating the file name each month, can it be setup to automatically change the name
For instance on January 1st, file name changes to pests-january.xml, Feb 1st changes to pests-february.xml. etc.
<script type="text/javascript">
<!--
var dsPests1 = new Spry.Data.XMLDataSet("xml_files/pests-august.xml", "gallery/pests/pest");
//-->
</script>
Any advice if this can be done and if so how to go about doing it would be much appreciated
Thanks, Toni<script>
var dsPests1 = new Spry.Data.XMLDataSet("pests-september.xml", "gallery/pests/pest");
function setPestsFile(){
var months = new Array(13);
months[0] = "january";
months[1] = "february";
months[2] = "march";
months[3] = "april";
months[4] = "may";
months[5] = "june";
months[6] = "july";
months[7] = "august";
months[8] = "september";
months[9] = "october";
months[10] = "november";
months[11] = "december";
var now = new Date();
var monthnumber = now.getMonth();
var monthname = months[monthnumber];
dsPests1.setURL("pests-"+monthname+".xml");
dsPests1.loadData();
window.onload = setPestsFile();
</script>
Maybe you are looking for
-
Spry Accordion doesn't work properly
I uploaded the site the other night and it worked out just fine. I made a change in some spacing between two words and added a letter to a word. Then all of the sudden it did not work on my next upload. The link to the page is http://www.tc.umn.edu/~
-
I am seeking help in trying to save a purchased movie, in order to download another, I am not sure how to save the purchased one in order to not have to re purchase it again, where do I save it to?
-
After update lion 10.7.3 has something wrong with my screen
hello, i have proplem with my screen, after updated lion to 10.7.3 has a line cross my
-
I can't get the old account out my update
I can not get the old account off even if I sign in on my new account the old still show up and I can't update how do I get the old one out my iPad I tried signing out and in, my new account is in but when I try to update something an old account pop
-
I received an error "After Effects can't continue; unexpected failure at startup"
to start out, i have already tried repairing permissions, and reinstalling (correctly) AE. I run a Macbook Pro 15" late 2011, and mountain lion. I recently migrated my 500Gb to a new 1Tb internal SATA drive. This is the only application from Adobe th