Project 1: Building the Before After Slider
Resources You’ll Need for This Project
Links to JQuery and JQuery UI hosted at Google
Link to the JQuery Library
JQuery Rain has lots of JQuery Projects
Downloads
Links to zip file containing project files/images.
Original before after Images for practice
Link to original tutorial.
Add this code inside your main div
Add this code in your head tag under the other scripts discussed in the video tutorial
Before/After Examples
Project 2: Building the Flexslider Photo Slideshow
Resources You’ll Need for This Project
See the original Al Jazeera Project titled From Forest to Food Bandk here.
Go to the orginial source here at WooThemes.
Step 1-Link your files
Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!
Step 2 – Add markup
The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.
Step 3 – Hook up the slider
Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.
Step 4 – Customization
Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values.
Thing Link
Examples:
East Los Angeles College Campus News mobile
Good example of an about page
Infographic on AN-94 Assault Rifle
Creating an interactive map
Mike
Hi, thanks for the tutorial, very helpful. However, I would like to use the ‘Slider w/thumbnail controlNav pattern’ gallery and can’t work out how to do it. Any ideas?
Thanks
Mike
Michael Horning
Mike. This might be helpful. http://flexslider.woothemes.com/thumbnail-controlnav.html. There’s some slight modification to my code that needs to be done in the JS Script and the HTML. In the script you have to add this line…controlNav: “thumbnails”…then in the div that contains your photos, you have to add some additional code …
http://bgsujournalism.com/j3550/sp2014/mhornin/indexflexslider_thumbs.html
Tracy
Found the tutorial on youtube so came here becasue the ‘ADVANCED’ tab on woothemes website is no longer there as it is in your video, they’ve obviously taken it down for some reason, so lacking in instructions for the final customisation part. Would you happen to have a link to the old page or the instructions that were on that now missing page?
Many thanks
Michael Horning
Tracy. It looks like it’s back up here under step 4. More details are on the “advanced options section” link …http://www.woothemes.com/flexslider/