title: Magnific Popup custom arrow and number
body: <p>i am making custom modal for my project. using Magnific Popup. but still can not find out how can i full custom  arrow and number. i really <code>http://pixelgrade.com/demos/lens/gallery/grid-gallery/</code> them style they also used Magnific Popup. them arrow and number side by side. </p>
  
  <p>bellow is code i did but now how can i include arrow in <strong>tCounter</strong> or have any other way to make like ref. website. </p>
  
  <pre><code>gallery: {
    enabled: true, // set to true to enable gallery
  
    preload: [0,2], // read about this option in next Lazy-loading section
  
    navigateByImgClick: true,
  
    arrowMarkup: '&lt;button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"&gt;&lt;/button&gt;', // markup of an arrow button
  
    tPrev: 'Previous (Left arrow key)', // title for left button
    tNext: 'Next (Right arrow key)', // title for right button
    tCounter: '&lt;span class="mfp-counter"&gt;&lt;span&gt;%curr%&lt;/span&gt; of %total%&lt;/span&gt;' // markup of counter
  },
  </code></pre>