Spry China/Egypt/Paris Gallery Example

Hello!
I keep seeing the very cool example of creating a photo
gallery with Spry but the files are not available for download:
http://labs.adobe.com/technologies/spry/demos/gallery/index.html
(the .js includes...)
am I missing something?
thanks!

thanks for the quick reply! however, I went on the demos and
there are no zip files to extract:
http://labs.adobe.com/technologies/spry/demos/

Similar Messages

Display a .swf file in the Gallery example

Is it possible to display a .swf file instead of a .jpeg in
the Gallery example? Any help would be appreciated.

You "CAN" do it, but it would probably be kind of clunky. A
detailed region rewrites the code and in theory you should be able
to write in a new SWF. I don't mean, write in a new "location" but
re-write out the entire tag.
Hope this helps.

Photo-gallery examples / how to ?

Is there a tutorial on how to create a Spry photo-gallery, or
do we just
view the source code for the example page at the Adobe site?
Which relevant
files are need to make this work?
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/

quote:
Originally posted by:
n2dreaming
Anyone? I'd like something besides the play/pause text --
basically, using a background-image... how can I tap into whatever
it is that toggles the text to get it to toggle the css instead?
here's a solution that seems to work for me:
1) look in the gallery.js file and find the StartSlideShow()
function
2) Find the two instances of playLabel.firstChild.data=
3) put a single space in there instead of play and pause
4) create your graphics for previous, next, play and pause
5) add IDs to your links in the #transport
<li><a> (#nextLabel, #prevLabel, #playLabel)
6) set up css rules to use your next, prev and pause graphics
as background-images, using this format:
#transport a#nextLabel:link, #transport a#nextLabel:visited {
background-image: url(sharedimages/next.gif);
background-repeat: no-repeat;
background-position: center center;
7) set up a :focus rule for a#playLabel:focus, (and :active
for IE) to use the play background-image:
#transport a#playLabel:focus, #transport a#playLabel:active {
background-image: url(sharedimages/play.gif);
background-repeat: no-repeat;
background-position: center center;

MX 6 - prob generating xml for gallery example

See
http://coolabah.com/spry/demos/gallery/xml.cfm
I have MX 6 and think this is a problem.
I can generate what looks like xml in the browser, but when I
try to save it to a file I get this sort of output for the above,
<style>
table.cfdump_wddx,
table.cfdump_xml,
table.cfdump_struct,
table.cfdump_array,
table.cfdump_query,
table.cfdump_cfc,
table.cfdump_object,
table.cfdump_binary,
table.cfdump_udf,
table.cfdump_udfbody,
table.cfdump_udfarguments {
font-size: xx-small;
font-family: verdana, arial, helvetica, sans-serif;
cell-spacing: 2;
etc.
Can anyone help?
Thanks,
Kate

You shouldn't search for line 145 into the CFM file but into
the answer that is sent to the browser. The resulting XML sent by
the CFM is invalid so you have to identify first the line 145 into
the response and than to look where the line is generated.
As Don did I opened the URL into Firefox and when the XML
error displayed I look into the source (View Source). The server
instead of serving a valid XML answer a HTML content which is not
correct. (Maybe a CF server error ?!)
Cristian

Spry Accordion and Flash Gallery

I am trying to insert a Flash photo gallery (created in Adobe Bridge) into one of the accordion panels of a Spry Accordion widget. When I use the widget 'out of the box', the gallery displays, but the set content height cuts off a third of it, including the navigation: http://twwwg.com/Pages/bogott/index3.html. When I set the constructor to allow variable panel heights, one problem goes away but the gallery does not display. http://twwwg.com/Pages/bogott/index2.html. The only difference is the addition of the option in the constructor call. Does anyone have an idea what is going wrong? Thanks. don Carlos.

Well, I solved this one myself. One of the posts on the sidebar resembled my issue sufficiently that I tried it. I pulled all the Flash code from the page and used the <object data> call. Worked like a charm. http://twwwg.com/Pages/bogott/index4.html

Spry XML Dataset Video Gallery Question

Hi there,
We are trying to create a video gallery using a Spry XML Dataset.
It's currently working in FF and Safari, but not working in IE6-7 or Opera.
Here is a link... http://www.rightsidedesign.com.au/test/tv.html
IE seems to display the content for a second, but it doesn't load the videos or text, but then it disappears.
The elements being fed via the dataset are the video, video description (at bottom right of video) and thumbnails
Can anyone give us a hint as to what we might be doing wrong??
We followed the tutorial at... http://www.coremediadesign.co.uk/web_design_tutorials/dreamweaver_tutorials/spry_image_gal lery_adobe.html
and replaced the image with an FLV player.
Thanks for your help in advance!

Hi there,
We are trying to create a video gallery using a Spry XML Dataset.
It's currently working in FF and Safari, but not working in IE6-7 or Opera.
Here is a link... http://www.rightsidedesign.com.au/test/tv.html
IE seems to display the content for a second, but it doesn't load the videos or text, but then it disappears.
The elements being fed via the dataset are the video, video description (at bottom right of video) and thumbnails
Can anyone give us a hint as to what we might be doing wrong??
We followed the tutorial at... http://www.coremediadesign.co.uk/web_design_tutorials/dreamweaver_tutorials/spry_image_gal lery_adobe.html
and replaced the image with an FLV player.
Thanks for your help in advance!

Web gallery examples

I'm thinking of publishing a web gallery as opposed to my current iweb photo pages, but I haven't seen any web galleries yet. Could someone post a link to some published web galleries so I can see what they look like, how well they work...? Thanks.

Just do one and wee what you think - if you don't like it delete it
Larry Nebel

Spry framework for ajax - video example Aquo

I have a problem displaying the xml code which has H1, H2
hard coded. How do i display this without the H1, H2.
If i swap this code for
<script src="../SpryAssets/SpryData.js"
type="text/javascript"></script>
for
<script src="../js/SpryData.js"
type="text/javascript"></script> it works but the repeat
region then stops working???
Any ideas

Don know a LOT better than me... but I think that when you
insert a spry table in a master region, it has a checkbox option
that asks if you want it to update a detail region when clicked. If
you check that, whatever data you put in that table will update the
detail region using the same dataset.
If you do that, you can probably look at the code for the
data in the table and see what he is talking about. The spry table
creates it automatically, but you can also hand code links that
update data regions too, which is what he is saying.
Did I get that right Don? ;)

