Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Thumbnails

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

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.
 
author
Posts: 15385
6
  • 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 = 'this.style.height=(this.style.height = "30px")?"300px":"30px";this.style.width=(this.style.width = "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 = window.open(this.src);"

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

Hopefully I gave you some ideas
Eric
 
To do a great right, do a little wrong - shakepeare. twisted little ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic