We show jobs from every employer career page, job board and news source we can find.
Salary
$30-250
Location
Houston, TX, United States
Posted on
Jun 20, 2020
Profile
HTML/Javascript to display image stacks with some viewing features
I need ONE simple page that contains all necessary code to do the following:
I have several stacks of images and want to display them each separately in the same view box (canvas).
I attached the full viewer box that should be developed and explain as following:
The yellow area shows the control buttons.
The green area should show thumbnails associated with the image stacks.
The red area shows the text associated with the image stack
The blue area (512x512 pixel) shows the image stack
Here the work flow:
The green area should show thumbnails (one under each other and when clicked the stack of that respective image stack should be shown I the blue large box.
At the same time, respective explanatory text for that image stack should be shown in the top red area.
There might be more thumbnails/image stacks than the height of the red box, so if more, then there should be a internal scroll bar so every thumbnail fits into that green box
Each image stack might have a lot of images, so loading everything at ones will slow down the user experience, so should be working somewhat asynchronous, so loading other images while can use the already loaded ones. Also, if someone looks at an image stack that still loads images, then there should be a busy icon and saying that images are still loaded.
The functions to use in the blue box are: scroll, zoom, pan, magnify glass and window/level.
The functions should be activated by clicking on the respective button/link which is located in the yellow box. (I can create buttons if you can’t)
Explaining functions:
Scroll: that means scrolling through all images of that respective image stack in the blue area. (basically showing one image after the other like a quick film – based on mouse movement)
Zoom: display the image the factor selected (2x, 3x, 4x). Best if there is a plus and minus button in control section to adjust the magnification
Pan: If an image is zoomed, then it does not fit in the blue area and therefore need to be able to moved around so that all areas of the enlarged images can be seen within the blue box.
Magnify Glass: An about 300x300 pixel square that enlarges the image under its area when moved around over the image in the blue area.
Window/level: Window/level is sort of changing contrast brightness, but please refer to: [login to view URL]
or
[login to view URL]
The following link shows a sample script (with ONE image stack) and with scroll and (sort of) window/level functions (scroll when left mouse and moved the mouse pointer) and window/level when right mouse clicked (and moved up/down or right/left respectively):
[login to view URL]
Please only bid if you have read and understood all the requirements and are able to provide as asked for.
Project needs to be finished within 3 days.
Budget is $100-$150 USD
Skills:
JavaScript
, Image Processing
, HTML
, jQuery
, AJAX
Company info
Sign Up Now - EmploymentCrossing.com