Can I use US gift card in Egypt store for example

Can I use US gift card in Egypt store for example

No. iTunes/Mac App Store gift cards are only for the stores for the country in which they are sold. You cannot use them across regional/national boundaries.

Photo gallery links

another thing i'm having trouble figuring out.. would be
instead of using the dropdown box to select the different
galleries, to put them in plain text link form instead.. so, using
the default galleries as an example, it would be like::
China
Egypt
Paris
and each would be linked to their respective galleries.
though i'm not sure how to do that, because the code automatically
starts off with the 'China' gallery. any ideas?

*update*
well i followed the suggestion on
this
post, and i got the links to work as how i want them, but now i
also get this error message::
"Found a nested spry:region in the following markup. Nested
regions are currently not supported.
<h3 id="albumName"
spry:region="dsGallery">{sitename}</h3>
<div spry:region="dsGalleries"
spry:repeat="dsGalleries"> <a href="#"
onclick="dsGalleries.setCurrentRowNumber('{ds_RowID}');">{sitename}</a>
</div>"
i've tested it in both Firefox and Explorer, and the error
comes up at both places.
help?

Gallery modifications (hints wanted)

Hi,
I'm a newcomer in the area of web development but I've spent
a few years in VB development so I thought I'd give the Gallery a
try.
I've setup up my own gallery based on the demo example and it
works just fine. The web is not public yet, but it looks more or
less just like the samle with china/egypt/paris.
I'd like to make a few changes to it and I hope someone could
give me a few hints.
How do I:
1. generate the
xml automatically? I have thousands of photos that I'd like
to add to the gallery and so far I've created the xml files
manually in notepad. This question goes both for the galleries.xml
and most important the photos.xml.
2. Make the
thumbnails grow even more when I hover them?
3. Modify the
size and appearance of the PREV/PLAY/NEXT buttons?
4. Keep the html/js/css code separated from my photos? I
already have all my
photos stored on another drive. Is it possible to load the
pictures from where they are today= I've tried, but failed a few
times - it seems like it can't reach the files on E:\Pictures\...
when the html codes lies on D:\Web\Inetpub\Photos\.
Sorry if the level of the questions is a bit low but I hope
to get up to speed once I've spent some time in code land!

