jQuery Colorbox插件

jopen 12年前發布 | 124K 次閱讀 jQuery 圖片展示jQuery插件 jQuery插件

一. Colorbox插件介紹

jQuery Colorbox是一款非常好的內容播放插件。它集彈出層、幻燈片播放功能于一身，不僅于此，它還支持其它的內容格式：例如html, flash, iframe等，這些內容的顯示方式都是Ajax的。更難能可貴的是，在壓縮后它只有10K的大小，使用這款插件不會給你的網頁帶來過多的負擔，而且還能 實現很棒的視覺效果，為用戶體驗增色不少。

本文已經同步至我的個人博客站點：積累吧 | jQuery Colorbox插件

Colorbox項目的主頁地址是：http://www.jacklmoore.com/colorbox
項目主頁中提供了5種不同樣式的Example：

Example 1：http://www.jacklmoore.com/colorbox/example1/
Example 2：http://www.jacklmoore.com/colorbox/example2/
Example 3：http://www.jacklmoore.com/colorbox/example3/
Example 4：http://www.jacklmoore.com/colorbox/example4/
Example 5：http://www.jacklmoore.com/colorbox/example5/

每一個Example中都提供了以下效果：

  • Elastic Transition（彈性動畫）

  • Fade Transition（淡入淡出動畫）

  • No transition + fixed width and height  75% of screen size (無動畫，寬高以屏幕的75%自適應)

  • Slideshow（幻燈片播放）

  • Other Content Types （其它類型：外部html, flash和視頻，iframe的flash和視頻，iframe的外部html，內部html）
    • </ul>

    二. Colorbox插件使用

    在使用colorbox之前，先看看基本的效果圖吧。（本博客已經使用了colorbox插件的最新版本，您也可以直接點擊圖片看到效果哦。）

    jQuery Colorbox插件

    易于使用也是Colorbox的眾多優點之一，它的代碼調用非常之簡潔。

    1. 引入jquery和colorbox的js文件

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

    2. 引入colorbox的css文件

    <link media="screen" rel="stylesheet" href="colorbox\colorbox.css" />

    3. html代碼

    <body>
        <h1>ColorBox演示</h1>
    


        <</span><span style="color:#444444;">h2</span><span style="color:#888888;">>彈性效果</</span><span style="color:#444444;">h2</span><span style="color:#888888;">>
    <</span><span style="color:#444444;">p</span><span style="color:#888888;">><</span><span style="color:#444444;">a class</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"group1" </span><span style="color:#444444;">data-rel</span><span style="color:#888888;">=</span><span style="color:#ee0000;">'hi' </span><span style="color:#444444;">href</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"../content/ohoopee1.jpg" </span><span style="color:#444444;">title</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"Me and my grandfather on the Ohoopee."</span><span style="color:#888888;">>Grouped Photo 1</</span><span style="color:#444444;">a</span><span style="color:#888888;">></</span><span style="color:#444444;">p</span><span style="color:#888888;">>
    <</span><span style="color:#444444;">p</span><span style="color:#888888;">><</span><span style="color:#444444;">a class</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"group1" </span><span style="color:#444444;">href</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"../content/ohoopee2.jpg" </span><span style="color:#444444;">title</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"On the Ohoopee as a child"</span><span style="color:#888888;">>Grouped Photo 2</</span><span style="color:#444444;">a</span><span style="color:#888888;">></</span><span style="color:#444444;">p</span><span style="color:#888888;">>
    <</span><span style="color:#444444;">p</span><span style="color:#888888;">><</span><span style="color:#444444;">a class</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"group1" </span><span style="color:#444444;">href</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"../content/ohoopee3.jpg" </span><span style="color:#444444;">title</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"On the Ohoopee as an adult"</span><span style="color:#888888;">>Grouped Photo 3</</span><span style="color:#444444;">a</span><span style="color:#888888;">></</span><span style="color:#444444;">p</span><span style="color:#888888;">>
</</span><span style="color:#444444;">body</span><span style="color:#888888;">></span></pre> <p>4. 調用colorbox的代碼</p>

    

    <script>
    $(document).ready(function(){
        //元素調用Colorbox的示例
        $(".group1").colorbox({ rel: 'group1' });
    });
