Win a copy of Kotlin in Action this week in the Kotlin forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Thumbnails  RSS feed

s penumudi
Ranch Hand
Posts: 113
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Are you aware of any tag libraries that can be used to create thumbnail at client side and onClick open a popup to show complete Image with any tooltips or image maps that Image has?

In my application we have reports that are shown in images using BAR Charts and Line Charts.
We are using JfreeChart and CEWOLF to generate these charts.
Currently complete images are being shown on the browser, which is causing a bit of vertical scrolling.
Requirement is to remove these scroll bars and show thumbnails instead. And on click show complete image.

I can see the below approaches to acheive this.
Approach 1:
I can reduce the size of the image while displaying onto the browser and onClick through javascript get Image URL and open it in new window.
Problem with this would be I cannot get tooltips or Image Maps that are generated by CEWOLF for this pop up Image.

Approach 2:
Same a One. On javascript onClick function, instead of opening image,
I might have to make one more request to the server to get complete image and show that image.
I just don't want to do this because, it is waste of resource and time consuming to rebuild same image again.

Approach 3:
Use AJAX. I just thought of this. I am not sure if there will be any browser limitations for this.
I thought I can use DOM structure and get the Image Map values and using popupWindow.document.wrtie(),
I can recreate maps for pop up Image.

I was wondering other than above 3 approaches if there is any other approach that I can use for clean solution to this problem.

Your input would be great help to me.
Eric Pascarello
Posts: 15385
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am in a crunch at work that is why I have not answered this sooner. Still am so I need to make it short.

Basically you have a two options in my mind. The first is you can have the image sizes set to a smaller size. When the user clicks on it you can increase the size to the correct portions. It would then cause the page size to shift. This way keeps you from having to regenerate the iamges for a second time.

basic idea is

onclick = ' = "30px")?"300px":"30px"; = "30px")?"300px":"30px";'

Now you could go the pop up route of just opening the image directly. I am assuming that you have a page that generates it.

onclick="winpop =;"

You can set the window parameters and such if you want.

Hopefully I gave you some ideas
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!