By with 4 Comments

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

WP Syria

Typhoon Haiyan

Hurricane Sandy

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

4 Comments

  1. Mike Reply

    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 Reply

      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 …

    • … You also have to make a copy of your original photos and name them…photoname-thumb.jpg. I’ve uploaded an example here. If you look at my source code in the browser you can see the changes. I’ve added some comments with your name so they are easy to find. One is near the top in the script. The other in the div that holds the flexslider…
      http://bgsujournalism.com/j3550/sp2014/mhornin/indexflexslider_thumbs.html

  2. Tracy Reply

    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

Leave a Response to Michael Horning Cancel Response