Spry Grow Thumbnails

Hello folks,
How can I control the image and window size that pops up with
this spry technique?
I keep getting the same size on the large image, even if some
of the images are larger.
Spry
Grow Thumbnails Effect
http://labs.adobe.com/technologies/spry/samples/effects/growThumbnails.html
Thanks

I just replyed in the other topic you posted :)

Similar Messages

Gallery using spry grow effect that targets the clicked thumbnail

Hello. I'm trying to build a gallery with thumbnails that,
when clicked, grow to display the full-size image. I created an xml
spry data set and I'm using a spry:repeat to go through each row of
the data set and create the thumbnail. Then I attach the grow
effect, but since the target is each of the thumbnails, I need an
unique id for each. I tried using id="thumb_{ds_RowID}" (and
ds_RowCount and ds_RowNumber) but it doesn't work.
I guess ds_RowID is not valid outside the spry:region, but
perhaps there's a way around this?
Can anyone give me any sort of advice on how I could make
this work? Thank you.

Hello Dexter,
By looking in the code I think the problem appears because of
borders that are not defined in the CSS and on IE they are reported
as NaN. Try to change the border definition for the element to 0px
explicitly.
Could you show me a link where you have the page with the
problem or give me the CSS definition of the element that is
initially invisible so I can test this bug and do the corrections.
Cristian MARIN

Grow thumbnail to main image and then back

I am wanting to modify the dynamic photo Gallery to Grow each thumbnail to the main image position.
When another thumbnail is selected it should shrink back to it's original position before the Grow.
When another thumbnail is clicked it does the same grow effect and takes it place of the main image and the first thumbnail shrinks
and returns to where it's original thumbnail positions was.
It would have to be constructed so the thumbnail that is clicked stays and a duplicate of it grows from it's current position.
If someone could help do this in stages so I can understand how the code initializes, this would be greatly appreciated.
WBell

