main scripts

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="http://dev.hubinternacional.org/static/js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <script src="http://dev.hubinternacional.org/static/js/vendor/bootstrap.min.js"></script>
    <script src="http://dev.hubinternacional.org/static/js/vendor/jquery-ui-1.10.0.custom.min.js"></script>
    <script src="http://dev.hubinternacional.org/static/js/main.js"></script>

    <script src="http://dev.hubinternacional.org/static/js/vendor/jquery.carouFredSel.min.js"></script>

    <script src="http://dev.hubinternacional.org/static/js/vendor/jquery.mousewheel.min.js"></script>
    <script src="http://dev.hubinternacional.org/static/js/vendor/jquery.ba-throttle-debounce.min.js"></script>
    <script src="http://dev.hubinternacional.org/static/js/vendor/jquery.touchSwipe.min.js"></script>

    <script src="http://dev.hubinternacional.org/static/js/vendor/jquery.fancybox-1.3.4.pack.js"></script>
    

    <script>
      // Here goes the magic!
      $(document).ready(function(){

        // ver http://caroufredsel.dev7studios.com/configuration.php
        $(".news-list").carouFredSel({
          auto: false,
          mousewheel: true,
          swipe: {
            onMouse: true,
            onTouch: true
          },
          responsive  : true,
          items   : {
            width   : 280,
            height  : 165,
            visible   : {
              min     : 1,
              max     : 6
            }
          },
          scroll  : {
            items   : 1
          }
        });

        $(".news-list").delegate(".news-item", "hover", function(event){
          event.preventDefault();
          event.stopPropagation();

          if(event.type === 'mouseenter')
          {
            // Add class 'hover', and switch state to hovered
            $(this).find('.news-resume').stop(true,true).delay(100).hide('slide', { direction: 'down', easing: 'swing' }, 200);
            $(this).find('.news-source').stop(true,true).delay(100).hide('slide', { direction: 'right', easing: 'swing' }, 200);
            // 
            $(this).find('.news-over-resume').stop(true,true).delay(100).show('slide', { direction: 'down', easing: 'swing' }, 800);
            $(this).addClass('hover');
          }
          else
          {
            // Then remove class 'hover' and show news default state
            $(this).find('.news-over-resume').stop(true,true).hide('slide', { direction: 'down', easing: 'swing' }, 400);
            $(this).find('.news-resume').stop(true,true).show('slide', { direction: 'down', easing: 'swing' }, 400);
            $(this).find('.news-source').stop(true,true).show('slide', { direction: 'right', easing: 'swing' }, 400);
            $(this).removeClass('hover');
          }
        });

        $(".news-item").delegate(".expand-news", "click", function(event){
          event.preventDefault();

          $.fancybox(
            '<div class="news-modal">'+
              '<h2 class="news-source">The Economist / C. Megan</h2>'+
              '<i class="icon-caret-right"></i>'+
              '<h1 class="news-title">CAMBIO O CAÍDA DE LOS PARADIGMAS?</h1>'+
              '<img class="news-image" src="http://placehold.it/460x200/fcc" alt="">'+
              '<p class="news-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis leo iaculis lorem ultricies vel adipiscing elit vulputate. Quisque lobortis eleifend arcu, at tincidunt diam venenatis non. Donec in enim ut purus porttitor rutrum a sed urna. Fusce pretium, sem in lacinia pharetra, dolor magna rutrum leo, id gravida nisi libero id ante. Cras lectus eros, eleifend et laoreet vitae, pellentesque nec urna. Suspendisse eget sapien vel quam tincidunt tristique. Nam justo massa, ultricies eget luctus ut, consectetur et diam. Suspendisse eget sem leo.</p>'+
              '<i class="icon-file-alt"></i>'+
              '<a class="news-go-to-source" href="#" title="">VER ARTÍCULO COMPLETO</a>'+
              '<a class="news-twitter-share" href="http://twitter.com" title=""><i class="zocial twitter icon"></i></a>'+
              '<a class="news-facebook-share" href="http://facebook.com" title=""><i class="zocial facebook icon"></i></a>'+
            '</div>',
            {
              'hideOnOverlayClick'  : false,
              'overlayOpacity'  : 0.75,
              'overlayColor'    : '#000',
              'autoDimensions'  : false,
              'width'           : 500,
              'height'          : 'auto',
              'transitionIn'    : 'none',
              'transitionOut'   : 'none'
            }
          );
        });

      });
    </script>