FakeCrop and FlexSlider

by Laurie

HTML

<script src="https://rawgit.com/VuongN/jQuery-Fakecrop/master/fakecrop/jquery.fakecrop.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.1/jquery.flexslider.js"></script>
<div id="slider" class="flexslider">
    <ul class="slides">
        <li>
            <p>
                <img src="http://placehold.it/350x150" />
            </p>
        </li>
        <li>
            <p>
                <img src="http://placehold.it/400x500/FF6666" />
            </p>
        </li>
        <li>
            <p>
                <img src="http://placehold.it/256x389/E0FFFF" />
            </p>
        </li>
        <li>
            <p>
                <img src="http://placehold.it/375x200/CCF5CC" />
            </p>
        </li>
        <li>
            <p>
                <img src="http://placehold.it/100x150/EBADFF" />
            </p>
        </li>
    </ul>
</div>

CSS

p {
    padding:0 5px 5px 5p;
    margin:0 10px 10px 0;
    text-decoration:none;
    display:inline-block;
    border:1px solid #DDD;
    border-radius:3px;
}

/* --------------------------------------------- */

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

/* Browser Resets */
 .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {
    outline: 0;
}
.slides, .flex-control-nav, .flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* FlexSlider Necessary Styles
*********************************/
 .flexslider {
    margin: 0;
    padding: 0;
}
.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
 .flexslider .slides img {
    width: 100%;
    display: block;
}
.flex-pauseplay span {
    text-transform: capitalize;
}
/* Clearfix for the .slides element */
 .slides:after {
    content:".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
html[xmlns] .slides {
    display: block;
}
* html .slides {
    height: 1%;
}
/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
 .no-js .slides > li:first-child {
    display: block;
}
/* FlexSlider Default Theme
*********************************/
 .flexslider {
    margin: 0 0 60px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    zoom: 1;
}
.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
   ...

JavaScript

$(document).ready(function () {

    $('img').fakecrop({
        fill: true,
        //fill: false
        wrapperWidth: 400,
       wrapperHeight: 300
    });

});


$('#slider').flexslider({
    animation: "fade",
    easing: "swing",
    controlNav: true,
    animationLoop: true,
    slideshow: true,
    slideshowSpeed: 7000,
    animationSpeed: 600,
    initDelay: 0,
    pauseOnAction: true,
    pauseOnHover: true,
    touch: true,
    controlNav: true,
    directionNav: true,
    prevText: "Previous",
    nextText: "Next"

});