I'm looking for someone who can create a custom slideshow similar to the one seen in this video:
[url removed, login to view]
The program has to be able to take a list of <div>s and create a slideshow based on a few position templates.
Thanks for looking.
Here's some more info so that it's clear what I'm looking for.
The flow would look like this:
- Page loads .. slider window is shown with a PLAY icon
- click on PLAY icon, slideshow starts
- there should be a PAUSE and REPLAY option as well
The real challenge here is creating the animation based on number of images and total time length of the slideshow.
For example, I have 5 images and a total length that is 30 seconds long (same as length of the mp3). The slideshow will have to calculate the layout of the 5 divs and slide them around to last 30 seconds. My server can provide some of this data to the frontend code, I will provide links to the images , sound file and length of slideshow.
In the demo video I provided, you see 18 images in 1:06 minutes. The app has to be smart enough to take the total number of images and total time length provided by me and create the slideshow. Depending on the size of the source image, we may have a few different templates to accommodate image sizes - Single versus stacked images like in the demo video.
I imagine something like this:
animLength: 30000, // total length of animation (30seconds)
audioSource: '/media/sounds/test.mp3', // source mp3 for slideshow
animSpeed:500, // Slide transition speed
pauseTime:7000, // How long each slide will show
... extra options ...
div class="d1"><img src='xxx'>
div class="d2"><img src='xxx'>
div class="d3"><img src='xxx'>
div class="d4"><img src='xxx'>
div class="d5"><img src='xxx'>
The trick will be to place them correctly so they look good depending on their size.
Let me know if you have any questions .. Thanks!