Don Booth spry gallery

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

Similar Messages

Issues with spry gallery in a DW template

Hi all,
I have incorporated a spry gallery I originally found at:
http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album_02.html
into my page. This works fine until I save my page as a template.The js seems to dissapear leaving the gallery area blank. The rest of the page is fine.
I understand this tutorial was written for v8 but have no idea why it wont work in a CS4 template.
I even tested the tutorial html by creating a new site and coverting the html file into a template. Gallery doesnt work.
Any help on this would be awesome as the gallery area was to be a main feature on the home page.
Cheers.

Make the link to the Flash element ROOT relative.
That way, the link doesn't need to be managed and will work
just fine in
your Template child pages.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"buckeyestargazer" <[email protected]> wrote
in message
news:gbreos$cpq$[email protected]..
> I'm relatively new to Dreamweaver (version 8) and I'm
having a problem
> inserting a flash (.swf) slideshow of pictures into a
template that then
> updates several webpages. The problem is, when I insert
the flash into
> the
> template page and the webpages get updated, the flash
animation does not
> play
> on the webpages and just has a white box. If I detach
the template from
> the
> webpage, then the flash displays correctly. But the
problem with that is
> then
> there is no point to using a template because I would
have to manually
> update
> each webpage instead of just the template when I want to
make a change to
> all
> the webpages. The problem must be with the template,
because when I try
> to
> attach the template to a very simple webpage containing
only a couple
> words and
> no other graphics, the flash will not display correctly.
Any ideas on
> what is
> wrong or how I can insert a flash slideshow into a
template so that it
> updates
> the webpages correctly?
>
>

How to create a Spry Gallery

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, Don

Hi,
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

No Thumbs or Main Image with Spry Gallery Demo

Hi everyone, DW CS3 newbie here.
I hope this topic hasn't been beaten into the ground yet.
I'm trying to put together a site
(members.cox.net/rangersbu9/gallery.html) for my son's soccer team
and am running into a wall getting the original, dynamic Spry
gallery demo to work. I've done my best to collect and modify the
required files and place them appropriately but, when the files are
loaded on the live server (the wrap div contents are all but
invisible when I view with IE7 locally, apparently due to the PC
not be set up as local server) the thumbs are 'x's and the main
image is a 1px x 1px dot.
The controls will highlight between the empty thumbs and the
gallery pull-down will select between the two options I've put in
the XML file but that's about it. Perhaps it is my ignorance, but
it seems like a ( src= ) tag is missing in the 'mainImageOutline'
div because I cannot understand where the main picture is coming
from otherwise.
Any insight from the source at the link above? Please keep in
mind I have two week's experience with DW and website building but
do have a programming background (from a few decades ago :->). I
believe I have the un-updated CS3 Spry version, if that matters.
Many thanks to Don and others here for posts that have helped
me get this far.
-Kurt

Update:
Got the thumbs to appear. Had them physically sized larger
than the XML fields stated. However, they will not grow/shrink. In
digging through gallery.js, I see that those two functions call
Spry.Effects.SizeAndPosition() - I cannot find that function in any
of the includes (i.e. SpryEffects.js). Spry.Effects.Size yes, but
not SizeAndPosition. Wondering if this gallery.js calls a later
version of SpryEffects.js than I currently have installed (it's
Spry 1.4). I will download 1.6 and check it out but if anyone has
any other input, please let me know.
Still no main image. In gallery.js I found ShowCurrentImage()
which had a hardcoded path to the images that did not match mine.
Corrected the path but no change.
Any suggestions?
Thanks.
-Kurt

Seeking Spry Gallery mouseovered thumbnail identifier/ID

Hi!
I would like to ask my earlier question about the Dynamic
Image Preview extension in a different way. I think my point was
not clear.
Operating in a Spry gallery of thumbnails with my images in
‘images/’ directory, what is the identifier that will
give the name of the thumbnail image being currently mouseovered
and make it possible to go to the images directory and extract the
main image?
Do I write it as
‘images/{Ds_CurrentRowID}{photoname)’ or ‘images/
+ {Ds_RowID}(photoname}’ or what?
Thanks!
Mike

