[Hỏi đáp] Slideshow đơn giản cho mod_new

  Bài viết hay nhất1
Hỏi: đây ảnh nó đây



Đáp: http://devs.forumvi.com/t347-hoi-dap-slideshow-don-gian?showpost=p2224
  Bài viết hay nhất2

Demo


http://jsfiddle.net/baivong/WP5Sg/show/


Source


HTML


Code:
<div id="zzSlide">
    <div class="zzContent">
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/xcv11.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.21</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/cfb10.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.20d</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/1136.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.19c</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/cv_bmp10.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.19b</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i72.servimg.com/u/f72/16/18/15/10/untit250.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.18e</div>
        </div>
    </div>
    <div class="zzBullets"></div>
</div>

CSS


Code:
#zzSlide {
    margin: 0 auto;
    width: 235px;
}
#zzSlide > div.zzContent {
    position: relative;
    width: inherit;
    height: 200px;
}
#zzSlide div.zzItem {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
}
#zzSlide div.zzImage {
    background: none no-repeat center center/100% 100% #333;
    height: 155px;
    width: inherit;
    border: 5px solid #FFF;
    outline: 1px solid #DDD
}
#zzSlide div.zzCaption {
    background: #FFF;
    padding: 5px 0;
}
#zzSlide > div.zzBullets {
    text-align: center;
}
#zzSlide .zzBullet {
    display: none;
}
#zzSlide .zzBullet + label {
    width: 7px;
    height: 7px;
    outline: 1px solid #DDD;
    background: #FFF;
    display: inline-block;
    outline-offset: 2px;
    margin: 0 7px;
    cursor: pointer;
}
#zzSlide .zzBullet:checked + label {
    background: #666;
}

Javascript


Code:
/*!
  zzSlide v0.2.0
  A Simple jQuery Slideshow
  Copyleft (c) 2014+ Zzbaivong
  http://devs.forumvi.com  
*/
var zzSlide = {
    start: function() {
        zzSlide.run = setInterval(function() {
            zzSlide.current++;
            zzSlide.current == zzSlide.size && (zzSlide.current = 0);
            $("#zzSlide .zzItem").fadeOut('slow');
            $("#zzSlide .zzItem").eq(zzSlide.current).fadeIn('slow');
            $("#zzSlide .zzBullet").eq(zzSlide.current).prop("checked", true);
        }, 3000);
    },
    current: 0,
    size: $("#zzSlide .zzItem").length,
    run: "",
    init: function() {
        $("#zzSlide .zzItem").each(function(index) {
            $(this).attr({
                "data-bullet": index
            });
            $("#zzSlide .zzBullets").append('<input type="radio" class="zzBullet" name="zzbullet" value="' + index + '" id="zzbullet' + index + '" /><label for="zzbullet' + index + '"></label></div>');
        });
        $("#zzSlide .zzItem:gt(0)").hide();
        $("#zzSlide .zzBullet:eq(0)").prop("checked", true);
        zzSlide.start();
        $("#zzSlide").hover(function() {
            clearInterval(zzSlide.run);
        }, function() {
            zzSlide.start();
        });
        $("#zzSlide .zzBullet").on("change", function() {
            $("#zzSlide .zzItem").fadeOut(1E3);
            $("#zzSlide .zzItem[data-bullet='" + this.value + "']").fadeIn('slow');
            zzSlide.current = this.value;
        });
    }
};
$(function() {
    zzSlide.init();
});

Tags: #jquery #snippet
  Bài viết hay nhất3
có thêm 1 nút Next thì tuyệt bác ạ
  Bài viết hay nhất4
Không cần thiết với dạng này.
  Bài viết hay nhất5
