/ / / / Thêm NIVO hình trượt cho Blogger Blogspot

Thêm NIVO hình trượt cho Blogger Blogspot

, , Edit


NIVO trượt là một phổ biến miễn phí hình ảnh trượt cho nhà thiết kế web. Trong bài viết này, tôi sẽ chỉ cho bạn cách để tích hợp này để template Blogger / Blogspot của bạn.

Trước khi bắt đầu, bạn phải cài đặt jQuery đầu tiên, xin vui lòng đọc: Thêm jQuery để Blogger Template.

1. Thêm Css

Tiếp theo, dán mã dưới đây CSS trước]]> </ b: skin>  trong template của bạn.
Sao chép mã:
/ *
 * JQuery NIVO Slider v3.2
 * Http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Miễn phí để sử dụng và lạm dụng theo giấy phép MIT.
 * Http://www.opensource.org/licenses/mit-license.php
 * /

/ * Các phong cách NIVO Slider * /
.nivoSlider {
 position: relative;
 width: 100%;
 height: auto;
 overflow: hidden;
}
.nivoSlider img {
 vị trí: tuyệt đối;
 top: 0px;
 left: 0px;
 max-width: none;
}
.nivo-chính-image {
 ! display: block quan trọng;
 ! position: relative quan trọng; 
 width: 100% quan trọng;!
}

/ * Nếu một hình ảnh được gói trong một link * /
.nivoSlider a.nivo-imageLink {
 vị trí: tuyệt đối;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 border: 0;
 padding: 0;
 margin: 0;
 z-index: 6;
 display: none;
 nền: trắng; 
 lọc: alpha (opacity = 0); 
 opacity: 0;
}
/ * Các lát và hộp trong Slider * /
.nivo-slice {
 display: block;
 vị trí: tuyệt đối;
 z-index: 5;
 height: 100%;
 top: 0;
}
.nivo-box {
 display: block;
 vị trí: tuyệt đối;
 z-index: 5;
 overflow: hidden;
}
.nivo-box img {display: block; }

/ * Phong cách Caption * /
.nivo-caption {
 vị trí: tuyệt đối;
 left: 0px;
 bottom: 0px;
 background: # 000;
 color: #fff;
 width: 100%;
 z-index: 8;
 padding: 5px 10px;
 opacity: 0.8;
 overflow: hidden;
 display: none;
 -moz-opacity: 0.8;
 lọc: alpha (opacity = 8);
 -webkit-box-sizing: hộp biên giới; / * Safari / Chrome, WebKit khác * /
 -moz-box-sizing: hộp biên giới; / * Firefox, Gecko khác * /
 hộp-sizing: hộp biên giới; / * Opera / IE 8+ * /
}
.nivo-caption p {
 padding: 5px;
 margin: 0;
}
.nivo-caption một {
 ! display: inline quan trọng;
}
.nivo-html-caption {
    display: none;
}
/ * Phong cách Direction nav (ví dụ kế tiếp & Prev) * /
.nivo-directionNav một {
 vị trí: tuyệt đối;
    top: 45%;
    z-index: 9;
    con trỏ: con trỏ;
    display: block;
    width: 30px;
    height: 30px;
    background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuoXuIkpZkW0-py5g-BekxFBghEaeej6bQXUTWyoDxEYxwdG77uBMMCvZacXZgF6FlepX0NxsF_7aEf3p3C4LG6hnOfJgmdDr-KkudFLeNnkZXzFGfPRljuklk_9RAXzyr_mYzof13iZ0Z/s1600/arrows.png) no-repeat;
    text-indent: -9999px;
    border: 0;
    -webkit-chuyển tiếp: tất cả 200ms dễ dàng-trong-ra;
    -moz-chuyển tiếp: tất cả 200ms dễ dàng-trong-ra;
    -o-chuyển tiếp: tất cả 200ms dễ dàng-trong-ra;
    chuyển tiếp: tất cả 200ms dễ dàng-trong-ra;
    opacity: 0;
    left: 15px;
}
.nivo-prevNav {
 left: 0px;
}
.nivo-nextNav {
 phải: 0px;
}
/ * Kiểm soát nav phong cách (ví dụ: 1,2,3 ...) * /
.nivo-controlNav {
 text-align: center;
 padding: 15px 0;
}
.nivo-controlNav một {
 con trỏ: con trỏ;
    background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUgkM8V9-U3DFZz_cjjsCZQZbfXhyUfeanm7b2Ve38N1Ew1C9_nncz-ZXOMtLad3qZW-cQsTKarpjbhEN4gH4tTiJB7DNuA8MMykLRmcM6IEksYDJZb1qC8qFG9_ZzTJDFZqoeXu-Jr_xL/s1600/bullets.png) no-repeat;
    text-indent: -9999px;
    border: 0;
    margin: 0 2px;
    display: inline-block;
    height: 22px;
    width: 22px
}
.nivo-controlNav a.active {
 font-weight: bold;
 background-position: 0 -22px;
}
a.nivo-nextNav {
    background-position: -30px 0;
    left: auto;
    phải: 15px;
}
#slider: hover .nivo-directionNav một {
    opacity: 1
}
.................................