Hi Don,
Many thanks for your patience!
Latest news:
Good heavens! I put that version up again (
http://www.worldseniorcharityrugby.org/index2.php)
and the third column appears to work for the top image! The images
are too big - I will upload smaller ones.
I see another problem: any ideas why it may not work for the
second or third image? Could it be the numbering in the 'link' part
is replicated by Spry?
I put a version up again - on the page there are 5 images per
record. I am just focusing on the third & fourth of those
images involving {photo3} and {photo4} until I get the answer.
Looking at your site again I think the below is getting a bit
nearer to the answer -
I have put backslashes since it is inside javascript - is
that right?
To put the setCurrentRow before the
'javascript:createPreviewImage ..' would seem to be the best way
but it won't work!
I wonder whether this extension can actually be intregrated
into Spry! I hope it can.
Mike
<div align="center"><a href="Link502072C0"
id="Link502072C0" style="cursor:help"
onmouseover="javascript:createPreviewImage('TSPreviewImagePanelID502072',
DsIndividuals2.setCurrentRow(\'{ds_RowID}\'); '{photo3mes}',
'../images/{photo3}', 'Link502072C0',600,450, true)"; <img
src="<?php echo $objDynamicThumb4->Execute(); ?>" alt=""
name="photo3" height="66" border="0" align="middle" id="photo3"
/></a></div>
</div>
</div></td>
<td width="70"><div>
<div>
<div align="center"><a href="Link502072C0"
id="Link502072C0" style="cursor:help"
onmouseover="DsIndividuals2.setCurrentRow('{ds_RowID}');
javascript:createPreviewImage('TSPreviewImagePanelID502072',
'{photo4mes}', '../images/{photo4}', 'Link502072C0',600,450,
true)"; <img src="<?php echo $objDynamicThumb4->Execute();
?>" alt="" name="photo4" height="66" border="0" align="middle"
id="photo4" /></a></div>
</div>

FireFox -- Issue with Spry Gallery

I posted this a few months ago and I was wondering if I could
get an answer.
I want to make the images in the Spry gallery fade out before
a new image fades in. In the current mode the images vanish
instantly followed by a fade-in of the next or previous image.
I have been successful in achieving this effect in IE by
removing the following lines of code in the Gallery.js file (in the
center of the SetMainImage function).
img.style.opacity = "";
img.style.filter = "";
I also changed the background-color of #mainImageOutline in
the css file to #000000 (black). I believe this also resolved the
white speck problem.
Although the fade-out does work properly in IE it does not
work in FireFox. I believe it is the result of the
Spry.Effect.getOpacity or Spry.Effect.getStyleProp functions not
being properly calibrated for Firefox.
quote:
gBehaviorsArray["mainImage"] = new
Spry.Effect.Opacity(img, Spry.Effect.getOpacity(img), 0, {
duration: 400,
In the above line of gallery.js I replaced
"Spry.Effect.getOpacity(img)" by
"1" and that triggered the desired effect for
FireFox although it of course has the habit to set the current
image's opacity to full before fading in to the next image.
Help would be greatly appreciated.
Thank you.

That is because your page is currently invalid. And renders in IE quirksmode..
<base href="http://www.industrialwebsearch.com/">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So make sure your page is valid, and the animations will go smooth in ie

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

Link to Particular Spry Gallery

Dear All - Can anyone help?
I have created a spry gallery page with a dropdown to a
number of different categories...
Gallery
Page
I want to be able to add links on another page that will
automatically load a particular gallery from this page, i.e. select
a particular category to be displayed from a link on another page.
I was imagining that the links might be in the form "
http://.../gallery_prototype.php?sitename=Ireland%20(Delta)"
or similar, and was looking at the "Using Spry Data with URL
params" code, but can't seem to get anything working...
I have seen this post
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1344357&highlight_key=y&keyword1=gallery
I have based my gallery on the standard spry gallery (have I
made a mistake by doing this?)
If you could help I would be most appreciative...
Many Thanks
James

think I'm getting closer, but not sure - if someone could
take a look that would be great thanks...

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

Spry gallery with filmstrip wont display images??

i am currently making a photography website so i am trying to insert the spry gallery widget however once i have inserted it and got it in the right position i cant seem to get the images to show.
i have clicked on the two links in the properties box at the bottom and linked them to the images in my site folder but they still wont show in live view or safari browser any help would be appreciated.
Thanks
Declan

Sorry, but without a link to your online page, it's a time-wasting, error-prone guessing game.
If you put your test page and all dependent files online, and post a link here, we will gladly check that:
    Your server is working
    That all required HTML code is correct
    That your folder hierarchy is correct
    That all required dependent files (HTML, CSS, JS, Images etc.) are uploaded to proper folders
    That Javascript Versions are correct
    That link paths are all correct and case sensitive

Spry Gallery

Hello everybody!
Could anyone help me to adapt the spry gallery you find
here
to work with the xml used in the Slideshowpro flash plugin? You can
see the format of the xml
here.
Thanks in advance...

Hi,
If you delete the float: left; rule from #previews in your
styles.css file, it should move under the thumbs.
Hope this helps.
Don

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

Spry Gallery Demo Grow effect problems

Im learning and trying to recreate the spry gallery demo with
the growing thumbnails.
I have replicated pretty much all the code and used the same
onmouseover gallery.js and spryeffects.js but I just get an error
on page and no grow.
If I use the attribute panel and use the grow effect it does
work but the thumbnails around the one growing are pushed around
instead of the growing thumbnail appearing on top.
I'm stuck!
My code for the thumnail region is here:
<div id="thumbcontainer" spry:region="dsGallery">
<div spry:repeat="dsGallery"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'75', '75');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img src="thumbnails/{@thumbpath}" alt="" width="32"
height="32" id="tn{ds_RowID}" style="left: 0px; right: 0px;"
spry:setrow="dsGallery" class="thumbImage"/>
</div>
</div>
Any suggestions

I'm confused. The example for Spry gallery DOESN'T use an
anchor tag around the thumbnails... In your article and in some
posts, you say that the structure is:
<div id="thumbnails">
<div class="thumbnail">
<a href="image.jpg"><img src="image.jpg"
/></a>
</div>
</div>
However, I downloaded Spry_1_6_1_022408 and copied the
example thumbnails element & content verbatim:
<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>
NO ANCHOR TAG. Even if you look in the generated source,
there's no link surrounding the thumbnail image.
So I guess I am unclear as to how to apply your fix? Using
the 1.6.1 version, the sample function code you show doesn't match,
nor does it seem to reflect your modifications...
Any ideas? I managed to track down your post about the bug in
IE 7 (it exists in IE6, too) [the demo link (
http://mad.sweepingdesign.com/index.html)
goes to a page that says "It works!"]
The actual article can be found here, though the demo link
shows nothing:
http://www.sweepingdesign.com/wordpress/2007/11/18/spry-gallery-demo-and-ie7-z-index-bug/

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

Css problem in spry gallery demo, ie "doubled margin" for thumbnails

http://labs.adobe.com/technologies/spry/demos/gallery/
View page in both Firefox and IE6. Note that in Internet
Explorer (Windows), the margin on the left is double that of the
same in Firefox. This is a well-documented IE CSS issue that occurs
when a floated element also has margin set on the side to which it
is floated, as in float:left; margin:5px;
It's an issue when the margin is such that it causes wrapping
within the thumbnails parent container... in IE browsers.
Add display:inline to the #thumbnails div rule to correct the
problem.
Just FYI.
Donna Casey

Thanks Donna! The fix will appear in the next drop.
--== Kin ==--

Don Booth spry gallery

Similar Messages

Maybe you are looking for