Use a Seperate Thread to do it:
Runnable r = new Runnable() {
    public void run() {
               int k=tree.getSelectionRows()[0];
               DefaultMutableTreeNode node = (DefaultMutableTreeNode)tree.getLastSelectedPathComponent();
                            if(node.getNextSibling()!=null)
                                 tree.setSelectionRow(k+1);
                            else
                                 tree.setSelectionRow(k-1);
                            sleepe(k);
public void sleepe(int i){
                     try{
                            Thread.sleep(1000);
                                 }catch(Exception e){
                                     e.printStackTrace();
                              tree.setSelectionRow(i);
    }Then start this thread in a mouse click event(or any other similar),but not in TableSelectionListener because >>if the current selected row is 1 then it will execute the valueChanged method of TableSe..li. and we set the selected row to 2 then again it will execute the valueChanged method of TableSe..li.It will repeat till something,or in error.
tree.addMouseListener( new MouseListener(){
public void mouseClicked(MouseEvent e) {
                   new Thread(r).start();
public void mouseEntered(MouseEvent e) {
public void mouseExited(MouseEvent e) {
public void mousePressed(MouseEvent e)     {
public void mouseReleased(MouseEvent e) {
});Note:it worked perfectly for me. So add all the above in the right place and import necessary.It will execute perfectly.

Spry grow effect glitch.

I'm trying to do a gallery something similar to:
http://labs.adobe.com/technologies/spry/demos/gallery/
but the grow effect on my Spry page is glitchy in the sense that it
jumps/shakes on rollover and sometimes it gets stuck and doesn't
mouseout. You can see what I'm talking about here:
http://www.tinsley.com/www/test/
. Not sure what the problem is other than I'm using tables and not
div's but not sure if that would cause this. The code DW is
generating for the effect is the following:
<a href="images/work/large/AdMNIJul.jpg" class="thickbox"
title="Your fly is down and you couldn't be happier."
rel="gallery">
<img src="images/work/medium/AdMNIJul.jpg" alt="thumb"
width="20" height="20" onmouseover="MM_effectGrowShrink(this, 500,
'20px', '70px', false, false, false)"
onmouseout="MM_effectGrowShrink(this, 300, '70px', '20px', false,
false, false)" onclick="MM_effectGrowShrink(this, 500, '70px',
'20px', false, false, false)" />
</a>
Any help would be appreciated. Thanks in advance.

firefox gives error;
quote:
Spry.Effect.DoGrow is not a function
GrowShrink(img#cooperfineart.jpg cooperfineart.jpg, 1000,
"150px", "520px", true, false, false)port.asp (line 23)
onclick(click clientX=0, clientY=0)port.asp (line 1)
[Break on this error] Spry.Effect.DoGrow(targetElement,
{duration: duration, from: from, to: to, togg...
port.asp (line 23)
Spry.Effect.DoGrow is not a function
becouse Spry.Effect.DoGrow is SPRY 1,5 code (i think)
maby update your SPRY, your using 1,4. current release is
1,6

Help needed with Spry Grow/Shrink Query!

Dear All,
I am attempting to use the new spry effects in cs3 to grow (
and the optionally shrink) a city map for users.
My difficulty is that if you use an image at the correct 100%
size, but want to grow it from 10%, the 100% image displays as
default when you load the page, then once clicked it reszies up
from 10%.
I cant use a 10% image as my start point, because then the
'grown' map is illegible.
Any tips?
Cheers
Si

Use OnLoad with grow and set both size fields to 10% with
milliseconds set to 0
Then onClick toggle grow from 100% (don't know why) to the
Pixel size you want for the second field.

Spry Grow Effect

I've added the grow effect to my site to grow and shrink
images on my portfolio page.
It works fine on my localhost server but when I upload it to
my webserver (Fasthosts: Windows IIS 6) it just stops working. All
the code is present, the function being called correctly, but it
just doesn't do anything.
Help me?
My page is at:
http://www.designermonkey.co.uk/port.asp?mod=port&port=top10
Designermonkey">Designermonkey

firefox gives error;
quote:
Spry.Effect.DoGrow is not a function
GrowShrink(img#cooperfineart.jpg cooperfineart.jpg, 1000,
"150px", "520px", true, false, false)port.asp (line 23)
onclick(click clientX=0, clientY=0)port.asp (line 1)
[Break on this error] Spry.Effect.DoGrow(targetElement,
{duration: duration, from: from, to: to, togg...
port.asp (line 23)
Spry.Effect.DoGrow is not a function
becouse Spry.Effect.DoGrow is SPRY 1,5 code (i think)
maby update your SPRY, your using 1,4. current release is
1,6

Spry Grow/Shrink effect

I have set the effect through the BEHAVIORS to start off at
150px and when clicked, grow to 600px. The porblem is when the page
loads, the image starts off at full size instead of 150px. How do I
get it to start off at 15opx like it is set to do?

That does not work either. I have an image that is 500px wide
(100%) I want it to start at 20% so I sized it down using the Width
and Height in the Properties panel. So it starts at the set size
and does even smaller.
I am applying the effect to the IIMG tag.
Thanks,
Houston

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/

Need a little help with Slimbox (Lightbox clone) and Spry data sets

Hello guys!
First of all let me say that I'm not a programmer in any way,
shape or form, and somehow I managed to build me a dynamic
thumbnail gallery that reads data from an XML file and displays it
on my webpage using a Spry data set and a slider widget (yay!)
This is of course only thanks to the many great examples
provided by the Adobe Spry team, and me being stubborn enough to
keep at it, even though I don't really understand what I'm doing :D
But I got to this point where I have basically everything
working, except that I can't get the Slimbox (Lightbox clone)
script to work with the Spry-generated thumbnail gallery.
From what I could understand from other threads on this
forum, is that I need to add an observer somewhere, only that I'm
not sure where and how (those threads are pretty old and the
examples aren't available anymore).
I'm sure you guys know what I'm talking about, anyway, here's
what I got so far:
http://www.riotdesign.com.ar/misc/gallery/test1.html
I have the thumbnail gallery populated from the external XML
file, a basic page navigation using the Sliding Panels widget, and
the Slimbox script which works only on the static test image.
Okay I guess that's it for now, sorry for the long post and
of course any help with this will be GREATLY appreciated :)
Thanks & bye!

Kev,
Where exactly does the .evalScripts = true; text need to go?
Does it go in the href call?
<a href="ManageNotes.asp" title="Manage Notes" onClick="this.blur();
Modalbox.show(this.href, {title: 'Manage Notes', width: 575}); return false;">View your notes.</a>
Thanks for any assistance.
J Bishop

Grow Effect with "useCSSBox: true" Problem

Good day,
I am using the spry grow effect with the “useCSSBox:
true”. This works fine in the example( example 5) that comes
with spry(Samples directory->effects)
The problem occurs when the window is initially hidden like
“Grow example 3.1” and it goes form 0% to 100%.
Spry.Effect.Grow('example5', {duration: 1000, from: '0%',
to: '100%', toggle:true, useCSSBox: true});
Then I get an Error on line 1218 char 3 in the IE and nothing
happen.
Can somebody help me or is it a bug
Thanks in advance for any reaction

Hello Dexter,
By looking in the code I think the problem appears because of
borders that are not defined in the CSS and on IE they are reported
as NaN. Try to change the border definition for the element to 0px
explicitly.
Could you show me a link where you have the page with the
problem or give me the CSS definition of the element that is
initially invisible so I can test this bug and do the corrections.
Cristian MARIN

Safari 4 problems - HTMLDataSet/Sliding Panels

Hi,
I've been building a fairly basic photo gallery site and was having no problems with the site until I downloaded and installed Safari 4. For some reason the detailRegions are not loading properly in Safari 4. I have thumbnails in the sliding panels that load fine but the larger versions of the photos no longer appear in Safari below the sliding panels and on the right sidebar the paypal buttons no longer appear either. IE and FF seem to be working fine still. Any help would be greatly appreciated. I'm very new to this so please bear with me if I have any glaring mistakes. THANKS!!!
<!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>Flowers</title>
<link href="mainStyles.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SprySlidingPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">var ds1 = new Spry.Data.HTMLDataSet(null, "gallery", {columnNames: ['Thumbnail', 'PictureTitle', 'PictureResolution1', 'Price1', 'Button1', 'PictureResolution2', 'Price2', 'Button2', 'HiRes_Id',], rowSelector: "div.galleryItem", dataSelector: "p"});</script>
</head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
    <a href="index.html"><img src="images/dmlogo.jpg" width="400" height="100" alt="Eye Focus Photography" /></a></div>

<div id="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="index.html">Home</a></li>
      <li><a href="animals.php">Animals</a></li>
      <li><a href="barns.php">Barns</a></li>
      <li><a href="cities.php" class="MenuBarItemSubmenu">Cities</a>
        <ul>
          <li><a href="washingtondc.php">Washington DC</a></li>
          <li><a href="nyc.php">New York City</a></li>
        </ul>
      </li>
      <li><a href="fireworks.php">Fireworks</a></li>
      <li><a href="flowers.php" class="selected">Flowers</a></li>
      <li><a href="lighthouses.php">Lighthouses</a></li>
      <li><a href="misc.php">Miscellaneous</a></li>
      <li><a href="national_parks.php">National Parks</a></li>
      <li><a href="plants.php">Plants</a></li>
      <li><a href="waterfalls.php">Waterfalls</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div id="sidebar2">
     <div id="detailArea1" spry:detailregion="ds1">
          <div class="detailText">
         <h1>{PictureTitle}</h1>
         <p>{PictureResolution1}</p>
         <p>{Price1}</p>
        <p>{Button1}</p>
        <p>{PictureResolution2}</p>
         <p>{Price2}</p>
        <p>{Button2}</p>
         <br class="clearfloat"/>
         </div>
     </div>
</div>
<div id="mainContent">
    <div id="slidingGallery" class="SlidingPanels" tabindex="0" spry:region="ds1">
     <div id="galleryContentGroup" class="SlidingPanelsContentGroup">
         <div id="panelContents" class="SlidingPanelsContent" spry:repeat="ds1" spry:setrow="ds1">
        <div class="galleryItem">
        <p class="thumbnail">{Thumbnail}</p>
        <p class="pictureTitle">{PictureTitle}</p>
        </div>
        </div>
     </div>
</div>
<p id="panelNav" class="fltlft">
     <a href="#" id="firstPanel" onclick="sp.showFirstPanel(); return false;">First</a>
     <a href="#" id="previousPanel" onclick="sp.showPreviousPanel(); return false;">Previous</a>
     <a href="#" id="nextPanel" onclick="sp.showNextPanel(); return false;">Next</a>
     <a href="#" id="lastPanel" onclick="sp.showLastPanel(); return false;">Last</a>
</p>
<div id="detailArea2" spry:detailregion="ds1">
     <div class="detailImg">
    <img src="images/flowers/{HiRes_Id}" alt="{PictureTitle}" /><br class="clearfloat"/>
    </div>
</div>
<div id="gallery">
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/3454_thumb.jpg"><img src="images/flowers/3454_thumb.jpg" alt="Daisy" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Daisy</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397389"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5111872"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">3454_wm.jpg</p>
</div>
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/6586_thumb.jpg"><img src="images/flowers/6586_thumb.jpg" alt="Sun Orchid" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Sun Orchid</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397419"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397432"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">6586_wm.jpg</p>
</div>
</div>
    <br class="clearfloat"/>
     </div>
     <br class="clearfloat" />
   <div id="footer">
    <p>© 2009</p>
</div>
     </div>
<script type="text/javascript">

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

It doesn't work correctly in Firefox either,
If you check out generated code, you will see that the data ins't selected correctly, or that maybe your HTML is correctly.
For example.. type this in the url bar of your browser; javascript:alert(ds1.getData()[0]['HiRes_Id']); and you will see it alerts <span></span>.
So i would suggest to recheck your rowSelectors and validate your page for HTML errors.
Related documentation:
http://labs.adobe.com/technologies/spry/samples/htmldataset/RowAndDataSelectorSamples.html

Uploading photos and data online

I run a website previously built by someone else in asp. The
dynamic site runs off data exported from filemaker in html table
form. I have been looking for a new, more direct technique of
organization for our site and am highly interested in Spry. I can
equally export XML from Filemaker Pro. Before I embark on this
switch though, I have two questions.
Is there a "widget" or readymade script for uploading and
overwriting posted data via an admin web page? I am somewhat
familiar with php, but have not tackled this before on my own.
Also our site shows boats and for each boat there is a small
photo gallery w/ descriptors. Looking for gallery options is what
originally lead me to Spry. Our needs entail a user friendly upload
process for said photos and an equally user friendly way to add
descriptions. Currently this is done through the admin section of
the site where we identify the boat and then upload 10 photos. We
would like to have the option to upload as few as two and as many
as 20 pix. to each vessel. In conclusion, is there an equally easy
way to upload/add pictures online in a dynamic way using Spry?
(thumbnails would need to be created simultaneously)
You can see an individual boat example here:
Boat
Detail
Notice what happens to the pix if you have less than 10. I
prefer the spry photo layout and think it will accommodate the
varing number of photos we get for each vessel.
Anyway, I appreciate any insight. I think this program would
be a good match and am willing to learn as I go, but want to be
certain it meets that basic criteria before I jump in head first.
PS- I'm definately going to use it for my personal art site
and can't wait! Thank you.

The OneDrive is up to date and I unistalled and reinstalled it as well. OneNote is a default app in the phone and can not be uninstalled or reinstalled.
I also found that if I log into OneDrive using Internet Explorer on my phone I am not able to open any OneNote files from there either. All other file types work just fine. Using PC I have no issue opening the OneNote files so must be something wrong in the OneNote app in my phone itself.
And I do have the latest software update on my phone.

Show thumbnail with spry

Hi,
I want to upload images using ADDT.
Normally I show the thumnails with the "show thumbnail"server behaviour.
Now I want to create a spry image gallery.
How can I get the thumnails with spry from the images which I have uploaded with the "Upload and Resize Image" serverbehaviour?
Is this possible?
Regards,
C.J.

Hi Günter,
>wow, that is one of the greatest suggestions I read since a long time
Man, I'll print your post and show to my kid :)
>Maybe some PHP based preprocessing of the recordset´s column value, e.g. a str_replace or whatever ?
I solve this issue using the getimagesize() function and adding the size to the file name using substr():
list($img_width, $img_height, $img_type, $img_attr) = getimagesize("../GalleryFolderName/" . $row_detail2imagens['AlbumField'] . "/" . $row_detail2imagens['FileField']);
list($thumb_width, $thumb_height, $thumb_type, $thumb_attr) = getimagesize("../GalleryFolderName/" . $row_detail2imagens['AlbumField'] . "/thumbnails/" . substr($row_detail2imagens['FileField'], 0, -4) . "_140x105" . substr($row_detail2imagens['FielField'], -4));
$thumb_width = ($thumb_width / 10) * 7;
$thumb_height = ($thumb_height / 10) * 7;
This generates the code for thumbnails section of my xml. Notice that $thumb_width and &thumb_height are set to 70% of the actual file size. This makes the Spry thumbs to grow onmouseover.
It is also important to notice is needed to use a nested loop to sort the images per albums.
Cheers!
Marcell

Spry Effects - Grow/Shrink

Hello DW people -
Trying to use the Spry behaviors in CS3. I need to put 200
photos on a commercial site I'm building and I want the photo to
start small on the page and grow on mouseover . I think the spry
behavior is close - but it puts the starting size of the photo as
100%. How do I set it so the thumbnail is the starting size? I have
to get this site delivered soon and this is my last puzzle.
Right now, the behavior goes: 100% onclick 25% to 100% -- so
it's big, then little, then bit.
I just want 25% on mouseover - 100%. Just little to big.
If I can't figure this out, I'll have to purchase a gallery
or use popups. Spry would be way sexier.
Thanks!
Cathy

How did you figure it out?
I use onLoad first to set the right size, the onClick Grow
for the effect.

Spry Slide Show-how to use one size photo for large photo and thumbnail?

Hi all,
I'm am using Adobe's Spry Slide Show. I can only use one size photo 640x480px for both the large photo and the thumbnail.
I changed the size of the small thumnail on the html:
                 <li><a href="Photos/TestPhoto640x480.jpg" width="490" height="367"><img src="Photos/TestPhoto640x480.jpg" width="63" height="47" alt="photos-1.jpg" /></a></li>
The thumbnail looks fine until you hit Live View or Preview in Browser then photo comes in full size and you can only see the upper left hand corner.
I assume that the java is doing this. But I have no training in Java.
How can I change the Java Code so the thumbnail comes in at 63x47px?
Many thanks.

Wish I could use scaled down versions of the thumbnails-but I can't.
Why not?
    img.src = info.src;
    img.style.width = "490px";
    img.style.height = "368px";
You're shooting yourself in the foot with this. It's overriding your HTML and CSS values.
As an FYI, Adobe Abandoned the Spry framework late last year.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You might want to cut your losses right now and switch to something better suited to modern web devices & browsers.
jQuery Fancybox
http://fancybox.net/
20 of the best jQuery Slideshows
http://vandelaydesign.com/blog/web-development/jquery-slideshow/
Nancy O.

Spry Grow Thumbnails

Similar Messages

Maybe you are looking for