Dynamically Loaded Flexislider with URL change

IN PROGRESS
Project Budget (USD)
$20 / hr

Project Description:
I have a project that I will be creating slowly, one step at a time.

The first step is to create a page that uses Flexislider image carousel. This script is already working and complete (in the attached documents).

The modifications I need are:

1. Instead of pre-loading images in the page code, I'd like to have images loaded dynamically (via AJAX) from a PHP array (also provided in the attached file). So that, when the first page (index.php) loads there are only 3 images (first 3 images in array) loaded, but, as a visitor advances through the slide show, the next 3 images begin loading from the sequence are loaded into the flexislider so that they can run. So, as a visitor gets to image 3, images 4,5,6 start to populate, as they get to image 6, images 7,8,9 start to populate. If there are only 9 images, then flexislider would start back over at the beginning.

2. As a new image is featured in Flexislider, I'd like the page URL to change each time. For example, image[0] from the PHP array might be: index.php?img=0, and as the visitor advances to image[1], then the page url would change to index.php?img=1 without reloading the page. I want the images loaded via ajax, but for dynamic URLs to be assigned. Ideally, I'd like URLs to use apache mod_rewrite so that instead of index.php?img=1 it would say: myurl.com/CATEGORY/IMG-NAME/ where CATEGORY and IMG-NAME are part of the provided PHP Array. This way, a visitor can book-mark, or share a specific image using the URL.

3. The implication of this is: If a visitor puts in a URL for say the 3rd image in the sequence (e.g. myurl.com/CATEGORY/IMG-NAME3/) into their browser they would visit the page, and the first image they would see would be: IMG-NAME3 or image[2] from the PHP array, and the dynamic AJAX loading would continue as described in #1 (3,4,5 would load with the page, and 6,7,8 would AJAX load as the visitor reaches #5) However, image[1], image[0] would also start to AJAX load as these represent the 3 images on the other side of the sequence. So that, if the user visits the URL corresponding to page= image[12] in the PHP array, then 12,13,14 would load on page load, and immediately 11,10,9 would begin loading (via AJAX) because they are the 3 images to the left, and again, once a visitor reached image 14, AJAX loading would begin for 15,16,17 (if these exist in the array)

I'd like to keep Flexislider code intact, if possible. I'd like to use JQuery whenever possible to handle javascript.

The code should work on IE 9+, FF 16+,Chrome 22+, Safari 6+

If this sounds interesting, please let me know how long you think something like this might take.

The uploaded file contains all the flexislider code on a page index.php (which includes the array) in addition, there is a sample.html page that just includes flexislider with some preloaded images so you can see how it operates normally.

Hours of work: 12 Project Duration: Unspecified Skills required:
AJAX, HTML5, jQuery / Prototype, PHP
Additional Files: flexislider_loader.zip
Project offered by:
Verified