Cách cài đặt Set Autoplay tn3 slideshow mặc định của web không cần bấm

Thảo luận trong 'Lập trình Javascript, js' bắt đầu bởi seolagi, 19/5/17.

  1. seolagi

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    369
    Đã được thích:
    15
    Điểm thành tích:
    18
    HI mọi người, mình đang sử dụng skin slideshow hình ảnh cho web và sản phẩm của thằng TN3-Gallery.

    Hình ảnh show lên khá đẹp, nhưng mình không làm được cái làm sao set được cho hình ảnh tự động chạy mà không cần phải ấn play. Ví dụ như dưới mình ấn auto chạy thì nó mới chạy, còn không nó không mặc định được.
    Mình lên google tìm tung ra mà không có ai chỉ.

    JS mình add vào chỉ có 2 thư viện giống trên trang chủ họ chỉ là : tn.min.js và jquery.tn3lite.min.js. Nhưng giờ mình vào trang chủ của nó bị lỗi không vào được nên không biết cách sử cho nó auto chạy.

    Code mình add vào trang chạy như sau: mình sử dụng code asp.net
    Mã:
    <div class="mygallery">
        <div style="clear: both;">
        </div>
        <div class="tn3 album">
            <ol>
                <%if (dtImgProduct != null && dtImgProduct.Rows.Count > 0)
                    {
                        for (int i = 0; i < dtImgProduct.Rows.Count; i++)
                        { %>
                <li><a title="<%=dtImgProduct.Rows[i]["Note"].ToString()%>" href="<%=dtImgProduct.Rows[i]["imgUrl"].ToString()%>">
                    <img alt="<%=dtImgProduct.Rows[i]["Note"].ToString()%>" src="<%=dtImgProduct.Rows[i]["imgUrlSmaill"].ToString()%>" />
                </a></li>
                <%  }
                    } %>
            </ol>
        </div>
    </div>
    
    autoplay-skin-tn3-slideshow.png
     
    Cảm ơn đã xem bài:

    Cách cài đặt Set Autoplay tn3 slideshow mặc định của web không cần bấm

    danh sách diễn đàn rao vặt gov chất lượng
  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,023
    Đã được thích:
    847
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Của bạn đây nhé, trọn bộ cấu hình của TN3
    Mã:
    <script type="text/javascript">
       $(document).ready(function() {
         var tn1 = $('.mygallery').tn3({
          skinDir:"skins",
          autoplay:true,
          width:600,
          delay:5000,
          skin:"tn3e",
          imageClick:"url",
          image:{
           crop:true,
           transitions:[{
            type:"blinds",
            duration:300
            },
            {
            type:"grid",
            duration:160,
            gridX:9,
            gridY:7,
            easing:"easeInCubic",
            sort:"circle"
            },{
            type:"slide",
            duration:430,
            easing:"easeInOutExpo"
            }]
          }      
          });
       });
    </script>
    
    • Lưu ý chút: bạn phải kiểm tra xem $('.mygallery').tn3 đã được gọi ở trong tn.min.js và jquery.tn3lite.min.js chưa nhé. Nếu có gọi rồi thì bạn add code khúc trong thêm vào VD: autoplay:true, trong của nơi mà $('.mygallery').tn3 đã được gọi nhé.
     
    seolagi thích bài này.
  3. seolagi

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    369
    Đã được thích:
    15
    Điểm thành tích:
    18
    Cảm ơn ad, đúng như bạn nói, thằng $(".mygallery").tn3 đã được gọi trong tn.min.js nên mình gắn thêm thuộc tính autoplay:true vào và đã được. TK AD good quá
    Mã:
    $(document).ready(function(){$(".mygallery").tn3({skinDir:"skins",autoplay:true,imageClick:"fullscreen"....
    
     


Like và Share ủng hộ ITSEOVN