Image panel

hi guys
i have another problem!
i have created an ImagePanel object to display an image. i have set the preferred size of the Panel to the image's dimensions and added it to an internal frame. when i pack and display the frame all i get is the title bar.
after a little investigation (several hours) i found that the size of the ImagePanel is actualy 0 x 0; but is clearly set to the corrcet dimensions earlier on, using setPrefferredSize(new Dimension(int, int)). Since i am fairly new to awt/swing i wondered if there is anything i have missed/don't understand.
i can post code if need but i thought i would see if there are any ideas before i post it since it is quite long
cheers
steve

hi,
it is a lay out prblem
you have to set teh layout of the container to a layout that keep the preferred size such as flow layout

Similar Messages

Image panel Photoshop CC (for old designer)

Today I realized that they are not very smart; i'm an old designer (60!!) and i do a Creative Cloud Subscription.
My problem is to save a copy of some images with 150 ppi + 450 ppi. How to do this with new Image panel of Photoshop CC?
Before i always used Photoshop CS2! This is my Image panel!
Best!

What trips you up?
If you want to maintain physical size while changing the resolution change the Width or Height units to mm (for example) and enter the new image resolution.

In Photoshop 2014 how do you use the clone stamp tool and keep the image panel from moving

I don't quite know how to use the clone stamp tool in the Photoshop 2014 version. When I click on the clone stamp it creates a duplicate of the image and it moves around and I can not apply the clone stamp to the area I want to correct. How do you lock it down to keep it from moving?

Hi Smoothery4501,
The Photoshop clone stamp tool allows you to copy one area of an image and copy it onto another area.
Click on the clone stamp tool then press the alt key on the keyboard and click on the image to define a source point.
Please refer to below blog for further info
Clone Stamp Tool « Julieanne Kost's Blog
Thanks

Select region in image / panel

Hi, I am displaying an image currently on a JPanel using the Graphics and BufferedImage class. Does anyone know of any method that i can use to select a region of the image. Also if the image has been scaled to fit the GUI, how will i know that the rectangle co-ordinates are accurate pixel representations ... Not sure if dat makes sense.
Thanx

You can use Robot to capture an image of the screen (or any portion), but it would probably be easier to simply draw to where you want the image, by passing the Graphics object you want to draw to into paint()

Make the panel fit the image so MouseListener only invoke when click image

