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 ([url removed, login to view]) 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 from the PHP array might be: [url removed, login to view], and as the visitor advances to image, then the page url would change to [url removed, login to view] 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 [url removed, login to view] it would say: [url removed, login to view] 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. [url removed, login to view]) into their browser they would visit the page, and the first image they would see would be: IMG-NAME3 or image 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, image 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 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)
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 [url removed, login to view] (which includes the array) in addition, there is a [url removed, login to view] page that just includes flexislider with some preloaded images so you can see how it operates normally.