Home>

This article shares to you the use of jquery fancybox plugin to achieve 3 styles of special effects,Very simple and practical,Those in need can check it out

fancybox is one for displaying images,Lightbox tools for html content and multimedia.

jquery plugin fancybox popup box special effects,Compared with the popular lightbox plugin,Can show a single picture,You can also display a set of pictures.It can also display custom content and ajax loading external file content, etc.The function is also very convenient and practical.

demo effect (image gallery):

sample code:

<link href="~/content/jquery.fancybox.css" rel="stylesheet" />
<p>
  <h2>first test (image gallery)</h2>
  <a rel="group" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg"<img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg "/></a>
  <a rel="group" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg"<img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg "/></a>
</p>
<script src="~/scripts/jquery-2.1.4.min.js"></script>
<script src="~/scripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
    $(document) .ready (function () {
      $(". fancybox1"). fancybox ();
    });
</script>

demo effect (single images):

sample code:

<link href="~/content/jquery.fancybox.css" rel="stylesheet" />
<p>
  <h2>single images</h2>
  <a href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg">
    <img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg" />
  </a>
  <a href="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_b.jpg">
    <img src="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_m.jpg" />
  </a>
  <a href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg">
    <img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg" />
  </a>
  <a href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg">
    <img src="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg" />
  </a>
</p>
<script src="~/scripts/jquery-2.1.4.min.js"></script>
<script src="~/scripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
    $(document) .ready (function () {
      $("#single_1"). fancybox ({
        helpers:{
          title:{
            type:"float"
          }
        }
      });
      $("#single_2"). fancybox ({
        openeffect:"elastic",        closeeffect:"elastic",        helpers:{
          title:{
            type:"inside"
          }
        }
      });
      $("#single_3"). fancybox ({
        openeffect:"none",        closeeffect:"none",        helpers:{
          title:{
            type:"outside"
          }
        }
      });
      $("#single_4"). fancybox ({
        helpers:{
          title:{
            type:"over"
          }
        }
      });
    });
  </script>

demo effect (thumbnail):

sample code:

<link href="~/content/jquery.fancybox.css" rel="stylesheet" />
<link href="~/content/jquery.fancybox-thumbs.css" rel="stylesheet" />
<p>
  <h2>thumbnail helper</h2>
  <a rel="fancybox-thumb" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg">
    <img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg" />
  </a>
  <a rel="fancybox-thumb" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg">
    <img src="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg" />
  </a>
  <a rel="fancybox-thumb" href="http://farm9.staticflickr.com/8591/16141566979_347348e72c_b.jpg">
    <img src="http://farm9.staticflickr.com/8591/16141566979_347348e72c_m.jpg" />
  </a>
  <a rel="fancybox-thumb" href="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_b.jpg">
    <img src="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_m.jpg" />
  </a>
</p>
<script src="~/scripts/jquery-2.1.4.min.js"></script>
<script src="~/scripts/jquery.fancybox.pack.js"></script>
  <script src="~/scripts/jquery.fancybox-thumbs.js"></script>
  <script type="text/javascript">
    $(document) .ready (function () {
      $(". fancybox-thumb"). fancybox ({
        preveffect:"elastic",        nexteffect:"elastic",        helpers:{
          title:{
            type:"inside"
          },          thumbs:{
            width:50,            height:50
          }
        }
      });
    });
  </script>
  • Previous Implement common layouts based on Android code
  • Next Follow me about JavaScript functions and function expressions