Hi Mik,
To generate the XML automatically, use server side scripting.
What I do in ColdFusion is use CFDirectory to read all the images
in the photos directory. This makes a query that I can them use to
dynamically generate the XML.
I can use this query to either use the CF page as the source
for the data set or the CF can generate the static XML page. I
prefer the former as it lets me add new photos to the directory
without having to regenerate the XML. But, if you want more meta
data in the XML, generating a static file might be better.
<cfset
path="#GetDirectoryFromPath(GetCurrentTemplatePath())##url.id#\images">
<cfdirectory directory="#path#" action="list"
name="photos" recurse="yes">

<cfxml variable="mydoc">
<gallery>
<photos path="<cfoutput>#url.id#</cfoutput>"
title="<cfoutput>#url.id#</cfoutput>" >
<cfoutput query="photos">
<photo caption="#name#" src="#name#" />
</cfoutput>
</photos>
</gallery>
</cfxml>

<cfprocessingdirective suppresswhitespace="yes">
<cfcontent type="text/xml" reset="yes">
<cfoutput>#mydoc#</cfoutput>
</cfcontent>
</cfprocessingdirective>


Similar things can be done with PHP or ASP.
For the thumbnail size, check the gallery code. The initial
size is set in the IMG tag. The growth size is set in the
onMouseOver behavior. 'thumbwidth' and 'thumbheight' are stored in
the XML file and dropped in by Spry. They can be hardcoded or
stored in the XML.
The image style is done with CSS. Check the CSS for the
#transport a:link rules. If you have Dreamweaver, click on a button
and check the CSS Panel.
One of the goals of Spry is that the markup is clear and
styling is done with CSS.
To have your photos stored on another drive, you are going to
have to configure the webserver to see the other drive as part of
the webroot. Depending on how the virtual web folder is set up, you
will have to use an absolute path to the other drive. Just depends
on the config.
Hope this helps.
Donald Booth
Adobe Spry Team

Nested data Accordion Gallery

Hi,
I'd like to know if anybody has tried to rebuild the adobe
spry gallery (china,egypt,paris) but using a spry menubar or a spry
accordion to navigate from one gallery to another. The gallery
should than be accessed from the submenu items using the nested
data utility. Everything display correctly but it's not possible to
access the right gallery from within the submenus/nesteddata:
var dsGalleries = new
Spry.Data.XMLDataSet("galleries/galleries88.xml",
"galleries/item");
var dsSubitems = new Spry.Data.NestedXMLDataSet(dsGalleries,
"gallery");
var dsGallery = new
Spry.Data.XMLDataSet("galleries/{dsSubitems::@base}{dsSubitems::@file}",
"gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("galleries/{dsSubitems::@base}{dsSubitems::@file}",
"gallery/photos/photo");
<div id="previews">
<div id="example1Region" spry:region="dsGalleries
dsSubitems">
<div id="Acc1" class="Accordion" tabindex="0">
<div class="AccordionPanel" spry:repeat="dsGalleries">
<div
class="AccordionPanelTab">{dsGalleries::@name}</div>
<div class="AccordionPanelContent"
spry:repeatchildren="dsSubitems">
<ul id="nav" >
<li spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}"
spry:hover="rowHover"
onClick="dsSubitems.setCurrentRowNumber('{ds_RowNumber}');"
spry:select="rowSelected"
spry:selected="selected">{dsSubitems::sitename}{dsSubitems::RowNumber}</li>
<li spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}"
spry:hover="rowHover"
onClick="dsSubitems.setCurrentRowNumber('{ds_RowNumber}');"
spry:select="rowSelected">{dsSubitems::sitename}{dsSubitems::RowNumber}</li>
</ul></div>
</div>
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1");
</script>
</div>

My problem was that I couldn't bind the var from the outside table to the value of the inside table. It wouldn't process it and iterate through the collection. I solved the problem by using the Tomahawk data list tag.

SPRY photo gallery and photo captions

Has anyone experimented with adding captions to the photos?
Was looking at different gallery examples, and saw that lightbox
does captions, but the transitions, and AJAX approach with spry are
much nicer...
Thanks!

Thank you for your tip. I have tried it Katiebird but it
didn't work.
Here is my doc:
<!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="includes/screen.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="includes/SpryEffects.js"></script>
<script type="text/javascript"
src="includes/SpryDOMUtils.js"></script>
<script type="text/javascript"
src="includes/SpryImageLoader.js"></script>
<script type="text/javascript"
src="includes/SpryNotifier.js"></script>
<script type="text/javascript"
src="includes/SpryThumbViewer.js"></script>
<script type="text/javascript"
src="includes/SpryImageViewer.js"></script>
<script type="text/javascript"
src="includes/SprySlideShowControl.js"></script>
<script type="text/javascript"
src="includes/gallery_init.js"></script>
<script type="text/javascript"
src="includes/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryData.js"></script>
<script type="text/javascript"
src="gallery_xds.js"></script>
</head>
<body>
<div id="wrap">
<p id="galleryLinks"><a href="fall08.xml">Fall
2008</a> | <a href="egypt.xml">Egypt</a> | <a
href="paris.xml">Paris</a></p>
<div id="gallery" class="gallery">
<h1 class="galleryName"
spry:region="dsPhotos">{sitename}</h1>
<div id="previews">
<div id="controls">
<ul id="transport">
<li><a href="#" class="previousBtn"
title="Previous">Previous</a></li>
<li><a href="#" class="playBtn" title="Play/Pause"
id="playLabel"><span
class="playLabel">Play</span><span
class="pauseLabel">Pause</span></a></li>
<li><a href="#" class="nextBtn"
title="Next">Next</a></li>
</ul>
</div>
<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>
<p class="clear">dave</p>
</div>
<div style="color:#FFFFFF:" align="center" id="caption"
spry:detailregion="dsSlides">{@caption}</div>
</div>
</body>
</html>
AND HERE IS the xml:
<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
date = "8/01/2008">
<sitename>Fall 2008</sitename>
<photographer></photographer>
<contactinfo></contactinfo>
<email></email>
<security><![CDATA[]]> </security>
<banner font = "Arial" fontsize = "3" color =
"#F0F0F0"> </banner>
<thumbnail base ="gallery/fall08/thumbnails/" font =
"Arial" fontsize = "4" color = "#F0F0F0" border = "0" rows = "3"
col = "5"> </thumbnail>
<large base ="gallery/fall08/images/" font = "Arial"
fontsize = "3" color = "#F0F0F0" border = "0"> </large>
<photos id = "images">
<photo
path = "1_28_04snow154.jpg"
width = "500"
height = "375"
thumbpath = "1_28_04snow154.jpg"
thumbwidth = "75"
thumbheight = "56"
caption="A Leaf">
</photo>
<photo
path = "arts.jpg"
width = "500"
height = "333"
thumbpath = "arts.jpg"
thumbwidth = "75"
thumbheight = "50"
caption="A Leaf">
</photo>
</photos>
</gallery>
If you could Help I would appreciate it.

Spry gallery - image link to url and autostart help please

Can anyone help with:
1) autostart the gallery
2) click on full size image to go to a url
Both questions are for image gallery example
I would like the gallery to autostart but cannot get it to
work with onload.
Also, to click an image an goto a url -I know the url should
be in the photos.xml files but I could really use details on how to
add to the html file, or would it be better handled with a
gallery.js function?

The reason why it might not work on load is because you need
to wait until the thumbnail region has been generated.
Look for this line in gallery.js:
setTimeout(function() { ShowCurrentImage(); }, 100);
and change it to:
setTimeout(function() { ShowCurrentImage(); StartSlideShow();
}, 100);
We really shouldn't need to use timers anymore to do all of
this, but I didn't get a chance to update the gallery demo to use
some of the new things we added for preview release 1.1. It will be
cleaned up in the next release.
As for going to a URL, if you're going to wrap the main image
with a link, you'll have to modify SetMainImage() in gallery.js to
account for the change in parent hierarchy.
You'll probably have to add some code in SetMainImage() to
update the href of the link to point to the specific url for that
image.
--== Kin ==--

Spry Gallery galleries.xml v/s galleries.asp

I´ve been trying to deploy an image gallery, but when I
declare the dataset as an XML it works great, but is the dataset is
an ASP page which generates an XML file, it does not work, even if
I try using the XML file content on the ASP file.
Does anyone knows who to workarround this?
Does work
var dsGalleries = new
Spry.Data.XMLDataSet("/xml/spry/galleries.xml",
"galleries/gallery");
Does not work
var dsGalleries = new
Spry.Data.XMLDataSet("/xml/spry/galleries.asp?IDLocal=<%=request.QueryString("IDLocal")%> ",
"galleries/gallery");
Thanks
FBP

Hey FBP,
Can you view that ASP directly in the browser without error?
Do you have a sample URL?
Thanks,
Don

Spry China/Egypt/Paris Gallery Example

Similar Messages

Maybe you are looking for