How to implement Original Hover Effects ,sliderJS effect and zoom in fancy box simultanously

See more:

CSS

jQuery

Hi,
I want to implement
http://tympanus.net/Tutorials/OriginalHoverEffects/[^]
css effect i am able to do so separately ,also i want to implement image sliding effect
[^]

also am able to implement this effect separately .
i also want to implement zoom in effect fancy box.

My Problem is i want all the above effect should work simultanously .
how can i do so Please help

<script>
   $(function() {
     $('#slides').slidesjs({
       width: 940,
       height: 528,

       navigation: {
         effect: "fade"
       },
       pagination: {
         effect: "fade"
       },
       effect: {
         fade: {
           speed: 2000
         }
       }
     });
   });
 </script>

<div class="main">
        <div class="view view-first">
           <div id="slides">
  <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
  <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
  <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
  <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
</div>
            <div class="mask">
                <h2>Hover Style #1</h2>
                <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                <a href="#" class="info">Read More</a>
            </div>
        </div>


    </div>