zoukankan      html  css  js  c++  java
  • Jquery — fancybox

    jquery fancybox

     

    参考 http://fancyapps.com/fancybox/

    Instructions

    Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example:

     

    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox -->
    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>

    <!-- Optionaly add button and/or thumbnail helpers -->
    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>

    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>

    Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox.

     

    <a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
    <a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

    Attach fancyBox when the document is loaded. If you are not familiar with jQuery, please, read this tutorial for beginners.

     

    <script type="text/javascript">
    $(document).ready(function() {
    $(".fancybox").fancybox();
    });
    </script>

     

    Examples

    <ul class="list">
    <li>
    <a class="various fancybox.ajax" href="/demo/ajax.php">Ajax</a>
    </li>
    <li>
    <a class="various fancybox.iframe" href="http://jquery.com/">Iframe</a>
    </li>
    <li>
    <a class="various" href="#inline">Inline</a>
    </li>
    <li>
    <a class="various" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">SWF</a>
    </li>
    </ul>

    <ul class="list">
    <li>
    <a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
    </li>
    <li>
    <a class="various fancybox.iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a>
    </li>
    <li>
    <a class="various" href="/data/non_existing_image.jpg">Non-existing url</a>
    </li>
    </ul>

    Javascript

    $(document).ready(function() {
    $(".various").fancybox({
    maxWidth : 800,
    maxHeight : 600,
    fitToView : false,
    width : '70%',
    height : '70%',
    autoSize : false,
    closeClick : false,
    openEffect : 'none',
    closeEffect : 'none'
    });
    });

    Download

    https://github.com/fancyapps/fancyBox/zipball/v2.0.4








  • 相关阅读:
    表格的交集合集等的命令处理
    Linux中screen命令
    Linux中sed基础
    Linux中AWK基础
    聊聊开发中经历的几种后端语言
    C语言NXP S32K144 serial bootloader和C#语言bootloader PC端串口通信程序
    自己用C语言写NXP S32K144 serial bootloader
    C语言NXP S32K116 serial bootloader和C#语言bootloader PC端串口通信程序
    自己用C语言写NXP S32K116 serial bootloader
    C语言RH850 F1L serial bootloader和C#语言bootloader PC端串口通信程序
  • 原文地址:https://www.cnblogs.com/bruceleeliya/p/2303172.html
Copyright © 2011-2022 走看看