Custom Gallery Rotator

The project is technically a feature that will be added to an existing system. The project starts with the jQuery plugin named: "Responsive Image Gallery by Mary Lou". Here is a link to it: [login to view URL] The following modifications need to be applied to the plugin: 1. The thumbnails bar has to be below (not above) the main display area. 2. The main image in the main display area should be displayed as big as possible according to the screen size. For example, Facebook has this feature. Open an image album in Facebook, and notice that the displayed image is dynamic enough in terms of size so if the image is big enough, it occupies as much as possible of the screen. Even if you zoom in/out the browser, the image size is scaled and adjusted in order to offer the best possible quality. Again, check the behavior in case of "high" resolution images in Facebook. 3. The whole thing (the main display area + the thumbnails bar) should be placed in one div. An HTML5 full screen functionality needs to be provided to that DIV. A full screen toggle button needs to placed somewhere on one of the div corners (preferably the bottom right). Notice that the div itself (before full screen) is big enough and dynamic as indicated earlier. 4. All thumbnails are regular images (JPG). However, the main file (the one that will be displayed in the main display area) might be not an image, it can be an mp4 video or a pdf (beside a regular image). If it's a video, an html5 video tag should take place in the main display area and the video has to be playable (initially stopped). If it's a pdf, an iframe element needs to take place in the main display area (sourced to the provided pdf file) 5. In case of images (not videos or pdfs), a zoom functionality has to be provided to the image in the main display area. A preferable plugin is iviewer. Here is a link: [login to view URL] Nevertheless, any alternative solution is acceptable as long as it provides the same functionality. Notice that it's nice to have that rotation control (already provided by iviewer plugin). 6. Essential Step: The whole plugin will be initially hidden on the page, it will be displayed on a JavaScript call. The caller will provide three parameters: A User ID (integer), a vertical bar ('|') separated thumbnail URLs (http://test/[login to view URL]|http://test/[login to view URL]), and a comma separated File IDs (comma separated integers). When the main div is shown, the thumbnails in the thumbnails bar need to be loaded right away. Then, a WCF (Ajax-enabled) web service (just like this example: [login to view URL]%28v=vs.110%[login to view URL]) needs to be invoked. Two parameters will be passed to the web service: the user id and the current image id, the result of the web service will be a JSON object which consists of two strings: the encoded file URL and the description of the file. the encoded fileURL has to be decoded in JavaScript using decodeURIComponent function and then assigned and displayed in the main display area (pay attention to the file type in order to display the right element). The description needs to be shown in the description area below the main display area (check Responsive Image Gallery plugin to see how image description works). Notice that you will need to use the correct image id when you call the web service (the current image id always changes in order to reflect the image currently displayed). 7. A close button needs to be placed on the top right corner and that will dispose/close the whole div. 8. While the service is being invoked, an ajax loader (gif) should be displayed (I believe it's already there by Responsive Image Gallery Plugin). 8. The main DIV (that contains everything) should be modal (CSS3 is OK to be used in order to achieve the Modal functionality. However, any modal functionality is acceptable) 9. All major browsers need to be supported (IE11, Firefox, Chrome, and preferably Opera)