The input to the widget will be a a Json list of page numbers and corresponding image URLs. (i.e. [1, [url removed, login to view]], [2, [url removed, login to view]]). The program shall be able to take the Json list and display the thumbnail images of the pages in a row or grid.
There may be a large number of images and so the thumbnails will load in a scrollable container. The program shall “lazy load” the thumbnails as the images come in to view of the user. For fast load speeds, images that are not “in view” of the user should not be loaded.
The user should be able to change the order of the images by dragging and dropping an image to a new position. Finally, the widget should have a function to output an updated version of the Json list (that was originally received) with the ‘new’ order created by the user.
Include a sample page where I can test and see the widget in action. In the sample page when a user clicks on a thumbnail the image should be displayed in large above the grid. The input to the grid can be hardcoded for the sample page - there is no server side required for this project, it is entirely a client side project. The sample file should work if I open in my browser straight from disk.
A sample flow:
The page loads
[url removed, login to view] is called, passing in the JSon list and the element on the page where the grid of thumbnails is to be displayed.
The thumbnails are displayed and the user drags and drops to reorder them.
The user clicks "Submit", which calls [url removed, login to view], which returns the JSon list with the new page ordering.
See attached diagram.
The display of the images in the row/grid for sorting should be done using JQuery sortable UI - [url removed, login to view]
An example of a query lazy load implementation, this is just the first google result for "jquery lazyload", other options may be better: [url removed, login to view]
23 freelancers estão ofertando em média $402 para este trabalho
Hello, I am Yasser, I have 8+ years of experience in web development, and I am clear with your requirements of the images widget. I can start right now and complete within 2 days. Thanks