BILL WOLFF INTERNET AND WRITING STUDIES, FALL 2012 RESPONSIVE SLIDER TUTORIAL CC BY-NC ****************************************************************************** This tutorial uses the Responsive Camera Slider designed by Pexedelic. You can access the Slider web page at: http://www.pixedelic.com/plugins/camera/ This tutorial is rather complex and requires close attention to details and following directions exactly as stated. The Camera Slider is outstanding because it will fit in any container of any size at any point of your web site and will scale to fit that space. All you need to do is have a box or container that has a width of 100% and you're all set to go. You will be asked to add code to a variety of places in your HTML and CSS files, as well as to upload various files and folder to the server. The reasons why to do these things will be explained throughout. You will need the following open or available in order to complete the tutorial: 1. The HTML file in which you'd like to place the responsive slider: open this file in your text editor 2. The CSS file that controls the layout of your web site: open this file in your text editor 3. The files provided by Pixedelic that control the responsive slider: • download these file from: "http://williamwolff.org/iws-class-sample/camera-responsive-slider.zip" • unZIP the files and know where they are located on your computer so you can eventually upload them to the server • the folder should look like the following: camera-responsive-slider css (contains the camera.css file) demo (contains the various HTML demo versions of the slider) images (contains the sample images to make the slider work) scripts (contains the necessary javascript files to make the slider work) PART ONE: PREPARE YOUR HTML FOR THE SLIDER 1.1. Open your HTML file in your text editor. You must have a proper DOCTYPE for this to work. If your DOCTYPE does not look like the following, copy and replace yours: 1.2a. If you already have a container in which to place the slider and there is NOTHING else in that container, great! Make sure the width of that container has the following properties: width: 100%; padding: 0; You can skip to PART 2. 1.2b. If you already have a container in which to place the slider and there is SOMETHING else in that container, comment out that code using . Now make sure the width of that container has the following properties: width: 100%; padding: 0; You can skip to PART 2. 1.2c. If you do not already have a container or box to create the slider, create one by doing the following: in your HTML, create the box with this code:
in your CSS, add the following code: .slider-box { width: 100%; padding: 0; } Be sure to save your files as you go. PART TWO: ADDING CODE TO YOUR HTML FILE AND UPLOADING THE RELATED FILES The code for this section will be added from the top of the HTML down, so scroll up to begin. 2.1. Just under your lines of code that point to your stylesheet, paste the following code: This code points to the camera.css stylesheet, which controls the layout and many of the functions of the slider, and gives credit to the slider's creator. If your stylesheets are in their own dedicated folder, change href="camera.css" to href="dedicatedfoldername/camera.css" (be sure to change "dedicatedfoldername" to the actual name of the folder on your server) 2.2. Upload the "change.css" file from your computer to the space on the server where you put CSS files. 2.3. Just under the line of code you just added (and before the tag) paste the following code: This code points to javascript files that control the functionality of the slider. 2.4. Upload the "scripts" folder and all its contents to the server (just drag and drop the folder; the contents will upload with it). This may take a few minutes. 2.5. Go to the part of your HTML file where you are going to include the slider and copy and paste the following code: