Responsive Slide Show and Virtual Tour Viewer with Pan & Zoom Built-in

This project was successfully completed by johnjspiteri for $1500 USD in 15 days.

Get free quotes for a project like this
Project Budget
$750 - $1500 USD
Completed In
15 days
Total Bids
Project Description

We are looking for a responsive slideshow that shows pictures, virtual tours (360 degree pictures) & YouTube videos with appropriate thumbnails.

Here's an example of what we are looking for:

[url removed, login to view]

Slideshow will take in an XML file, with set parameters ( sound/zoom/map/images/title/captions ) and output defined show. For example:



<title>Very Nice Home</title>


<tour-view>flat</tour-view> (or spherical)


<file-large>[url removed, login to view]</file-large>

<file-small>[url removed, login to view]</file-small>

<caption>bla bla</caption>



<file-large>[url removed, login to view]</file-large>

<file-small>[url removed, login to view]</file-small>

<caption> blupp blupp </caption>



<file-large>[url removed, login to view]</file-large>

<file-small>[url removed, login to view]</file-small>

<caption> bling bling </caption>





<caption> woooow </caption>


<description>.......... .......... ............ ...........

.......... .......... ............ ...........

.......... .......... ............ ...........

.......... .......... ............ ...........</description>

<map>Address goes here</map>


Here are some of the features desired:

1. HTML5/CSS and jQuery as the JavaScript library of preference

2. Completely responsive according to window-size: 2 image sizes will be available and smaller images to load first in smaller devices, but ability to switch between large and small viewer

3. Full Screen functionality (like the sample above)

4. Project title and picture captions at the top

5. Order of images as defined in the XML

6. Handles variable number of images/tours/youtube videos

7. Autorun of slideshow images/tours/youtube but stop/play button available

8. Virtual Tours (360 images) rotate completely before switching to next image in slideshow

9. Virtual Tours can be dragged right left with mouse (or "touch" on mobile device)

10. Both pictures and tours have a zoom-in feature, its depth also defined in the XML parameters

11. Thumbnail clicking switches images

12. Thumbnails to be bigger than sample above, mostly similar to:

[url removed, login to view]

13. Thumbnails to have overlay image if youtube video or virtual tour (360 image) in addition to regular thumbnail picture

14. Thumbnails not to be completely responsive and retain some of their large size in smaller screens

15. Spherical/Flat buttons to switch view between presentation mode (Default defined in xml)

Sample "Flat" View: [url removed, login to view]

Sample "Spherical" view: [url removed, login to view]

16. In addition to these requirements, we would like a set of buttons on the top-right-hand-corner of slideshow that can turn on/off certain features:

• Sound (on/off)

• Show/hide Address/Map

• Switch flat/spherical

• Show/hide description

Also, as shown in the sample above, it's imperative that the viewer has a very smooth moving/panning of pictures.

Compatibility with all common browsers and mobile devices is very important

We also need the full source code used in the project when project is delivered, uncompressed and readable but we would like all the js to be minified, obfuscated and compressed to protect our investment.

If project is successful, we are looking in the future to add the more features.

Completed by:

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online