Grow and Shrink the gallery's "mainImage"

Question

Grow and Shrink the gallery's "mainImage"
I may pursue another option with the
Class on trigger
In this sample, a CSS class is set on the trigger to alert the user that something happens on the element. This is set as an option in the constructor.
<script type="text/javascript">
var highlight_tooltip = new Spry.Widget.Tooltip('highlighttrigger', '#classonme', {hideDelay:500, hoverClass:"enlarge"})
</script>
We have the main image in the photo gallery at full size.
This is the image placeholder called "main image".
Currently it is looks like this:
<img id="mainImage" alt="main image" src=""/>
I assume we add a mark-up similar to the icon grow effects code.
So I will take a stab it now;
<div id="Photograph" spry:region="dsPhotograph" onclick="HandlePhotograhClick('{ds_RowID}');" onmouseover="GrowPhotograph(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@Photographheight}');" onmouseout="ShrinkPhotograph(this.getElementsByTagName('img')[0]);"> <img src="galleries/{dsGalleries::@base}{dsGallery::Photograph/@base}{@Photographpath}" alt="Photograph for {@Photographpath}" width="Not Sure" height="Not Sure" id="tn{ds_RowID}" style="left: 0px; right: 0px;" onmouseover="this.style.cursor='pointer'" /> </div>
      <p class="ClearAll"></p>
//need to look at ClearAll
    </div>
//Now Add stuff the gallery.js
// Show the image of the current selected row inside the dsPhotos data set.
function ShowCurrentImage()
     var curRow = dsPhotos.getCurrentRow();
     SetMainImage("galleries/" + dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"], curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
//I Need a variable like;
["@bigPhoto"]
//Now I need add a function
function HandlePhotographClick(id)
     //StopSlideShow();
     //dsPhotos.setCurrentRow(id);
     //ShowCurrentImage();
        //call Photograph grow ???
// Trigger the animation of the Photograh growing to it's next largest size.
function GrowPhotograph(img, width, height)
     Spry.Utils.addClassName(img, "inFocus");
     img.style.zIndex = 150;
     var id = img.getAttribute("id");
        //ADD This to the function GrowThumbnail in Gallery.js
//after//
     //var twidth = Math.floor(width * .75);
     //var theight = Math.floor(height * .75);
     //var tx = (gThumbWidth - twidth) / 2;
     //var ty = (gThumbHeight - theight) / 2;
     var pwidth = Math.floor(width * 1.75);
     var pheight = Math.floor(height * 1.75);
     var px = (pThumbWidth - pwidth) / 2;//need to check this may not need
     var py = (pThumbHeight - pheight) / 2;//need to check this
     SizeAndPosition(id, tx, ty, twidth, theight, function(b){gBehaviorsArray[id] = null;});
// Trigger the animation of the Photograph shrinking.
function ShrinkPhotograph(img)
     Spry.Utils.addClassName(img, "inFocus");
     img.style.zIndex = 1;
     var id = img.getAttribute("id");
//Need to look at this stuff below, any input from anybody would be good....
     SizeAndPosition(id, 0, 0, gThumbWidth, gThumbHeight, function(b){gBehaviorsArray[id] = null; Spry.Utils.removeClassName(img, "inFocus");});
// Show the image of the current selected row inside the dsPhotos data set.
function ShowCurrentImage()
     var curRow = dsPhotos.getCurrentRow();
     SetMainImage("galleries/" + dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"], curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
Message was edited by: W_Bell

Answer 1

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
class GrowRight
public static void main (String args[]) throws InterruptedException
JLabel label = new JLabel ("this is a test...");
final JFrame frame = new JFrame ("GrowRight");
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
frame.getContentPane().setLayout (new FlowLayout());
frame.getContentPane().add (label);
frame.setSize (label.getPreferredSize());
frame.pack();
final Dimension d = Toolkit.getDefaultToolkit().getScreenSize();
frame.setLocation (d.width - frame.getSize().width, 0);
frame.setVisible (true);
frame.addComponentListener(new ComponentAdapter(){//<---------------------
  public void componentResized(ComponentEvent ce){
    frame.setLocation (d.width - frame.getSize().width, 0);
Thread.sleep (5000);
label.setText ("for the next sixty seconds, this station...");
frame.setSize (label.getPreferredSize());
frame.pack();
}