Tôi dùng cho mod new lại k thấy nó chạy :(

đây là code cũ t đang dùng nè

Code:
<div style="height:193px;overflow:hidden;margin-bottom:4px;display:inline-block;width:210px;float:left" id="demo">
<!-- BEGIN post_row --><span class="show_topic">
  <a href="{post_row.U_VIEW_COMMENTS}" class="ava_new">
                {post_row.TEXT}
            </a>
<a href="{post_row.U_VIEW_COMMENTS}" class="a_new">{post_row.TITLE}</a>
<p class="author">{BY} <strong>{post_row.POSTER}</strong> {post_row.TIME}</p>
</span>
<!-- END post_row --></div>
<div class="phu1" align="right">
<span class="active" id="1"></span><span id="2"></span><span id="3"></span><span id="4"></span><span id="5"></span></div>
    <script>
    $(".phu1 span").click(function () {
      $(".phu1 span").removeClass("active");
      $(this).addClass("active");
      var a = eval($(this).attr("id"));
      var b = a - 1;
      if (a == 3) {
          b == 0
      }
      $("#demo .show_topic").hide();
      $("#demo .show_topic:eq(" + b + ")").show();
    });
    </script>
  Bài viết hay nhất6
Thay hết vào mod_new:

Code:
<style type="text/css">
#zzSlide{width:235px;padding:10px;margin:0 auto}
#zzSlide > div.zzContent{position:relative;width:inherit;height:215px}
#zzSlide div.zzItem{position:absolute;left:0;top:0;width:inherit}
#zzSlide div.zzImage{background:none no-repeat center center/100% 100% #333;height:155px;width:inherit;border:5px solid #FFF;outline:1px solid #DDD}
#zzSlide div.zzCaption{background:#FFF;padding:5px 0}
#zzSlide p.zzTitle a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
#zzSlide p.author{font-size:11px;color:#999}
#zzSlide > div.zzBullets{text-align:center}
#zzSlide .zzBullet{display:none}
#zzSlide .zzBullet + label{width:7px;height:7px;outline:1px solid #DDD;background:#FFF;display:inline-block;outline-offset:2px;cursor:pointer;margin:0 7px}
#zzSlide .zzBullet:checked + label{background:#666}
</style>
<div id="zzSlide">
    <div class="zzContent">
        <!-- BEGIN post_row -->
        <div class="zzItem">
            <div class="zzImage">
                {post_row.TEXT}
            </div>
            <div class="zzCaption">
                <p class="zzTitle">
                    <a href="{post_row.U_VIEW_COMMENTS}" title="{post_row.TITLE}">{post_row.TITLE}</a>
                </p>
                <p class="author">Đăng bởi: <strong>{post_row.POSTER}</strong></p>
            </div>
        </div>
        <!-- END post_row -->
    </div>
    <div class="zzBullets"></div>
</div>
<script type="text/javascript">
//<![CDATA[
/*!
  zzSlide v0.2.0
  A Simple jQuery Slideshow
  Copyleft (c) 2014+ Zzbaivong
  http://devs.forumvi.com 
*/
var zzSlide = {
    start: function() {
        zzSlide.run = setInterval(function() {
            zzSlide.current++;
            zzSlide.current == zzSlide.size && (zzSlide.current = 0);
            $("#zzSlide .zzItem").fadeOut('slow');
            $("#zzSlide .zzItem").eq(zzSlide.current).fadeIn('slow');
            $("#zzSlide .zzBullet").eq(zzSlide.current).prop("checked", true);
        }, 3000);
    },
    current: 0,
    size: $("#zzSlide .zzItem").length,
    run: "",
    init: function() {
        $("#zzSlide .zzItem").each(function(index) {
            $(this).attr({
                "data-bullet": index
            });
            $("#zzSlide .zzBullets").append('<input type="radio" class="zzBullet" name="zzbullet" value="' + index + '" id="zzbullet' + index + '" /><label for="zzbullet' + index + '"></label></div>');
        });
        $("#zzSlide .zzItem:gt(0)").hide();
        $("#zzSlide .zzBullet:eq(0)").prop("checked", true);
        zzSlide.start();
        $("#zzSlide").hover(function() {
            clearInterval(zzSlide.run);
        }, function() {
            zzSlide.start();
        });
        $("#zzSlide .zzBullet").on("change", function() {
            $("#zzSlide .zzItem").fadeOut(1E3);
            $("#zzSlide .zzItem[data-bullet='" + this.value + "']").fadeIn('slow');
            zzSlide.current = this.value;
        });
    }
};
$("#zzSlide .zzImage").css("background-image", function() {
    return "url(" + $(this).find("img:first")[0].src + ")";
}).empty();
$(function() {
    zzSlide.init();
});
//]]>
</script>
  Bài viết hay nhất7
z để nó slideshow ko chạy thì s hử bác
  Bài viết hay nhất8

@phutu01 wrote:Tôi dùng cho mod new lại k thấy nó chạy :(

đây là code cũ t đang dùng nè

Code:
<div style="height:193px;overflow:hidden;margin-bottom:4px;display:inline-block;width:210px;float:left" id="demo">
<!-- BEGIN post_row --><span class="show_topic">
  <a href="{post_row.U_VIEW_COMMENTS}" class="ava_new">
                {post_row.TEXT}
            </a>
<a href="{post_row.U_VIEW_COMMENTS}" class="a_new">{post_row.TITLE}</a>
<p class="author">{BY} <strong>{post_row.POSTER}</strong> {post_row.TIME}</p>
</span>
<!-- END post_row --></div>
<div class="phu1" align="right">
<span class="active" id="1"></span><span id="2"></span><span id="3"></span><span id="4"></span><span id="5"></span></div>
    <script>
    $(".phu1 span").click(function () {
       $(".phu1 span").removeClass("active");
       $(this).addClass("active");
       var a = eval($(this).attr("id"));
       var b = a - 1;
       if (a == 3) {
          b == 0
       }
       $("#demo .show_topic").hide();
       $("#demo .show_topic:eq(" + b + ")").show();
    });
    </script>

@Zzbaivong làm cái load feed được không
  Bài viết hay nhất9
Tại sao mình cho slideshow lặp lại nhiều lần trong 1 page thì chỉ duy nhất 1 cái load qua hình khác dc
  Bài viết hay nhất10
Vì ban đầu code này chỉ viết cho kiểu 1 slide.
  Bài viết hay nhất11
mình làm được cái load feed nhưng mà cho nó lặp đi lặp lại không được. Nó hiện tới cái cuối cùng thì đứng im ko hiện nữa
  Bài viết hay nhất12

@sonlapro wrote:mình làm được cái load feed nhưng mà cho nó lặp đi lặp lại không được. Nó hiện tới cái cuối cùng thì đứng im ko hiện nữa
Gửi code xem.
  Bài viết hay nhất13
Thêm nút next cho mình được không với hiện hiệu ứng load khi chưa tải xong thanks :)

Code:

<div id="zzSlide">
  <div class="zzContent">
  </div>
  <div class="zzBullets"></div>
</div>
<style>
#zzSlide {
  margin: 0 auto;
  width: 235px;
}
#zzSlide > div.zzContent {
  position: relative;
  width: inherit;
  height: 200px;
}
#zzSlide div.zzItem {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
}
#zzSlide div.zzImage {
  background: none no-repeat center center/100% 100% #333;
  height: 155px;
  width: inherit;
  border: 5px solid #FFF;
  outline: 1px solid #DDD
}
#zzSlide div.zzCaption {
  background: #FFF;
  padding: 5px 0;
}
#zzSlide > div.zzBullets {
  text-align: center;
}
#zzSlide .zzBullet {
  display: none;
}
#zzSlide .zzBullet + label {
  width: 7px;
  height: 7px;
  outline: 1px solid #DDD;
  background: #FFF;
  display: inline-block;
  outline-offset: 2px;
  margin: 0 7px;
  cursor: pointer;
}
#zzSlide .zzBullet:checked + label {
  background: #666;
}
#zzSlide div.zzImage img{background:none no-repeat center center/100% 100% #333;height:155px!important;width:inherit!important}
</style>
<script> 
 $(function() {
  $.get('/feed/?f=9').done(function(data) {
    var getfeed = $(data);
    for(j = 0;j < getfeed.find('item').length; j++){
      var url = getfeed.find('item:eq('+j+') guid').text();
      var title = getfeed.find('item:eq('+j+') title').text();
      $('.zzContent').append('<div class="zzItem" id="id' + j + '"><div class="zzImage"></div><div class="zzCaption"><a href="' + url + '" title="' + title + '">' + title + '</a></div></div>');
     $('#id' + j + ' .zzImage').load(url + ' .noidungblog img:first');
    }
  });
});
  /*!
  zzSlide v0.1
  A Simple jQuery Slideshow
  Copyright (c) 2014+ Zzbaivong
  http://devs.forumvi.com
*/
var zzSlide = {
  b: function () {
      zzSlide.c = setInterval(function () {
        zzSlide.a++;
        zzSlide.a == zzSlide.d && (zzSlide.a = 0);
        $("#zzSlide .zzItem").fadeOut(1E3);
        $("#zzSlide .zzItem").eq(zzSlide.a).fadeIn(1E3);
        $("#zzSlide .zzBullet").eq(zzSlide.a).prop("checked", !0)
      }, 3E3)
  },
  a: 0,
  d: $("#zzSlide .zzItem").length,
  c: "",
  s: function () {
      $("#zzSlide .zzItem").each(function (a) {
        $(this).attr({
            "data-bullet": a
        });
        $("#zzSlide .zzBullets").append('<input type="radio" class="zzBullet" name="zzbullet" value="' + a + '" id="zzbullet' + a + '" /><label for="zzbullet' + a + '"></label></div>')
      });
      $("#zzSlide .zzItem:gt(0)").hide();
      $("#zzSlide .zzBullet:eq(0)").prop("checked", !0);
      zzSlide.b();
      $("#zzSlide").hover(function () {
        clearInterval(zzSlide.c)
      }, function () {
        zzSlide.b()
      });
      $("#zzSlide .zzBullet").on("change", function () {
        $("#zzSlide .zzItem").fadeOut(1E3);
        $("#zzSlide .zzItem[data-bullet='" + this.value + "']").fadeIn(1E3);
        zzSlide.a = this.value
      })
  }
};
$(function () {
  zzSlide.s()
});
</script>
You cannot reply to topics in this forum