Photo Gallery Demo Problem

I'm trying to understand the Photo Gallery demo so I can
replicate the function for use on various sites. I've copied the
html, xml, javascript and some of the photo file elements to my
hard drive. I initially modified the file structures to something
more of my liking, but had some problems with the links. I've since
mimicked the structures so I can reduce the initial errors, but I
am stumped at the var dsGallery and var dsPhotos statements that
dynamically link to the China, Paris and Egypt photo databases. In
the original dynamic definition, DreamWeaver only parses the
dsGalleries XML definition, not defining the dsGallery and dsPhoto
nodes. I wasn't too concerned about that given the variable nature,
but nothing except the pull-down menu and controls displayed in the
browser. DreamWeaver shows correct parsing of the dsGalleries XML,
dsGallery and dsPhoto nodes only when I eliminate the dynamic
linking and set it to one of the static links (Egypt). This fails
in the browser to link to the data, giving a display that shows the
correct number of empty thumbnail frames but without the displayed
photos, no Spry effects, and no large photo display. I'm sure I
have multiple reference errors, but I don't see them. Any ideas?
Initial Photo Demo page:
<!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 rel="stylesheet" type="text/css"
href="../css/screen.css">
<script type="text/javascript"
src="../SpryAssets/xpath.js"></script>
<script type="text/javascript"
src="../SpryAssets/SpryData.js"></script>
<script type="text/javascript"
src="../SpryAssets/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new
Spry.Data.XMLDataSet("galleries/galleries.xml",
"galleries/gallery");
var dsGallery = new
Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
"gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
"gallery/photos/photo");
</script>
<script src="../SpryAssets/gallery.js"
type="text/javascript"></script>
</head>
<body id="gallery">
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="wrap">
<h1 id="albumName"
spry:region="dsGallery">{sitename}</h1>
<div id="previews">
<div id="galleries" spry:region="dsGalleries">
<label for="gallerySelect">View:</label>
<select spry:repeatchildren="dsGalleries"
id="gallerySelect"
onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}"
selected="selected">{sitename}</option>
<option spry:if="{ds_RowNumber} !=
{ds_CurrentRowNumber}">{sitename}</option>
</select>
</div>
<div id="controls">
<ul id="transport">
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage(true);"
title="Previous">Previous</a></li>
<li class="pausebtn"><a href="#" onclick="if
(gSlideShowOn) StopSlideShow(); else StartSlideShow();"
title="Play/Pause" id="playLabel">Play</a></li>
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage();" title="Next">Next</a></li>
</ul>
</div>
<div id="thumbnails" spry:region="dsPhotos dsGalleries
dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'{@thumbwidth}', '{@thumbheight}');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
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="main image" /></div>
</div>
<p class="clear"></p>
</div>
</body>
</html>
Fixed reference version:
<head>
var dsGalleries = new
Spry.Data.XMLDataSet("Graphics/galleries/galleries.xml",
"galleries/gallery");
var dsGallery = new
Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
"gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
"gallery/photos/photo");
</script>
Supporting files galleries.xml and Egyptphotos.xml
<?xml version="1.0" encoding="UTF-8"?>
<galleries>
<gallery base="Graphics/galleries/egypt/"
file="Egyptphotos.xml">
<sitename>Egypt</sitename>
<photographer>Don Booth</photographer>
<contactinfo>
http://www.adobe.com</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
</gallery>
... duplicate China and Paris declarations
</gallery>
</galleries>
<?xml version="1.0" encoding="UTF-8"?>
<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
date = "1/10/2006">
<sitename>Egypt Gallery</sitename>
<photographer>Don Booth</photographer>
<contactinfo>
http://www.adobe.com</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
<banner font = "Arial" fontsize = "3" color =
"#F0F0F0"> </banner>
<thumbnail base
="../../gallery/galleries/egypt/thumbnails/" font = "Arial"
fontsize = "4" color = "#F0F0F0" border = "0" rows = "3" col =
"5"> </thumbnail>
<large base ="../../gallery/galleries/egypt/images/" font
= "Arial" fontsize = "3" color = "#F0F0F0" border = "0">
</large>
<photos id = "images">
<photo
path = "egypt_01.jpg"
width = "350"
height = "262"
thumbpath = "egypt_01.jpg"
thumbwidth = "75"
thumbheight = "56">
</photo>
</photos>
</gallery>