2. Thêm Javascript

Thêm bên dưới javascript mã trước </ body> tag: 
Sao chép mã:
<script type = 'text / javascript'>
// <! [CDATA [
/ *
 * JQuery NIVO Slider v3.2
 * Http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Miễn phí để sử dụng và lạm dụng theo giấy phép MIT.
 * Http://www.opensource.org/licenses/mit-license.php
 * /

(function (e) {var t = function (t, n) {var r = e.extend ({}, e.fn.nivoSlider.defaults, n); var s = e (t); s.data ("NIVO: vars", i) .addClass ("nivoSlider"); var o = s.children (); o.each (function () {var t = e (điều này ); var n = ""; if (t.is (! "") {if (t.is (a ")) {t.addClass (" NIVO-imageLink ") img)"; n = t} t = t.find ("img: đầu tiên")} var class = "NIVO-caption"> </ div> ')); var a = function (t) {var class = "NIVO-directionNav"> <a class="nivo-prevNav"> '+ r.prevText +' </a> <a false} clearInterval (f); f = ""; d (s, o, r, "tiếp theo")})} if (r.controlNav) {i.controlNavEl = e ('<div class = "NIVO-controlNav" > </ div> '); s.after (i.controlNavEl); for (var l = 0; l <o.length; l ++) {if (r.controlNavThumbs) {i.controlNavEl.addClass ("NIVO-ngón tay cái -enabled "); var c = o.eq (l); if (c.is (!" img ")) {c = c.find (" img: đầu tiên ")} if (c.attr (" đĩa dữ liệu ngón tay cái ")) i.controlNavEl.append ('<a class="nivo-control" rel="'+l+'"> <img src =" "+ c.attr (" data-thumb ") +'" alt = "" /> </a> ')} else {i.controlNavEl.append (' <a class = "NIVO kiểm soát" false; if (e (này) .hasClass ("tích cực")) return img ".) Chiều rộng (t.width ()) css (." tầm nhìn "," ẩn ") show ();. var i = e ('img [src =" "+ r.currentImage.attr (" src " ) + '"]', t) .not (". NIVO-chính-hình ảnh, .nivo kiểm soát img ") chiều cao. (); for (var s = 0; s <n.slices; s ++) {var o = Math.round (t.width () / n.slices); if (s === n. lát-1) {t.append (e ('<div class = "NIVO-lát" name = "" + s +' "> <img src =" "+ r.currentImage.attr (" src ") + '" style = "position: absolute; width: '+ t.width () +" px; chiều cao: auto; display: block quan trọng; top: 0; bên trái: - "+ (o + s * oo) +!" px; " class = "NIVO-lát" name = "" + s + '"> <img src =" "+ r.currentImage.attr (" src ") +" "style =" position: absolute; width:' + t.width () + "! px; chiều cao: auto; display: block quan trọng; top: 0; bên trái: -" + (o + s * oo) + 'px; " img ".) Chiều rộng (t.width ()) css (." tầm nhìn "," ẩn ") show ();. var img ") Chiều cao () / n.boxRows);. for (var o = 0; o <n.boxRows; o ++) {for (var a = 0; a <n.boxCols; a ++) {if (a == = n.boxCols-1) {t.append (e ('<div class = "NIVO-box" name = "" + một +' "rel =" '+ o +' "> <img src =" '+ r. currentImage.attr ("src") + "" style = "position: absolute; width: '+ t.width () +" px; chiều cao: auto; display: block; top: - "+ s * o +" px; trái: - "+ i * a + 'px;" img ', t) .height () + "px")} else {t.append (e (' <div class = "NIVO-box" name = "" + một + '"rel ="' + o + '"> <img src = "" + r.currentImage.attr ("src") + "" style = "position: absolute; width: '+ t.width () +" px; chiều cao: auto; display: block; top: - "+ s * o +" px; bên trái: - "+ i * a + 'px;" img ', t) .height () + "px")}}} u.stop () animate ({height:. e (r.currentImage) .height ()}, n.animSpeed)}; var d = function (t, n, r, i) {var o = r.effect, f = ""; if (r.effect === "ngẫu nhiên") {f = new if (o === "sliceUpDown" || o === "sliceUpDownRight" || o === "sliceUpDownLeft") {h (t, r, s); l = 0; c = 0; var if (o === "gấp") {h (t, r, s); l = 0; c = 0; e (". NIVO-lát", t) .each (function () {var n = e (này); var w = 0; var E = 0; var x = 0; x <r.boxCols * 2; x ++) {var T = x; for (var N = 0; N <r.boxRows; N ++) {if (T> = 0 && T <r.boxCols) {(chức năng (n, i, s, u, a) {var f = e (S [n] [i]); var l = f.width (); var v = function (e) {for (var t, n, r = e.length; r; t = parseInt (Math.random () * r, 10), n = e [- r], e [r] = e [t], e [t] = n); trở lại e}; var m = function (e) {if (typeof this.console && Slider ")}}; r.afterLoad.call (this); return này}; e.fn.nivoSlider = function (n) {return this.each (function (r, i) {var s = e (này); if (s.data ("nivoslider")) {return s.data ("nivoslider")} var o = new
//]]>
</ script>

<script type = 'text / javascript'>
// <! [CDATA [
// Mặc định NIVO Slider
$ (window) .load (function () {
    . $ ('# trượt') nivoSlider ();
});
//]]>
</ script>
.......................

3. Chèn HTML

Bây giờ, đặt bên dưới ví dụ HTML để bất cứ nơi nào trong code mẫu của bạn mà bạn muốn hiển thị thanh trượt hình ảnh (có thể chèn vào HTML / javascript phụ tùng cũng). Tất nhiên, hãy nhớ thay đổi tất cả hình ảnh src, tiêu đề, chú thích và các liên kết trong các ví dụ mã HTML:
Mã HTML chạy Slider:

<div class = "trượt-wrapper">
    <div id = "trượt" class = "nivoSlider">
        <img src = "yourimage1.jpg" alt = "" />
        <a href=" yourlink2.com "> <img src = "yourimage2.jpg" alt = "" title = "# htmlcaption" /> </a>
        <img src = "yourimage3.jpg" alt = "" title = "Ví dụ hay chú thích cho hình ảnh thô 3" />
        <img src = "yourimage4.jpg" alt = "" />
        <! - Thêm những hình ảnh khác nếu bạn thích ->
    </ div>
</ div>
<div id = "htmlcaption" class = "NIVO-html-caption">
    <strong> Đây </ strong> là một ví dụ của một <em> HTML </ em> caption với <a href="#"> một liên kết </a>.
</ div>
<! - Thêm chú thích hình ảnh khác HTML ->
 
Nếu bạn muốn sử dụng HTML chú thích, bạn phải nhập tiêu đề cho hình ảnh là "# my-html-caption-id". Chú
 thích hình ảnh này sẽ là nội dung của bất kỳ thẻ div với id 
"my-html-caption-id" (xin vui lòng kiểm tra các ví dụ với div di 
"htmlcaption"). 
 

4. Đối với người dùng cao cấp

Để thực hiện cài đặt trước, bạn thay đổi tất cả các mã javascript sau khi lưu ý: "// Mặc định NIVO Slider" ở bước 2 với mã dưới đây và thay đổi bất kỳ cài đặt nào bạn thích: 
$ (window) .load (function () {
    $ ('# trượt'). nivoSlider ({
        hiệu lực: 'ngẫu nhiên', // Chỉ định bộ như: 'gấp, fade, sliceDown'
        slices: 15, // Đối với hoạt ảnh lát
        boxCols: 8, // Đối với hoạt ảnh hộp
        boxRows: 4, // Đối với hoạt ảnh hộp
        animSpeed: 500, // tốc độ trượt quá trình chuyển đổi
        pauseTime: 3000, // mỗi slide sẽ hiển thị trong bao lâu
        startSlide: 0, // Set slide đầu (0 điểm)
        directionNav: true, // Tiếp theo & Trước navigation
        controlNav: true, // 1,2,3 ... navigation
        controlNavThumbs: false, // Sử dụng hình nhỏ để kiểm soát Nav
        pauseOnHover: true, // Dừng hoạt hình trong khi lơ lửng
        manualAdvance: false, // Force dẫn quá trình chuyển đổi
        prevText: 'Trước', // Trước directionNav văn bản
        nextText: 'Next', // Tiếp directionNav văn bản
        randomStart: false, // Khởi chạy trên một slide ngẫu nhiên
        beforeChange: function () {}, // Triggers trước một quá trình chuyển đổi trượt
        afterChange: function () {}, // Triggers sau một quá trình chuyển đổi trượt
        slideshowEnd: function () {}, // Triggers sau khi tất cả các slide đã được chứng minh
        lastSlide: function () {}, // Kích hoạt khi trượt cuối cùng được hiển
        hậu tải: function () {} // Kích hoạt khi trượt đã nạp
    });
});
................
TÓM LẠI:
NIVO trượt là một phổ biến miễn phí hình ảnh trượt cho nhà thiết kế web. Trong bài viết này, tôi sẽ chỉ cho bạn cách để tích hợp này để template Blogger / Blogspot của bạn.

By: 

 

 
Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Huan Nguyen" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 nhận xét :

Đăng nhận xét

Đăng ký: Đăng Nhận xét ( Atom )
loading...