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
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,048
    Đã được thích:
    82
    Điểm thành tích:
    48
    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

    seolagi, 19/5/17
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    5,048
    Đã được thích:
    1,228
    Đ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é.
     
    admin, 19/5/17
    #2
    seolagi thích bài này.
  4. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,048
    Đã được thích:
    82
    Điểm thành tích:
    48
    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"....
     
    seolagi, 19/5/17
    #3