Please delete this posting. I've found the full original
information in the v1.6 pre-release information and will compare to
that baseline.

Similar Messages

Spry Photo Gallery Demo

I am trying to build my own gallery based on the demo Photo Gallery Version 2. I want to add the photo metadata below the main image but I'm not sure how to do it. I am new to XML and javascript (I first looked at it 3 days ago), I can add the data to the xml file ok but I don't know how to get it to display. Any help appreciated.

I'm not familiar with this particular widget, but this may simply depend on adding some more variables to it. If so, the specific help on these widgets would cover it, so check the online docs...
Mylenium

Photo gallery navigation problem

i have a photo gallery up on page http://paradisembc-dallas.org/gallery.html that is giving me the blues as far as navigation. i can't go back to images i've already viewed. any assistance would be greatly appreciated.

what code are you using that's failing? copy and paste only the relevant code, not all the code used in your app.

Expose Photo Gallery: Uploading Problems Using Mac

Hello All,
First post, sorry to say it's about a problem I'm having. I have a Joomla based website and I'm using the Expose Flash Gallery as an image gallery solution on my photography site: http://www.wakinglifephoto.com/
The plugin works great on the front end, my problem only occurs when managing albums on the backend, which is also based on Adobe's Flash Player.
Whenever I try to upload a photo on my Mac, the process stalls and never completes. If I'm using a Windows PC, everything uploads fine. I've talked with the people who make this gallery plugin and they say it has to do with a bug that is only found in the Mac version of Flash Player.
Is there any type of solution available for this problem, or do I have to wait and hope that it gets fixed in Flash 10.1?
TIA.

The Fascinate has SD card capability, so I would save all my photos to a micro SD card, and then use a reader to transfer them to your computer.

Making a beautiful spry photo gallery

I'm trying to make a photo album like the one on adobe's spry
sample photo album page here,
http://labs.adobe.com/technologies/spry/demos/gallery/index.html
But I haven't been able to find any tutorials to do such a
thing, so I've resorted to cutting and pasting code, which is a
really bad idea for me since I'm new to web design and for me
understanding java script is harder than understanding the female
psyche.
At any rate, this is what I've been able to do so far for my
wife's retail site:
http://paxbaby.com/photoalbum.htm
If anybody feels ready and able to take on the challenge, I
have 3 real problems I haven't been able to figure out: first, how
to make the big pictures fade in and out like on Adobe's sample
page; second, how to make the thumbnails grow and shrink in front,
not behind, the other thumbnails, and third, how to make the
thumbnails grow and shrink from their center point, not from their
upper left corners.
I'd love it if anyone is willing to help me out with this --
and if you have any other pointers on my site there, I'm all
ears!

I've set up the photo gallery demo -china,paris,egypt- and
made a swap of a couple of my photos from in Dreamweaver's property
box src for thumbs, and link for the large pic. It works in Safari
and Opera but not in firefox and I don't know about IE as I'm on a
MAC and not that for into it yet.Is there something to look for in
the code? It shows no browser issues when I test for compatability?
I'd really like to use the xml version but I have tried and had no
luck except in Safari.

How do I only show thumbnails in the photo gallery without showing the Main Image?

Hello,
I need help customizing the Spry Photo Gallery Demo...
I would like for the Main Image To Be Hidden when the html
page loads. After the user clicks the thumbnail, I would like to
have the Main Image load centered on the page(with div containing
close button) on a z-index above the thumbnails. While the
thumbnails layer has a fade effect to 10%. After the user clicks
the close button the Main image disappears and the thumbnails layer
fades back to 100%. Then the user can click another thumbnail and
so on and so forth...
Is this possible? I have tried everything I can think of with
my limited knowlege of spry and cant get it to work. I just need
help with the Large image part. The close button and fades I can
handle.
Any help would be most appreciated. Please let me know if
further information is needed from me. Thank you in advance.

There is a third-party program called Attachment Tamer that will do that for you. In the Terminal, you can type this:
defaults write com.apple.mail DisableInlineAttachmentViewing -bool yes
Also note that while Attachment Tamer does some things with the encoding that makes certain email clients display the item as an attachment, what shows up at the receiver's end is solely dependent on their email client and its settings.

Spry Photo Gallery "Controls"

