Closed

Dynamically Loaded Flexislider with URL change

This project was awarded to garvs for $20 USD / hour.

Get free quotes for a project like this
Employer working
Awarded to:
Skills Required
Project Budget
$20 USD / hour
Total Bids
1
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 ([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[0] from the PHP array might be: [url removed, login to view], and as the visitor advances to image[1], 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[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 [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.

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