I want to add MouseListener to only the image itself. So I draw the image onto a image panel, add that panel onto the main panel, then add the main panel onto the frame. However, my problem is that the size of my image panel is too large, it take up almost the entire frame. So my mouselistener response not only when I click onto the image, but also anywhere in my image panel. I try to resize the image panel to fit the size of my image, but no luck. Is there a solution for this. I feel like, it got something to do with the layout. Here is my code, if you mind read it. Thank you very much
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
import javax.swing.*;
public class ImageRotate
     private static final String LABEL = "MIDI PROTOCOL";
     private JPanel mainPanel = new JPanel();
     private JPanel labelPanel = new JPanel();
     public ImageRotate()
          mainPanel.setOpaque(true);
          mainPanel.setBackground(Color.YELLOW);
          mainPanel.setLayout(new BorderLayout());
          Font labelFont = new Font("serif", Font.BOLD, 30);
          createLabelPanel(LABEL, labelFont);
          labelPanel.setOpaque(false);
          mainPanel.add(labelPanel, BorderLayout.NORTH);
          Drawing d = new Drawing();
          d.setOpaque(true);
          d.addMouseListener(new MouseAdapter(){
               public void mousePressed(MouseEvent e)
                    System.out.println("Pressing on the image");
          d.addMouseMotionListener(new MouseAdapter(){
               public void mouseDragged(MouseEvent e)
                    System.out.println("Dragging the image");
               public void mouseMoved(MouseEvent e)
          mainPanel.add(d, BorderLayout.CENTER);
     private void createLabelPanel(String str, Font font)
          JLabel label = new JLabel(str);
          label.setFont(font);
          label.setForeground(Color.RED);
          labelPanel.add(label);
     public JPanel getPanel()
          return mainPanel;
     public static void main(String args[])
          JFrame frame = new JFrame();
          frame.getContentPane().add(new ImageRotate().getPanel());
          frame.setSize(new Dimension(300, 300));
          frame.setVisible(true);
class Drawing extends JPanel
     Image img;
     public Drawing()
          setSize(new Dimension(100,100));     //Try to make the panel fit the image...NO LUCK
          setBackground(Color.GREEN);
          img = Toolkit.getDefaultToolkit().createImage("images/nob.gif");
     public void paintComponent(Graphics g)
          super.paintComponent(g);
          Graphics2D g2D = (Graphics2D)g;
          g2D.drawImage(img, 40, 40, this);
}

yunaeyes wrote:
In class Drawing extends JPanel, I did try to to set the panel to the image size but no luck there,
both setSize(new Dimension(100,100)), setPreferredSize(new Dimension(100,100)) does not make the panel smallerIt can be made to work. I find it hard to comment on unseen code.
>
BigDaddyLoveHandles wrote:
I think a better approach is to handle the mouse click properly -- see if the click is over the image or not.Can you elaborate on this?The mousePressed method you posted assumes you are over the image. Check the mouse coordinates! If the component is bigger than the image this may not be so.

IMAGE NOT DISPLAYED OVER JButton ON JDialog

Hi,
I am trying to display an image over a JButton inside a JDialog(pops up on button click from an applet). But it is invisible. But I am sure that it is drawn on the ContentPane since when i click partially/half at the position
of the JButton I could see the JButton with the image. Actualy I am resizing the JDialog since I have two buttons, one to minimise and the other two maximise the size of the JDailog.
All the buttons are in place but not visible neither at the first place nor when the JDialog is resized.
The code is as follows:
package com.dataworld.gis;
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
import java.awt.print.*;
import javax.swing.*;
public class PrintThisPolygon extends JDialog {
     protected Image image;
     protected JButton print;
     protected JButton resize;
     protected JButton desize;
     private int pX=0, pY=0, pWidth=0, pHeight=0;
     public PrintThisPolygon(JFrame parent, Viewer viewer) {
          super(parent, "Print Polygon", true);
          this.setModal(false);
          getContentPane().setLayout(null);
          image = this.viewer.getScreenBuffer();
          pane = new Panel();
          print = new JButton("print", new ImageIcon("images/print.gif"));
          print.setBounds(0,5,50,20);
          print.setEnabled(true);
          print.addActionListener(new ActionListener(){
               public void actionPerformed(ActionEvent ae){
                    print();
          resize = new JButton("+", new ImageIcon("images/print.gif"));
          resize.setBounds(55,5,50, 20);
          resize.addActionListener(new ActionListener(){
               public void actionPerformed(ActionEvent ae){
                    resizePlus();
          desize = new JButton("-", new ImageIcon("images/print.gif"));
          desize.setBounds(105,5,50, 20);
          desize.addActionListener(new ActionListener(){
               public void actionPerformed(ActionEvent ae){
                    resizeMinus();
          getContentPane().add(print);
          getContentPane().add(resize);
          getContentPane().add(desize);
public String getAppletInfo() {
     return "Identify Polygon\n"
public void paint(Graphics g){
     System.out.println("Paint : pX " + pX + " pY :" + pY);
     g.drawImage(image, pX, pY, pWidth, pHeight, getBackground(), this);
protected void print() {
     ImagePrint sp = new ImagePrint(this.viewer);
public void resizeMinus(){
     repaint();
public void resizePlus(){
     repaint();
Can anybody has any clue. Can anybody help me out.
Thanx

I added resize code for those buttons and ended up with repaint problems too. When you manually resized the window everything was fine again. After a bit of digging around I found you need to call validate on the dialog and then things work.
IL,
There is the new scaling version of the code I modified above:package forum.com.dataworld.gis;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JDialog;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class PanelPaintFrame extends JFrame {
     public static void main(String[] args) {
          PanelPaintFrame frame = new PanelPaintFrame ();
          frame.setVisible (true);
     public PanelPaintFrame () {
          setBounds (100, 100, 600, 600);
          setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
          JButton showPrintDialogButton = new JButton ("Show Print Dialog...");
          JPanel buttonPanel = new JPanel ();
          buttonPanel.add (showPrintDialogButton);
          getContentPane ().add (buttonPanel);
          showPrintDialogButton.addActionListener (new ActionListener () {
               public void actionPerformed (ActionEvent e) {
                    PrintThisPolygon printDialog = new PrintThisPolygon (PanelPaintFrame.this);
                    printDialog.show();
          pack ();
     public class PrintThisPolygon extends JDialog {
          protected ImageIcon myOrigonalImage = null;
          protected Image image;
          protected JButton print;
          protected JButton resize;
          protected JButton desize;
          private int pX=0, pY=0, pWidth=0, pHeight=0;
          JPanel pane = null;
          public PrintThisPolygon(JFrame parent/*, Viewer viewer*/) {
               super(parent, "Print Polygon", true);
//               this.setModal(false);
               getContentPane().setLayout(null);
               // Substitute my own image
               myOrigonalImage = new ImageIcon (PrintThisPolygon.class.getResource ("images/MyCoolImage.jpg"));
               // Start off full size
               pWidth = myOrigonalImage.getIconWidth();
               pHeight = myOrigonalImage.getIconHeight();
               image = myOrigonalImage.getImage ().getScaledInstance(pWidth, pHeight, Image.SCALE_DEFAULT);
//               image = this.viewer.getScreenBuffer();
//               pane = new Panel();
               // Create a JPanel to draw the image
               pane = new JPanel(){
                    protected void paintComponent(Graphics g) {
                         System.out.println("Paint : pX " + pX + " pY :" + pY);
                         g.drawImage(image, pX, pY, pWidth, pHeight, getBackground(), this);
               pane.setBounds (0, 0, pWidth, pHeight);
               // Load the button image using a URL
               print = new JButton("print", new ImageIcon(PrintThisPolygon.class.getResource ("images/print.gif")));
//               print = new JButton("print", new ImageIcon("images/print.gif"));
               print.setBounds(0,5,55,20);
               print.setEnabled(true);
               print.addActionListener(new ActionListener(){
                    public void actionPerformed(ActionEvent ae){
                         print();
               resize = new JButton("+", new ImageIcon("images/print.gif"));
               resize.setBounds(55,5,50, 20);
               resize.addActionListener(new ActionListener(){
                    public void actionPerformed(ActionEvent ae){
                         resizePlus();
               desize = new JButton("-", new ImageIcon("images/print.gif"));
               desize.setBounds(105,5,50, 20);
               desize.addActionListener(new ActionListener(){
                    public void actionPerformed(ActionEvent ae){
                         resizeMinus();
               // Setup a transparent glass panel with no layout manager
               JPanel glassPanel = new JPanel ();
               glassPanel.setLayout (null);
               glassPanel.setOpaque (false);
               // Add the image panel to the dialog
               getContentPane().add(pane);
               // Add the buttons to the glass panel
               glassPanel.add(print);
               glassPanel.add(resize);
               glassPanel.add(desize);
               // Set our created panel as the glass panel and turn it on
               setGlassPane (glassPanel);
               glassPanel.setVisible (true);
               setBounds (100, 100, pWidth, pHeight);
//               setBounds (100, 100, 500, 300);
          public String getAppletInfo() {
               return "Identify Polygon\n";
//          public void paint(Graphics g){
//          protected void paintComponent(Graphics g) {
//               System.out.println("Paint : pX " + pX + " pY :" + pY);
//               g.drawImage(image, pX, pY, pWidth, pHeight, getBackground(), this);
          protected void print() {
               // Pretend to print
//               ImagePrint sp = new ImagePrint(this.viewer);
               System.out.println ("Print view...");
          public void resizeMinus(){
               // Scale the image down 10%
               int scaledWidth = pWidth - (int)(pWidth * 0.1);
               int scaledHeight = pHeight - (int)(pHeight * 0.1);
               scaleImage (scaledWidth, scaledHeight);
          public void resizePlus(){
               // Scale the image up 10%
               int scaledWidth = pWidth + (int)(pWidth * 0.1);
               int scaledHeight = pHeight + (int)(pHeight * 0.1);
               scaleImage (scaledWidth, scaledHeight);
          private void scaleImage (int scaledWidth, int scaledHeight) {
               // Create a new icon for drawing and retrieve its actuall size
               image = myOrigonalImage.getImage ().getScaledInstance (scaledWidth, scaledHeight, Image.SCALE_DEFAULT);
               pWidth = scaledWidth;
               pHeight = scaledHeight;
               // Resize
               setSize (pWidth, pHeight);
               pane.setSize (pWidth, pHeight);
               validate();
}

How can I update my image in a loop?

I want to use "paint( )" automaticlly to display my 3D image slice by slice. I can't understand why it only display my final slice. Below is my coeds:
// press butten to display my 3D image slice by slice
if(e.getActionCommand() == "Play")
     for(int i = 0; i < finalSlice; i++)
          if(presentSlice == finalSlice)
               presentSlice = 0;
          presentSlice = presentSlice + 1;
          // read a new slice from a 3D data. Return
          // matrix is a new 2D image data
          pixel = mccd.readSlice(presentSlice, mapModel);
          //Gererate a new slice image
          img = createImage(new MemoryImageSource(width, height, pixel, 0, width));
          //input the image onto my image panel;
          imgPanel.imageUpdate(img);
          } // Here can not work. Only can               // work in the last time of loop.
public class ImagePanel extends JPanel
     public void imageUpdate(Image image)
          this.image = image;
          repaint();
     public void paintComponent(Graphics g)
          super.paintComponent(g); //paint background
          //Draw image at its natural size first.
          g.drawImage(image, 0, 0, this);
Thanks a lot for any help. Could you email me on
[email protected] Thanks again

You can try the following:
Create a new object that extends runnable. Have a variable that keeps track of the current slice. In its paint() method, paint the current slice.
Now, in its run() method start from the first slice and get into a loop that calls Thread.sleep(1000) and then makes the current slice = to the next slice. you can replace 1000 with whatever duration you want.
My recommendation is that this object should extend a container. After that, you just add the component into a window and display it.
Hope this helps,
Calin
PS: I did this and it worked for me. If you need it I will try to give you some code you can start from.

How to show an image(jpg/gif) on a JTabbedPanel

Hi
I tried to show an image on a JPanel of a JTabbedPanel.
I the only way to show it for some time was this:
in the StateChangedListener I use drawImage when the selected panel is teh one I want to draw the image at.
Tracing code makes the panel show, burt when I step
all the way up, the panel will be repainted without my image.
I use mediatracker to get the image loaded.
Any Idea
Hanns

JTabbedPane has components as its tabs. Using a JPanel is not mandatory. Try using a JLabel instead with an Icon (use ImageIcon) in it.
JTabbedPane tabbed = new JTabbedPane();
tabbed.addTab(
    "my image panel",
    new JLabel( new ImageIcon( "images/MyIcon.gif" ) )
);if your were referring to the image of the little tabs, use this:
JTabbedPane tabbed = new JTabbedPane();
tabbed.addTab(
    "my tab",
    new ImageIcon( "images/MyImage.gif" ),
    myPanel // instance of Component, can be a JPanel or any JComponent you want.
);

How to use an image as button?

I want to set an image as the background of a frame, and also want use four regions of the image as four buttons. How?

How about an image on the JFrame with four JButtons with some type of image (even if you copy a piece of you original image to place on the button)? I played around with this and its kind of neat. Easier from a gui perspective to see buttons than flat regions -
Have fun
//in a class that extends JFrame, create the image panel and add buttons with icons to it...
Container contentPane = getContentPane();
ImagePanel imagePanel = new ImagePanel(); //see below
contentPane.add(imagePanel);
JButton button = new JButton();
button.setIcon(new ImageIcon(WorldMap.class.getResource("someGIF.gif"))); //or other form of getting and setting an icon
button.setSize(65,45);
mcsButton.setLocation(405,175);
mcsButton.setContentAreaFilled(false); //important so the button looks like a raised part of the picture...not a grey box with an icon.
mcsButton.addMouseListener(new MouseAdapter()
public void mouseClicked(MouseEvent e)
//do something
imagePanel.setLayout(null);
imagePanel.add(mcsButton,null);
//code to put an image on a JPanel I received from this forum
class ImagePanel extends JPanel
private Image image;
public ImagePanel()
image = Toolkit.getDefaultToolkit().getImage("C:/WholeWorldViewJPG.jpg");
MediaTracker tracker = new MediaTracker(this);
tracker.addImage(image, 0);
try
tracker.waitForID(0);
catch (InterruptedException e)
public void paintComponent(Graphics g)
super.paintComponent(g);
Dimension d = getSize();
int clientWidth = d.width;
int clientHeight = d.height;
int imageWidth = image.getWidth(this);
int imageHeight = image.getHeight(this);
g.drawImage(image, 0, 0, this);
for (int i = 0; i * imageWidth <= clientWidth; i++)
for (int j = 0; j * imageHeight <= clientHeight; j++)
if (i + j > 0)
g.copyArea(0, 0, imageWidth, imageHeight, i * imageWidth, j * imageHeight);
}

Problem in displaying gif image on to the JFrame

i added gif image in to the jframe but when i run that image the image get distorted very much.

public class MyFrame extends JFrame
     private static final String sIMAGE_PATH = "My\\Path\\To\\Image\\fileName.gif";
     public MyFrame()
          super("Frame with image on it");
          init();
     private void init()
          JPanel panel = new JPanel(new BorderLayout());
          ImageIcon image = new ImageIcon(sIMAGE_PATH);
          JLabel label = new JLabel(image);
          panel.add(label, BorderLayout.CENTER);
          this.setContentPane(panel);
     }Hope this helps..

Resizable panels in a JApplet, sort of like a Frame

I have a dialog box that has a tree on the left and images/text displayed on the right. I have the tree and text placed on two different panels. I want the panels to be resizeable, in the way an HTML frame is resizable. This way the user can shorten the tree panel, which in turn widens the text/image panel...or vice versa. Problem is that I have no clue where to begin!
Any/All help is apprecaited!

Yup! JSplitPane will work quite nicely. <sarcasm>I greatly appreciate everyone's help!</sarcasm>

Images in Layout

I'm trying to develop an applet, i'm working from some old books I bought a few years ago now, so i'm not even sure that the code i'm using is still current, tbh my applet isn't showing right now (not with Mozilla on Fedora 3, but does on XP with Mozilla, ???).
What i'm trying to acheive is a graphics panel with which I can put into a layout just like another component. I'll need to access it from the applet, in one version i'll just be doing some threaded drawn animations, but mainly I want to be able to load images on the fly. I can acheive both of these using the main frame graphics/paint, but in a layout i'm having trouble.
I've tried certain ways, such as making a component, JInternalFrame, etc... i've been succesful to a certain degree but where I succeed, it fails in other areas, i.e. no image, or no access to manipulate.... HELP HELP HELP
Here i've included an example that i'm developing that I desire to put said image panel into, i.e. in the card panel (3). Any help will be greatly appreciated...
ref:
http://www.rawstar7.co.uk/prog/java_01/eg_01_01.htm

My experience shows that JVM for windows is less sencitive for some errors.
Check up your code. Working with older version of API is not so bad idea
if you are going to put your applet in the Internet.

Need help about dragging a rectangle on a image

hello
i need to draw a rectangle on image .this is my code does this code support my requirement .
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.MouseInputAdapter;
import java.awt.image.BufferedImage;
import java.io.*;
import javax.imageio.ImageIO;
public class RectangleDrag extends JPanel {
Rectangle tt=new Rectangle();
int sx=0,sy=0,dx=0,dy=0;
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d=(Graphics2D)g;
g2d.draw(tt);
private MouseInputAdapter mia = new MouseInputAdapter() {
public void mousePressed(MouseEvent e) {
sx=e.getX(); //start x
sy=e.getY(); // start y
public void mouseDragged(MouseEvent e) {
dx=e.getX(); //end x
dy=e.getY(); // end y
int width=Math.abs(dx-sx);
int height=Math.abs(dy-sy);
int side=Math.max(width, height);
               int side1=Math.min(width,height);
int x, y;
if(sx<=dx) {
x=sx;
} else {
x=sx-side;
if(sy<=dy) {
y=sy;
} else {
y=sy-side;
tt.setRect(x,y,side,side1);
repaint();
     private JPanel getContent(BufferedImage image) {
JPanel panel = new JPanel(new GridLayout(1,0));
panel.add(new JLabel(new ImageIcon(image)));
panel.add(new JLabel(new ImageIcon(getImage(image))));
return panel;
public static void main(String[] args) {
RectangleDrag test = new RectangleDrag();
test.addMouseListener(test.mia);
test.addMouseMotionListener(test.mia);
          String path = "C:/Documents and Settings/v.kirankumar/My Documents/jpg/32370.jpg";
BufferedImage image = ImageIO.read(new File(path));
JFrame f = new JFrame();
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          f.getContentPane().add(test.getContent(image));
// f.pack();
// f.getContentPane().add(test);
f.setSize(400,400);
f.setLocation(200,200);
f.setVisible(true);
}

this is the modified code here am getting an image but i couldnt draw rectangle exactly on the image.
getImage(image); isnt making any difference
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.MouseInputAdapter;
import java.awt.image.BufferedImage;
import java.io.*;
import javax.imageio.ImageIO;
public class RectangleDrag extends JPanel {
Rectangle tt=new Rectangle();
int sx=0,sy=0,dx=0,dy=0;
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d=(Graphics2D)g;
g2d.draw(tt);
private MouseInputAdapter mia = new MouseInputAdapter() {
public void mousePressed(MouseEvent e) {
sx=e.getX(); //start x
sy=e.getY(); // start y
public void mouseDragged(MouseEvent e) {
dx=e.getX(); //end x
dy=e.getY(); // end y
int width=Math.abs(dx-sx);
int height=Math.abs(dy-sy);
int side=Math.max(width, height);
int side1=Math.min(width,height);
int x, y;
if(sx<=dx) {
x=sx;
} else {
x=sx-side;
if(sy<=dy) {
y=sy;
} else {
y=sy-side;
tt.setRect(x,y,side,side1);
repaint();
private JPanel getContent(BufferedImage image) {
JPanel panel = new JPanel(new GridLayout(1,0));
panel.add(new JLabel(new ImageIcon(image)));
return panel;
public static void main(String[] args) {
RectangleDrag test = new RectangleDrag();
test.addMouseListener(test.mia);
test.addMouseMotionListener(test.mia);
String path = "C:/Documents and Settings/v.kirankumar/My Documents/jpg/32370.jpg";
BufferedImage image = ImageIO.read(new File(path));
JFrame f = new JFrame();
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.getContentPane().add(test.getContent(image));
f.pack();
f.getContentPane().add(test);
f.setSize(400,400);
f.setLocation(200,200);
f.setVisible(true);
}

Sliding Panels Problem: Content panels with different width?

I'm trying to create the exact same behaviour as this Argentinian Photographer have done:
http://germansaezphoto.com/music/radiohead/
I've read and used the files in your tutorial: http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html
and searched the forum but couldn't find an answer.
I'm almost there. The problem is that I have 6 test photos that are of the same height (and the same height as the slidingpanel view port) but different in width. If I set the class .SlidingPanelsContent to the same width as the largest picture(i.e. panel) then it creates a white space until the next pic starts. And If I set the width to the same as the smallest picture then it crops the other ones.
Here is the div in the index file:
<div class="SlidingPanels" id="panelwidget">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" <img src="images/panel-2.jpg" width="645" height="430" /></div>
    <div class="SlidingPanelsContent" <img src="images/panel-1.jpg" width="594" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-3.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-4.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-5.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-6.jpg" width="594" height="430" /></div>
</div>
</div><br />
<a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
    href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> |
<a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#"
    onclick="sp1.showLastPanel();">Last Panel</a>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
And here is the classes in the css:
.SlidingPanels {
     position: relative;
     float: left;
     width: 1000px;
     height: 430px;
     padding: 0px;
     border: none;
.SlidingPanelsContentGroup {
     position: relative;
     float: left;
     width: 10000px;
     margin: 0px;
     padding: 0px;
     min-height:0;
     border: none;
.SlidingPanelsContent {
     width: 645px;
     height: 430px;
     float: left;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     border: none;
In the css file before the .SlidingPanelsContent class Adobe states that they in their default implementation has set the width to the same as the view port to ensure that only one panel at a time can be viewed within the view port. But I want the opposite.
How do I solve this?

It seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
Beth

Return to front window the image changes back to the first one

I have two images loaded in sequence. After loading the second
image, I put the frame into the background. When I open the image
frame (to the front window), the first image is shown (but not the
second as expected). Why and how to show the lastest image?
Thank you.

I got the problem solved. Looks like that java keeps all the
panel objects (even if I assign a panel pointer to null, the
panel object is still in the Panel object pool); and when
the buried screen is up to the front window again, java
calls paintComponent() for all panels, and thus the first
image panel and 2nd image panel, and so on, but with
the last created image panel' paintComponent() called
first, and thus creating the illusion that the iamge is
returned to the original one and not the lastest one.
So the solution is to use an integer to label the lastest
imag panel and use if ( == latest) then draw() in
paintComponent().

Image panel

Similar Messages

Maybe you are looking for