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

Similar Messages

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/

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

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

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

ADD A LINK AROUND MAIN IMAGE IN PHOTO GALLERY

Can anyone help with the code for this. I need to add a link
to each image as it appear in the spry photo gallery. Each link
would be different and set in the xml file can some one help
please. I can't figure this one out.

It's usually something like:
<div spry:region="ds1" spry:repeat="ds1">
<a href="{link_dataref}"><img src="{image_dataref}"
/></a>
</div>

Background images with spry "horizontal menu"

hi again
I am trying to work with the spry: "horizontal menu"
I want to put some background images into the menu bar not into the submenu
and that is the problem: the background images appears overall
what can I do ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
    <ul>
      <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
      <li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
and css
ul.MenuBarHorizontal
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
     z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     position: relative;
     text-align: center;
     cursor: pointer;
     width: 100px;
     float: left;
     height: 10px;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     z-index: 1020;
     cursor: default;
     width: 100px;
     position: absolute;
     left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
     left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
     width: 100px;
     height: 30px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
     position: absolute;
     margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
     left: auto;
     top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
     border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #FEF3E4;
     padding: 0.5em 0.75em;
     color: #FFF;
     text-decoration: none;
     background-repeat: no-repeat;
     background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
     color: #FF0;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
     background-color: #FEF3E4;
     color: #FF0;
     background-image: url(../rot.jpg);
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
     background-color: #FEF3E4;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
     background-color: #0F9;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
     background-color: #FEF3E4;
     color: #FF0;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
     background-color: #F99;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
     position: absolute;
     z-index: 1010;
     filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
     ul.MenuBarHorizontal li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;

Complete page and css code below (scroll down)
All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
Here is the code and css:
<!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>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<style type="text/css">

</style>
<style>
ul.MenuBarHorizontal
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
     z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     position: relative;
     text-align: center;
     cursor: pointer;
     width: 100px;
     float: left;
     height: 10px;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     z-index: 1020;
     cursor: default;
     width: 100px;
     position: absolute;
     left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
     left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
     width: 100px;
     height: 30px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
     position: absolute;
     margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
     left: auto;
     top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
     border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #FEF3E4;
     padding: 0.5em 0.75em;
     color: #FFF;
     text-decoration: none;
     background-repeat: no-repeat;
     background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
     color: #FF0;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
     background-color: #FEF3E4;
     color: #FF0;
     background-image: url(../rot.jpg);
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
     background-color: #0F9;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
     background-color: #FEF3E4;
     color: #FF0;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
     background-color: #F99;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
     position: absolute;
     z-index: 1010;
     filter:alpha(opacity:0.1);
</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
    <ul>
      <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
      <li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Question about css referenced images with spry

Using the Dreamweaver templae downloads design #1 and design #2, I pasted the spry assets and images from design #2 (accordion) into my website which is a copy of design #1. In addition to the accordion images, This gives me the SpryAccordion.css and SpryAccordion.js which reference the accordion images as ../accordion_255_tab_normal.gif, etc., but in Dreamweaver designer and at runtime the accordion images to not appear. Can someone please advise me where my issue might be?
Thanks,
Jay

Hi Jay,
accordions? You could have a look about the possibilities of (translated from my German DW) Insert > jQuery UI. And for example these out of providers great number:
http://jqueryui.com/accordion/
http://users.tpg.com.au/j_birch/plugins/superfish/
http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/
http://www.dynamicdrive.com/dynamicindex1/indexb.html
http://css3menu.com/?gclid=CI2FuNjPurYCFQpZ3godciQAAA
aso (Google could be your friend).
Hans-Günter
P.S.
Naturally you can remain at "good old" Spry, but some of the modern hardware will get their difficulties, so my hint is a preventative one. BUT in this case you really should load up your website, no matter how it looks like.

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

Spry static gallery combined with Spry Effect Observers

I have set up a Spry static gallery using the
demo
here.
I would like to add a cross fade for the main image using the
Spry Effect Observers shown at the bottom of
this
demo page.
I like the thumbnail grow effect used in the first demo and
like to add a cross fade for the main image when the thumbnail is
clicked. Have someone built such an example or can someone show me
how it is done? Typically I have 4 thumbnails/images per product
page.

Mr. Andersson wrote:
> I thnik I know what's going on now...
>
> I tried Fireworks and it has a built in Slideshow
creator. The setting that
> dont use Flash uses Spry and looks like the Spry gallery
demo. The settings
> using Flash have cross fading images.
>
> From this I got the idea that Adobe maybe dont want us
to cross fade with
> Spry. They want to push Flash instead. It could explain
the total silence from
> Adobe in various threads where this question is asked.
This is a user to user forum, Adobe will never reply to you.
Also, Spry is still a pre-release framework, its nowhere near
finished.
Its the kind of framework where you take whats available and
make
something out of it, its very flexible if you know
javascript.
I am learning javascript just to understand the little bits
that I am
experimenting with, I think its the only way forward if you
intend to do
something outside the box.
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html

Set link for main image in gallery

Hi, how do you set link to the main image in the photo
gallery? I was able to add photo caption using the
spry:detailregion but cannot do use the same method for the main
image because Spry won't allow nested div.
I saw a thread that talked about changing the SetMainImage
function but I've tried that it doens't seem to work. Can you show
me how to edit the code to do this? Thank you.

ok, after a day of trial and errors, I found a little fix for
this. It is not pretty but it does the job. First, change the
mainImageOutline div to a link. Second, add in two lines of codes
into the function ShowCurrentImage()
html file
<a href="#" id="mainImageOutline" style="width: 0px;
height: 0px;" ><img border="0" id="mainImage" height="250"
width="250" src="images/spacer.gif" /></a>
gallery.js
function ShowCurrentImage()
var curRow = dsPhotos.getCurrentRow();
// added by Tri
var tri_imgHolder =
document.getElementById("mainImageOutline");
tri_imgHolder.href = curRow["@newsLink"]; // this pull the
link from the XML file
// added by Tri
SetMainImage("2006_home_news/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
link in the xml file
<photo
path = "Domlg.jpg"
width = "440"
height = "250"
thumbpath = "domthumb.jpg"
thumbwidth = "90"
thumbheight = "70"
newsLink="
http://www.tringuyen.net">

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

Gallery Demo and IE7 Z-Index Bug

What is the workaround that corrects the problem in IE7
whereby Spry's Grow function shows enlarged images behind (not on
top) of their adjacent micro thumbs. Thanks in advance.

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

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

No Thumbs or Main Image with Spry Gallery Demo

Similar Messages

Maybe you are looking for