Closed

Modify JQuery slider using bxSlider

IMPORTANT. There is one thing I have put in this brief that will tell me if you have read it carefully. It's quite subtle, but will separate those that read the brief and do what I ask, and those who don't read the brief (and consequently won't be selected no matter how many times you pester me.)

To those that don't read the brief, please understand that this is my way of making certain that the person I select listens to and acts on my instructions. You have been warned. Ignore my instructions at your peril because you won't get the job.

Auto bids that are still in place at 0800 tomorrow will be rejected.

Strictly no bids from Islamic countries because of site content.

+++++++++++

I have a short piece of software in an HTML file which produces a slider with forward and back arrows.

This is the code:

+++++++++++

In the HEAD:

<!-- Slide Requirements -->

<script src="[url removed, login to view]" type="text/javascript"></script>

<script src="slider/[url removed, login to view]" type="text/javascript"></script>

<link href="slider/[url removed, login to view]" rel="stylesheet" />

<script type="text/javascript">

var numberOfSlides = 12;

var sliderWidth = 800 ; //in pixels

var sliderHeight = 400; //in pixels

var folderWithImages = "img/folder-name/";

var imageEx = ".jpg";

</script>

+++++++++++

In the BODY:

<script>

for(counter = 0; counter <= numberOfSlides; counter++){

$("#slider").html($("#slider").html() + '<div><img src="'+ folderWithImages + counter + imageEx + '" width="' + sliderWidth + '" height="' + sliderHeight + '"/></div>');

}

</script>

+++++++++++

The changes required in the HEAD are as follows:

sliderWidth will be the width of the widest image found in the folder (n/e 900 pixels)

sliderHeight will be the height of the tallest image found in the folder (n/e 900 pixels)

The images will have to be centrally placed and filled with a transparent background that does not hide the main page background. Alternatively the space occupied by the slider will have a background that matches the page background. Please do whichever is easier.

The slider box will therefore have to be capable of containing an image 900 x 900 pixels, although 99.8% of the images are rectangular in a 3:2 or 2:3 ratio.

folderWithImages will be drawn from a table which provides the name of the folder against the name of the html file on the screen.

numberOfSlides will become the number of images in folderWithImages. Alternatively it can be another column in the table as the number of images in a folder will not change once the folder has been populated.

imageEx will remain .jpg unless you need to change it to .png but please remember that means doing a switch to png for every file going into the website, (some 30,000 images), and that has both a pre-upload processing overhead AND a server storage capacity problem. Therefore I would prefer the images to remain as jpg.

+++++++++++

The changes all required in the BODY are as follows:

The counter will have to cope with image filenames that do NOT start at 0 and are NOT consecutively numbered. All filenames will be standard [url removed, login to view] filename format. But just to make the software is compatible with any filename I'll test it on a mixed set of filenames.

++++++++++

I can provide the files that are in the bxSlider folder to the winning bidder.

No thumbnails are required.

I want option of an auto image scroll as well as manual click-to-scroll. The site user will have the choice. At the left of and outside the slider box will be a << graphic meaning back to first image, and to the right and outside the slider box will be a >> graphic meaning go to last image. There will be no loop round.

+++++++++++

Please provide the URL of ONE live website on which you have programmed a similar slider. The URL must NOT be a sub-folder on your own server.

Any bid providing more than one URL will be rejected.

+++++++++++

Server operating system LINUX.

Any questions please ask.

Skills: PHP, Software Architecture

See more: what job can i get with a linux, src format file, put your head on another body, put my head on another body, piece of software for short, latest website in 2016, latest jquery, jquery main js, jquery 1.2 3, how to make the image background transparent, how to get url using javascript, how make a slider on javascript, css height jquery, css column width, column width css, code for making a website using html code, easy slider jquery plugin timer, easy slider jquery min, easy slider jquery, banner slider jquery

About the Employer:
( 98 reviews ) Littlehampton, United Kingdom

Project ID: #9396187