</script>
     
    5. 最簡單示例的完整代碼
    

    以上是如何使用的每一個步驟，這里是對上面4個步驟的整合后的完整示例。
    

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ColorBox 示例</title>
        <link rel="stylesheet" href="colorbox/colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function(){
        //元素調用Colorbox的示例
        $(".group1").colorbox({ rel: 'group1' });
    });
</script>
    </head>
    <body>
        <h1>ColorBox演示</h1>
    


        <</span><span style="color:#444444;">h2</span><span style="color:#888888;">>彈性效果</</span><span style="color:#444444;">h2</span><span style="color:#888888;">>
    <</span><span style="color:#444444;">p</span><span style="color:#888888;">><</span><span style="color:#444444;">a class</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"group1" </span><span style="color:#444444;">data-rel</span><span style="color:#888888;">=</span><span style="color:#ee0000;">'hi' </span><span style="color:#444444;">href</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"../content/ohoopee1.jpg" </span><span style="color:#444444;">title</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"Me and my grandfather on the Ohoopee."</span><span style="color:#888888;">>Grouped Photo 1</</span><span style="color:#444444;">a</span><span style="color:#888888;">></</span><span style="color:#444444;">p</span><span style="color:#888888;">>
    <</span><span style="color:#444444;">p</span><span style="color:#888888;">><</span><span style="color:#444444;">a class</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"group1" </span><span style="color:#444444;">href</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"../content/ohoopee2.jpg" </span><span style="color:#444444;">title</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"On the Ohoopee as a child"</span><span style="color:#888888;">>Grouped Photo 2</</span><span style="color:#444444;">a</span><span style="color:#888888;">></</span><span style="color:#444444;">p</span><span style="color:#888888;">>
    <</span><span style="color:#444444;">p</span><span style="color:#888888;">><</span><span style="color:#444444;">a class</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"group1" </span><span style="color:#444444;">href</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"../content/ohoopee3.jpg" </span><span style="color:#444444;">title</span><span style="color:#888888;">=</span><span style="color:#ee0000;">"On the Ohoopee as an adult"</span><span style="color:#888888;">>Grouped Photo 3</</span><span style="color:#444444;">a</span><span style="color:#888888;">></</span><span style="color:#444444;">p</span><span style="color:#888888;">>
</</span><span style="color:#444444;">body</span><span style="color:#888888;">>

    

    </</span>html></pre> 

    

    
三、將它整合到Wordpress中
    

    眾多使用wordpress的朋友可能比較關心如何將colorbox插件整合到wordpress中去，而不需要到wordpress項目主頁上搜索這類插件去安裝。
    

    1. 目錄結構變更 
    

    
在colorbox項目主頁中下載完插件后，打開它，可以看到它的目錄結構如下兩幅圖
    

    jQuery Colorbox插件
    

    jQuery Colorbox插件
    

    這樣的目錄結構直接放到wordpress下明顯不夠合理，在當前目錄結構下創建一個文件夾colorbox
    

    jQuery Colorbox插件
    

    然后將images文件夾、colorbox.css、jquery.colorbox.js、jquery.colorbox-min.js文件放到colorbox文件夾中
    

    jQuery Colorbox插件
    

    2. 將colorbox文件夾放到主題文件夾下
    

    jQuery Colorbox插件
    

    3. 修改header.php文件
    

    在<head></head>之間添加下面的代碼：
    

    <link rel="stylesheet" href="http://www.jileiba.com/wp-content/themes/h/colorbox/colorbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $("a[rel=ignition]").colorbox({ rel: 'ignition' });
    });
</script>
    </div>
    

    

    Always keep dream, keep thinking, keep moving, even if the road obstacles , the one more important thing is that always be a pig for you, that's keep fool.
    
</div>

    
轉自：http://www.cnblogs.com/keepfool/archive/2012/05/26/2519365.html
    
                    
    
                    
    
                        
     本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
    
                        
     轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
    
                        
     本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

相關經驗

相關資訊

相關文檔