Combinar el plugin "Flexslider" efecto "fade" y "ElevateZoom" efecto de "lente". Generara un slider, cuyas imágenes tendran un efecto zoom(Lente) al poner el puntero de mouse sobre el.

JAVASCRIPT_flexslider_fade_and elevatezoom_lens.md

Personalizar Flexslider y ElevateZoom

My Html:

<div  id="my-slider" class="flexslider">
  <ul class="slides">
    <li>
      <div class="glass-image-content">
        <img  id="img-zoom-default" 
              class="img-zoom"
              src="img/glass-detail-main.jpg" 
              data-zoom-image="img/glass-detail-main-zoom-2.jpg"/>
      </div>
    </li>
    <li>
      <div class="glass-image-content">
        <img  class="img-zoom" 
              src="img/glass-detail-main.jpg"
              data-zoom-image="img/glass-detail-main-zoom-2.jpg"/>
      </div>
    </li>
    <li>
      <div class="glass-image-content">
        <img  class="img-zoom" 
              src="img/glass-detail-main.jpg"
              data-zoom-image="img/glass-detail-main-zoom-2.jpg"/>
      </div>
    </li>
  </ul>
</div>

My js:

//Initialize slider
$('#my-slider').flexslider({
  animation: "fade",
  controlNav: true,
  directionNav: false,
  animationLoop: false,
  slideshow: false,
  sync: "#carousel-glass",
  start: function() {
    customZoomBackground(0);
  },
  after: function(slider) {
   customZoomBackground(slider.animatingTo);
  }
});

//Custom Plugin Elevate Zoom
function customZoomBackground (index) {
  var content_image = $('#my-slider .slides li .img-zoom').eq(index);
  var zoom_image = content_image.attr('data-zoom-image');
  //Change Background
  $('div.zoomContainer .zoomLens').css('background-image', 'url(' + zoom_image + ')');
 };

My CSS:

.zoomContainer {
  z-index: 2;
}