• 歡迎訪問奇跡の海網站,本站不上傳任何資源,所有資源均來自于網絡,歡迎加入奇跡の海~!奇跡の海-WordPress QQ群
  • 本站下載資源為網絡上收集整理而來,并且以計算機技術研究交流為目的,版權歸原作者所有,僅供大家參考,學習,不存在任何商業目的與商業用途.
  • 本站系統鏡像均來自于官方原版,ed2k可視為P2P下載鏈接。所有操作系統默認均為試用版,如有正版密鑰可以有效激活,本站不提供任何激活和相關服務。

WordPress 非插件實現 “Orbit” 幻燈片效果

WP插件 奇跡の海 3年前 (2017-04-29) 547次瀏覽 已收錄 0個評論 掃描二維碼

WordPress 非插件實現
這年頭,幾乎常規的網站都有幻燈片;沒有反而顯得不高檔了。今天介紹一個圖片滑動幻燈片jQuery 插件,名字叫 Orbit,自定義功能很強大卻是輕量級(僅僅4kb 左右)。接下來介紹一下并提供個添加到WordPress 主題的教程。

Orbit 簡介

WordPress 非插件實現

Orbit是一個設計良好并且容易使用的jQuery 圖片滑動幻燈片插件,它除了支持圖片滾動切換展示外,還支持針對內容的滾動。插件的定制性相當高,它提供了多個參數的設置,通過設置你可以將它打造成完全符合你要求的樣式。 Orbit支持 IE7+, FF3.5+, Chrome、Safari 等瀏覽器,整個插件十分輕巧,僅僅4kb 左右,需要jQuery 1.5.1版本以上。

插件官方主頁: 點擊前往

幻燈片jQuery插件Orbit 集成到WordPress 主題教程

看官方,Orbit最新的版本(1.3.0)貌似集成到某個框架去了,我們可以使用舊版本(1.2.3)。

下載所需要的文件:官方下載? ??百度網盤

下載解壓后,將這個文件夾重命名為orbit,放到WordPress 主題目錄下(當然,你可以自定義路徑,以下以此為準)。

一、確保你的WordPress 主題已經加載jQuery 庫,注意是要1.5.1 版本以上的。

二、首先將下面的代碼放到主題的header.php(具體哪里知道吧),這是加載CSS、js 文件的代碼

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/orbit/orbit-1.2.3.css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/orbit/jquery.orbit-1.2.3.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>

三、HTML 部分。幻燈片一般都是在首頁加載的,對于WordPress 主題,可以通過if 語氣判斷是否在首頁來寫入html。

<?php if ( is_home() ){ ?>
<div id="featured">
<a href=”#” data-caption="#htmlCaption1"><img src="/1.jpg" /></a>
<a href=”#” data-caption="#htmlCaption2"><img src="/2.jpg" /></a>
<a href=”#” data-caption="#htmlCaption3"><img src="/3.jpg" /></a>
<a href=”#” data-caption="#htmlCaption4"><img src="/4.jpg" /></a>
<span class="orbit-caption" id="htmlCaption1">title1</span>
<span class="orbit-caption" id="htmlCaption2">title2</span>
<span class="orbit-caption" id="htmlCaption3">title3</span>
<span class="orbit-caption" id="htmlCaption4">title4</span>
</div>
<?php } ?>

對于上面的代碼,你需要做的很多。比如再添加一個幻燈片、比如鏈接的url、圖片的路徑等等,這里僅僅算是一個演示。

為了適合于你的主題,你可以通過orbit-1.2.3.css 修改相關代碼自定義樣式,比如寬高神馬的。

而對于幻燈片的相關參數設置,你可以去查閱官方文檔自行解決。

折騰這個需要你懂html、CSS,javascript 或者jquery 略懂一點就可以了,~jquery 插件就是方便,不一定要你看懂代碼,會用就行。


版權聲明:本站所有文章和資源使用CC BY-NC-SA 4.0協議授權發布 , 轉載應當以相同方式注明文章來自“SeaOMC.COM->WordPress 非插件實現 “Orbit” 幻燈片效果!在下邊可以分享本文哦!
喜歡 (0)
[]
分享 (0)
奇跡の海
關于作者:
一個WordPress菜鳥!
發表我的評論
取消評論

表情 貼圖 加粗 刪除線 居中 斜體 簽到

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
中国福利彩票36选7开奖结果