title: How to combine jQuery code for fancybox 2 fadein effect and to use title-id?
body: <p>I am using fancy box 2. </p>
  
  <p>I have some code that allows me to use data-title-id to give the gallery items in fancybox a title with anchor in them. </p>
  
  <p>I also want to use another piece of code which changes the animation of the fancybox gallery images as they transition to the next or previous images.</p>
  
  <p>My question is how do I combine both these scripts in order for them to function on the same page? Both are below.</p>
  
  <pre><code> $(".fancybox")
      .fancybox({
      beforeLoad: function () {
          var el, id = $(this.element).data('title-id');
  
          if (id) {
              el = $('#' + id);
  
              if (el.length) {
                  this.title = el.html();
              }
          }
      }
  });
  
  
  (function ($, F) {
      F.transitions.resizeIn = function () {
          var previous = F.previous,
              current = F.current,
              startPos = previous.wrap.stop(true).position(),
              endPos = $.extend({
                  opacity: 1
              }, current.pos);
  
          startPos.width = previous.wrap.width();
          startPos.height = previous.wrap.height();
  
          previous.wrap.stop(true).trigger('onReset').remove();
  
          delete endPos.position;
  
          current.inner.hide();
  
          current.wrap.css(startPos).animate(endPos, {
              duration: current.nextSpeed,
              easing: current.nextEasing,
              step: F.transitions.step,
              complete: function () {
                  F._afterZoomIn();
  
                  current.inner.fadeIn("fast");
              }
          });
      };
  
  }(jQuery, jQuery.fancybox));
  
  $(".fancybox")
      .attr('rel', 'gallery')
      .fancybox({
      nextMethod: 'resizeIn',
      nextSpeed: 250,
  
      prevMethod: false,
  
      helpers: {
          title: {
              type: 'inside'
          }
      }
  });
  </code></pre>