Write a javascript widget to reorder a set of images in a browser

Write a client side Javascript widget that allows a user to reorder a set of images.

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]

Please read the description before bidding and include in your bid a short description of how you plan to create the widget. Bidders that do not include confirmation that they read the description a brief description of how they plan to implement will not be considered. Thank you for bidding!

Habilidades: HTML, Javascript, jQuery / Prototype, Desenvolvimento de Software

Veja mais: test my javascript, test a javascript, json calls, function of numbers, fast widget, container numbers list, container in c, better javascript, write query, write a, write a project, browser projects, javascript function display json, display json result html using javascript, lazyload, html json list, json jquery page, javascript load file, jquery write html, jquery display json, thumbnail grid, javascript write display, client browser, html lazy load, javascript change page view

Acerca do Empregador:
( 26 comentários ) suffern, United States

ID do Projeto: #6798386

Concedido a:


Hi, I can do your project with jquery in next steps 1)read json data,2) create all thumbs,3)create jquery reorder function,4)detect what thumbs see in view and for that thumb load image(lazy load for better speed),5)wh Mais

$333 USD em 2 dias
(99 Comentários)

22 freelancers estão ofertando em média $397 para esse trabalho


Hi Employer, I have read your description and been interested in your project. Let me help you develop the Reorder Javascript Widget as you mentioned. I'm ready to discuss and start to work on it now. ============== Mais

$600 USD in 15 dias
(155 Comentários)

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

$650 USD in 2 dias
(90 Comentários)

The lazy loading should be custom made for this project, if you use an existing library together with the jquery sortable it will most likely cause conflicts. You can message me to discuss the project details. R Mais

$500 USD in 5 dias
(14 Comentários)

Hi, i read your description and can see you need a javascript that would receive json data in the format you specified and render the images specified in the json (in a lazy loaded manner with scroll) such that the use Mais

$394 USD in 5 dias
(12 Comentários)

Hello Sir, Sir i am dam sure i can do this please give me one chance dont need to pay me any thing pay me when u see i am on right path but plz give me one chance to prove my self i am a real proffessional and authent Mais

$263 USD in 10 dias
(35 Comentários)

Hi! I have read the provided document and understand your requirements. Details to achieve the result: -Plugin will extend the JQuery grid function and use lazy loading for thumbnails -Enabling JSON data get and Mais

$250 USD in 7 dias
(33 Comentários)

I read your description and based on that I created an example which you can view : [login to view URL] After making a request to get the array of images it may need to get sorted. After t Mais

$250 USD in 2 dias
(58 Comentários)

Hello, I'm a web developer and have done several jobs successfully here, please look at my profile to see how clients talked about quality of my works. For a sample of my work, please check out this Chrome extens Mais

$500 USD in 4 dias
(6 Comentários)

Hi. thanks for your posting. I'm very happy to have a chance of bidding your project. I have experience in development of the projects like yours I'm exciting in your project. I have 25 programmers. We are professi Mais

$400 USD in 10 dias
(30 Comentários)

Dear Sir , I am writing in response to your advertisement. As a proof of concept I send a link to working script: [login to view URL] Of course this is only the demo but all you need is im Mais

$277 USD em 1 dia
(24 Comentários)

Hi, I'm very much interested in your project. I made a sample specific to your requirements. Please have a look here: [login to view URL] I have a question, is it going to be publicly sort Mais

$473 USD in 7 dias
(7 Comentários)

hello, I am an experienced web developer and I can finish your image sorting script in a few hours... please contact me if you intrested

$263 USD in 10 dias
(9 Comentários)

Hi, I can make a simple jQuery widget that loads a list of images from a json file and displays them in a grid array that allows the user to reorder the images and has a function GetJSon that allows the new list ord Mais

$255 USD in 10 dias
(3 Comentários)

Hello medforcetech, I have coded a sample project that reorders images and outputs the new order, similarly to how I would go about building a more comprehensive script for you to take in JSON list of images and upd Mais

$250 USD em 1 dia
(2 Comentários)

A proposal has not yet been provided

$566 USD in 10 dias
(6 Comentários)

Website Development Today your job posting has caught my attention because I’m a looking for a job. I have excellent experience in Website Development. I believe my abilities would be perfect for your venture. I can f Mais

$500 USD in 10 dias
(4 Comentários)

Dear Hiring Manager , Good Day I’m interested in the position of web developer you recently posted. I have been a working as web developer for 2 years, and am very familiar with WordPress and joomla. During my 2 y Mais

$555 USD in 7 dias
(0 Comentários)

Hi, would like to do it. have done one image editor where one can add/edit/remove picture and text and composed all in one banner image. So pretty comfortable with jQuery/javascript/jSon. This how i will do it Mais

$500 USD in 10 dias
(0 Comentários)

COMPLETED your [login to view URL] go to this URL "[login to view URL]" to take a look at what I did. Kindly ignore the ugly way of showing output.I have done this in 4 hours,So the UI may not be up to Mais

$250 USD em 1 dia
(0 Comentários)

Dear Hiring Manager , Good Day I’m interested in the position of web developer you recently posted. I have been a working as web developer for 2 years, and am very familiar with WordPress and joomla. During my 2 y Mais

$444 USD in 10 dias
(0 Comentários)