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:
Camera is a responsive/adaptive slideshow. Try to resize the browser window
It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
Camera slideshow provides many options to customize your project as more as possible
It supports captions, HTML elements and videos and it's validated in HTML5 (have a look)
Different color skins and layouts available, fullscreen ready too
2.5. Upload the "images" folder and all its contents to the server (just drag and drop the folder; the contents will upload with it). This will take a few minutes. 2.6. Save the HTML file and upload it to the server. PART THREE: ADDING CODE TO YOUR CSS FILE 3.1. Add the following code to the appropriate place in your CSS file /* styles for the responsive slider */ .fluid_container { margin: 0 auto; max-width: 100%; width: 100%; } /* end styles for the responsive slider */ 3.2. Save the CSS file and upload it to the server. PART FOUR: VIEW YOUR WEB PAGE 4.1. Go to your browser of choice and view the page that has the slider in it. See the magic happen. (Hopefully :-) PART FIVE: UNDERSTANDING AND EDITING THE IMAGE CODE BUNDLES Each image code bundle contains has the following code:
It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
I break this code down for your below. 5.1.
This line of code points to the server locations of and files for your full-sized image (data-src=) and the square thumbnail of the image (data-thumb=). Thumbnails are small square versions of the images. To replace the sample images with your own images, complete the following: 1. Upload your image to the proper location of the server. 2. Rename the image file name in the image code bundle from the sample image file name to the file name of your image. 5.2.
It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
These lines of code control the caption functionality, the transition effects, and include the actual text of the caption. To change the text of the caption, delete the caption that is in the sample code with your own written caption. The caption can include styles like italics, bold, links, h1, h2, etc. If you want to link to a page in your portfolio for the image, add a link in the caption area. 5.3. To change the transition effects (fx) go to the scripts folder and open camera.js in your text editor. This file controls the functioning of the slider so edit it with care. Scroll to line 23, where you see the functions for the fx. The default transition is 'random', which randomizes which transition will be used. You can select which you will use by replacing 'random' with the one(s) you want. When finished, save the file and re-upload it to the server in the proper location. For more information on what the various codes in the camera.js file mean, go to http://www.pixedelic.com/plugins/camera/#opts_anchor