Spry Photo Gallery “Controls”
Hi Don Booth, David Powers, Kinblas et al,
Thank you all for your commitment, and I hope Spry isnt dead?!
I am years behind but I antē d up for the CS4 Master Collection at the beginning of the year and have been plowing through the many written and tv.adobe tutorials on the various programs. Some confuse so it was a pleasure to come to the straight forward instructions in Don Booth’s Photo Gallery that worked first time!
Forgive me however but although I have spent the last week perusing the forums (getting to know you all so well!) I can’t find any thread to help me to correctly add the “transport” “controls” div’s and bind them so that I get a better response to next/play/pause. I did find one detailing how to de activate the SlideShow Navigation - by deleting the container!! V1 Oct ’07.
As it seems to me there is nothing out there (in the Forum(s)) I assume this must be a simple case of ignorance on my part, and,- I feel stupid - I must be lagging way behind - for which I humbly apologize and ask for your help, thank you in anticipation.
http://www.portofinobayside.com/Gallery.html# (simpleTest - your images)
Tunedup

I've set up the photo gallery demo -china,paris,egypt- and
made a swap of a couple of my photos from in Dreamweaver's property
box src for thumbs, and link for the large pic. It works in Safari
and Opera but not in firefox and I don't know about IE as I'm on a
MAC and not that for into it yet.Is there something to look for in
the code? It shows no browser issues when I test for compatability?
I'd really like to use the xml version but I have tried and had no
luck except in Safari.

Spry Photo gallery

Can anyone point me to a free download of all the files for
the fancy Spry Photo Gallery demo that is on adobe's website. The
basic tutorial is good but I am stuggling to add the fancy
fade/appear and hover elements and also the ability to load
multiple galleries.
Thanks

You might find what you are looking for in the demos/gallery
folder of the downloaded Spry 1.6 code. This is the same gallery
you can find at
http://labs.adobe.com/technologies/spry/demos/gallery/
Let me know if that is not what you wanted...

Tutorial for a Spry photo gallery with thumbs and buttons ???

Anyone know of a a tutorial for building a Spry photo gallery with both thumbnails and next, previous, stop and play buttons(functions) ???
Like the ones on Adobe's Photo Gallery demos; http://labs.adobe.com/technologies/spry/demos/pe_gallery.html
Adobe show the source for their Photo Gallery Demos, but that doesn't help me much ... I need a prober tutorial that tells me how to do : )
The only tutorial that I've been able to find, is one for Dreamweaver 8, without buttons - I'm looking for a updated version.
I appreciate any help very much. Thank you.

Just Google for the Spry photo gallery and you might find
http://cates-associates.net/tutorials/Tutorial-CS3-Spry.html
or even a few others.
Happy Sprying
Ben

Spry Photo Gallery not viewing

am new to web design and followed this tutorial to make a
Spry Photo Gallery:
http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album.html
I am using Dreamweaver CS3 and when I preview my files,
everything is perfect and in place. When I upload everything and
view it on the server, no photos show up, and all of my div layers
are out of whack or missing even.
Any ideas, suggestions?? I feel like I am missing something
really simple.. THANKS!
http://www.summerinchicago.com/photoGallery/gallery.html
http://www.summerinchicago.com/photoGallery/photos.xml
http://www.summerinchicago.com/photoGallery/includes/SpryData.js
http://www.summerinchicago.com/photoGallery/includes/xpath.js
http://www.summerinchicago.com/photoGallery/images

I've set up the photo gallery demo -china,paris,egypt- and
made a swap of a couple of my photos from in Dreamweaver's property
box src for thumbs, and link for the large pic. It works in Safari
and Opera but not in firefox and I don't know about IE as I'm on a
MAC and not that for into it yet.Is there something to look for in
the code? It shows no browser issues when I test for compatability?
I'd really like to use the xml version but I have tried and had no
luck except in Safari.

Spry Photo Gallery Navigation

Hi,
I'm building a simple photo gallery and I'm having issues trying to navigate image to image while using Paged View. My first attempt without paged view I could navigate image to image and once you reached the first or last image on a page, the next page would load beginning with the first or last image depending which way you were navigating by changing the xpath. I then came across the Paged View function, which makes the xml and paging much simpler, but I'm unable to figure out how to tell when I reach the end of a page, while browsing image to image, to load the next page. I don't seem to be getting a value from the current row that is showing.
Here is a link to a test page. http://www.roughcountry.com/gallery/customers/test.html
Navigating image to image works but the page changes incorrectly.
Hope that is clear, thanks for any help

