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
Similar Messages
-
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.
ThanksYou 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... -
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">
<!-- Copyright (c) 2006. Adobe Systems Incorporated. All
rights reserved. -->
<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. -
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)
TunedupI'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. -
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/imagesI'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. -
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. -
Spry Photo Gallery Image Size via CSS
Hello!
I´ve been customizing the spry photo gallery for a couple of time, but got my little problem when viewing it on a mobile phone. When you load up the pictures with a size of 450 x 300 px for example, put up the right xml file with it´s width and height, so the gallery shows the pictures in that size. So what I want to do is that you can specify the image size with css depending on the device you´re watching the site with. There is div in the css called "mainImage" where the size is in %. When you change it to 75% for example. The pictures are correctly shown with 75% of it´s original size, but the outline (grey background) is still in 100%. When you make this grey background transparent it´s still there and moves the caption down. I guess there have to be done some changes within the SpryImageViewer.js, but I just know very little things about JavaScript. Do you have any clues how to change this to specify the image size via CSS?
Thank you for your help!!!
Kind regards,
JoergI see you are still using Spry 1.5. Have you considered upgrading to
Spry 1.6.1?
Also your XML is broken, if you open up your xml in a normal standards
complaint browser such as firefox, you will see that it doesn't render
a normal tree view as it would do with other xml files. So i suggest
checking those errors out.
Its mainly because you forgot to close your starting tag of the
gallerys node. (<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
before your xml starts. -
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 helpI'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. -
Dynamic Spry Photo Gallery Thumbnails
I'm implementing the XML version of the Spry Photo Gallery. I
need to edit the size of of the thumbnails and make them larger,
roughly 100x130 or maybe a little smaller. Since I have so many
photos, I was planning to use CSS to handle the overflow with a
scrollbar. I noticed sizing occurs in the Index file, Gallery.js,
and in the XML file. Are there any others that im missing? I'm
having a problem with resizing them, they dont resize when I adjust
the size in those places. Any suggestions would be appreciated.
Thanks
link (select Tattoo from the dropdown):
http://www.bugsartwork.com/beta/gallery/index.htmlI overlooked screen.css, there was some css that was setting
the thumbnail img tag. -
Spry Photo Gallery - How to add links to images
I was wondering if any one knew how I could add individual
links to images on the spry Photo Gallery—An XML-based photo
gallery. I need each image to have its own individual link when
clicked on. Any assistance would be most helpful.Hi,
In the dashboard --> edit option u can see dashboard object here u can see folder ...by this folder u just include dashboard page other wise in the catalog share folder u need create each and evry module pre planned folder then save it each dashboard pages to relevent module folder.
THanks
Deva -
Troubleshoot Main Image for spry photo gallery
Hello, I am modifying some spry files to see if I can get the
hang of it using my images. I have taken the photo gallery files
gallery.js
SpryData.js
SpryEffects.js
xpath.js
The folder structure contains images and thumbnails on the
root folder as well as the ap.css sheet and photos.xml
The page is
http://www.proximita.com/learning/index.html.
Since I only have 1 photo gallery (and I did the getting
started tutorial and worked fine I wanted to add the slideshow
effect in the spry demo functionality) I only have one xml doc and,
as mentioned, the both image folders and the css sheet are on the
root, and the all the js files are in an includes folder.
The thumbnails show up fine, but, the main image does not
show up at all. I am almost sure this is a bad reference somewhere
or a begginners mistake but I cant find it.
I did modify the gallery.js because it referenced 2 or three
variables (like dsPhotos and dsGalleries that are used for the demo
I only have dsGallery) and I cahnged all of the other refrences to
dsGallery.
I think I am having problems here:
function ShowCurrentImage()
var curRow = dsPhotos.getCurrentRow();
SetMainImage("galleries/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
you can check out the whole code here:
http://proximita.com/learning/includes/gallery.js
Im unconcerned with appearance for the moment, and would just
like to see the main image and the slideshow functionality.
If you can help, please do. Thanks, Mario.yes, I suspect that is because the tutorial talks about
building this from scratch and uses that name for the "thumbnails"
div rather than what they actually use in the demo files...
confusing, to say the least.
It would be nice if there were a simple document with demo
files that didn't include other stuff unrelated to JUST the slide
show (gallery)... and if the whole layout were more simple,
css-layout-wise...
or, if the demo files were commented with what each bit is
for and how to modify it.
quote:
Originally posted by:
Dragos GEORGITA
Hi Mario,
I took a look at your sample and I've noticed you change the
ID of the container that holds the thumbnails (it was called:
"thumbnails". now it's "thumbContainer").
You need to open gallery.js and change the observer to point
to the new container:
Change
Spry.Data.Region.addObserver("thumbnails", function(nType,
notifier, data) {
To
Spry.Data.Region.addObserver("
thumbContainer", function(nType, notifier, data) {
Regards,
Dragos -
Problems with using Spry photo gallery and Opera browser
Using Dreamweaver CS3. I'm working on a website for a friend.
It looks great in:
-IE 6 and 7
-Firefox
-Safari
But in Opera, the photo gallery I put in (uses spry to change
images as the user rolls over the thumbnail) pops up a login box in
Opera. It doesn't do this in any other browser and it works
perfectly in all other browsers.
WDYT? TIA, SteveUsing Dreamweaver CS3. I'm working on a website for a friend.
It looks great in:
-IE 6 and 7
-Firefox
-Safari
But in Opera, the photo gallery I put in (uses spry to change
images as the user rolls over the thumbnail) pops up a login box in
Opera. It doesn't do this in any other browser and it works
perfectly in all other browsers.
WDYT? TIA, Steve -
Spry Photo Gallery Broken Image Link
I have attempted to merge the spry photo tutorial with our church's website. The images simply won't show up. It shows a broken image icon, but I can't understand why. I am wondering if the menu bar's javascript is interfering. Here's the code:
Photo Gallery Page:
http://gtcdunn.org/GTWebsite/HTML/Gallery1.html
XML
http://gtcdunn.org/GTWebsite/photos.xml
Spry Assets:
http://gtcdunn.org/GTWebsite/SpryAssets/xpath.js
http://gtcdunn.org/GTWebsite/SpryAssets/SpryData.js
Thanks so much for your help!
~ChrisI see you are still using Spry 1.5. Have you considered upgrading to
Spry 1.6.1?
Also your XML is broken, if you open up your xml in a normal standards
complaint browser such as firefox, you will see that it doesn't render
a normal tree view as it would do with other xml files. So i suggest
checking those errors out.
Its mainly because you forgot to close your starting tag of the
gallerys node. (<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
before your xml starts. -
Spry Photo Gallery Widget with filmstrip
The main image in the photo gallery doesn't appear but the thumbnails do.
http://www.woodsphotography.org/AbstractSlideshow1.html
I'm using Dreamweaver CS5 and everything works fine when previewed in firefox or safari but once uploaded to the server this happens.
Any help would be greatly appreciated.
KeithHi,
please have a look here to this thread, where we had a similar question (hope it's similar to your gallery):
http://forums.adobe.com/message/3398072#3398072: "Spry Widget Slideshow works in Firefox/Safari but not in Explorer"
Hans-G.'s demand:
BUT I have to ask me/you why the same command, listed in the "SpryImageSlideShow.css" is not running.
gramps answer:
The red coloured lines are not included in the original; but will make it work for IE6/7
<style>
#ImageSlideShow .ISSSlide {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
</style>
Hans-Günter
Maybe you are looking for
-
Retaining the old schedule lines after the ATP check in the sales order....
Hi Experts, I would like to retain the old schedule lines after the ATP/GATP check in the sales order for certain conditions. I don't want to change XVBEP,IVBEP,VBEP contents in the user-exit.. Is there any standard sub-routine or function module to
-
Where can I buy a new 3.5" SATA HDD with the extra thermal sensor port for my late 2009 imac?
where can I buy a new 3.5" SATA HDD with the extra thermal sensor port for my late 2009 imac?
-
I am having the B200 error which is a major problem. I have followed the directions without luck.
B200 error. What must I do to fix the problem? I have removed the ink and printer head and unplugged for 10 min. The MP620B still fails to work.
-
Why is creating a decent looking dotted line to dam difficult on Photoshop CC6?
I have tried everything to create a dotted line in Photoshop CC 6, using the line tool looks terrible, and nothing else works. Why is such a simple thing so difficult in the ridiculous tool?
-
How do I make images round - CS5 Photoshop
I'm editing photographs of tabletop ceramics - plates, etc. and often images are shot off center and I have to make them round. I use the Filter Lens Correction Feature with some success and the Warp feature to fine tune - but it's all eyeballing the