I've set up the photo gallery demo -china,paris,egypt- and
made a swap of a couple of my photos from in Dreamweaver's property
box src for thumbs, and link for the large pic. It works in Safari
and Opera but not in firefox and I don't know about IE as I'm on a
MAC and not that for into it yet.Is there something to look for in
the code? It shows no browser issues when I test for compatability?
I'd really like to use the xml version but I have tried and had no
luck except in Safari.

Help with Photo Gallery using XML file

I am creating a photo gallery using Spry. I used the Photo Gallery Demo (Photo Gallery Version 2) on the labs.adobe.com website. I was successful in creating my site, and having the layout I want. However I would like to display a caption with each photo that is in the large view.
As this example uses XML, I updated my file to look like this:
<photos id="images">
            <photo path="aff2010_01.jpg" width="263" height="350" thumbpath="aff2010_01.jpg" thumbwidth="56"
               thumbheight="75" pcaption="CaptionHere01"></photo>
            <photo path="aff2010_02.jpg" width="350" height="263" thumbpath="aff2010_02.jpg" thumbwidth="75"
               thumbheight="56" pcaption="CaptionHere02"></photo>
            <photo path="aff2010_03.jpg" width="350" height="263" thumbpath="aff2010_03.jpg" thumbwidth="75"
               thumbheight="56" pcaption="CaptionHere03"></photo>
</photos>
The images when read into the main file (index.asp) show the images in the thumbnail area and display the correct image in the picture pain. Since I added the pcaption field to the XML file, how do I get it to display? The code in my index.html file looks like this:

rest of the code here:
        <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" class="SpryHiddenRegion">
                <div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}"/></a><br /></div>
                <p class="ClearAll"></p>
            </div>
        </div>
        <div id="picture">
            <div id="mainImageOutline"><img id="mainImage" alt="main image" src=""/><br /> Caption: {pcaption}</div>
        </div>
        <p class="clear"></p>
    </div>
Any help with getting the caption to display would be greatly appreciated. The Caption {pcaption} does not work,

Add Caption to Photo Gallery

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 ==--

Update Content and Photo Gallery

Forgive me for cross posting but I was not aware of this
group when I originally posted. Here is my orginial post. Maybe
someone can help me or point me in the right direction.
I am using Spry updateContent to load in html fragments
(div). What I'm trying to do now is load in the Spry Photo Gallery
demo. I have used this tutorial to build the Photo Gallery:
http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album.html
I've tried loading the entire photo gallery html page but
this does not work. I then tried loading in a fragment with just
the div's with and without the scripts. I then tried moving the
scripts to the main document. Nothing seems to work. Any
suggestions?
charlie-imac

Hi Charlie,
Sounds like you are trying to run Spry twice. Once when you
loadContent and then again to run the gallery after updateContent
runs.
Is that correct? If so, it won't work as you noticed, since
Spry has already processed the page by the time the DIV is loaded.
What's the goal of your page? Is there a specific reason you
are using updateContent? You can use the gallery as it was
designed, or for updateContent, make sure the DIV you are loading
already has the needed HTML markup.
Let me know if I missed something.
Donald Booth
Adobe Spry Team

Now that the photo gallery in MobileMe is ending, is there another photo sharing site to which existing iPhoto albums can be transferred as is, with photos in the same order and with titles, and with minimal problems?

Now that the photo gallery in MobileMe is ending, is there another photo sharing site to which existing iPhoto albums can be transferred as is, with photos in the same order and with titles, and with minimal problems?

No. If you don't have the album you originally used to create the galleries you can do so by dragging the photos from each gallery to a new, empty album. Then when you find the photo sharing site/option you have decided on you can easily upload each album to the site.
Another option is to obtain a hosting service and create iWeb photo pages for each album and future albums similar to this photo page in one of my demo sites: iPhoto Book as an iWeb Slideshow. Or you can use the iWeb album page and have an album for each iPhoto album on it like on this demo page: Page-7 .
OT

Photo Gallery Demo Problem

Similar Messages

Maybe you are looking for