[jQuery] Trình diễn Hot Topic dạng Slide

[Mr.FR]

Code này sử dụng jQuery nhằm làm một slide chạy ảnh để cập nhật những "hot topic" của bạn..

dán vào CSS:

Code:

.lof-slidecontent{
   position:relative;
   overflow:hidden;
   border:#F4F4F4 solid 1px;
   width:892px;
   height:300px;
}
.lof-slidecontent .preload{
   height:100%;
   width:100%;
   background:#FFF;
   position:absolute;
   top:0;
   left:0;
   z-index: 999;
   color:#FFF;
   text-align:center
}
.lof-slidecontent .preload div{
   height:100%;
   width:100%;
   background:transparent url(http://landofcoder.com/demo/jquery/lofslidernews/images/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
   position:relative;
   height:100%;
   width:600px;
   z-index:3px;
   overflow:hidden;
}


/*******************************************************/
.lof-main-item-desc{
   z-index:100px;
   position:absolute;
   top:180px;
   left:50px;
   width:500px;
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/transparent_bg.png);

   /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
   color:#FFF;
   margin:0 8px;
   padding:8px 0
}
.lof-main-item-desc h3 a{
   color:#f6f7ac;   
   margin:0;
   font-size:140%;
   padding:20px 8px 0px;
   font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
text-decoration: none;
}
.lof-main-item-desc h3 a:hover{
   color:#FF6;
   text-decoration: none;
}


/* main flash */
ul.lof-main-wapper{
   /* margin-right:auto; */
   overflow:hidden;
   background:transparent url(http://landofcoder.com/demo/jquery/lofslidernews/images/load-indicator.gif) no-repeat scroll 50% 50%;
   padding:0px;
   margin:0;
   height:300px;
   width:600px;
   position:absolute;
   overflow:hidden;
}

ul.lof-main-wapper li{
   overflow:hidden;
   padding:0px;
   margin:0px;
   height:100%;
   width:600px;
   float:left;
}
.lof-opacity  li{
   position:absolute;
   top:0;
   left:0;
   float:inherit;
}
ul.lof-main-wapper li img{
   padding:0px;   
   width:600px;
}

li-desc{
   z-index:100px;
   position:absolute;
   top:150px;
   left:50px;
   width:400px;
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/transparent_bg.png);

   /* filter:0.7(opacity:60) */
}
li-desc p{
   color:#FFF;
   margin:0 8px;
   padding:8px 0
}

li-desc h3 a{
   color:#FFF;   
   margin:0;
   font-size:140%;
   padding:20px 8px 2px;
   font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
   color:#FF6;
   text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
   top:0;
   padding:0;
   margin:0;
   position:absolute;
   width:100%;
}
ul.lof-navigator li{
   cursor:hand;
   cursor:pointer;
   list-style:none;
   width:100%;
   padding:0;
   margin:0;
   overflow:hidden;
}
.lof-navigator-outer{
   position:absolute;
   right:0;
   top:00px;
   z-index: 999;
   height:300px;
   width:310px;
   overflow:hidden;
   color:#FFF
}
.lof-navigator li.active{
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/arrow-bg.png) no-repeat scroll left center;
   color:#FFF
}
.lof-navigator li:hover{
   
}


.lof-navigator li h3{
   color:#FFF;
   font-size:100%;
   padding:15px 0 0 !important;
   margin:0;

}
.lof-navigator li div{
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/transparent_bg.png);
   color:#FFF;
   height:100%;
   position:relative;
   margin-left:15px;
   padding-left:15px;
   border-top:1px solid #E1E1E1;
}

.lof-navigator li.active div{
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/grad-bg.gif);
   color:#FFF;
}
.lof-navigator li img{
   height:60px;
   width:60px;
   margin:15px 15px 10px 0px;
   float:left;
   padding:3px;
   border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
   border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
   color:#FFF;
}


Còn code này thì cho vào đâu tùy ý (nơi muốn hiển thị slide), miễn là cho phép HTML

Code:

<script src="http://landofcoder.com/demo/jquery/lofslidernews/js/jquery.easing.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="http://landofcoder.com/demo/jquery/lofslidernews/js/script.js"></script>

<script type="text/javascript">
 $(document).ready( function(){   
      $('#lofslidecontent45').lofJSidernews( { interval:4000,
                                     easing:'easeInOutQuad',
                                    duration:1200,
                                    auto:true } );                  
   });
 
</script>
<style>

#container { width:900px; margin:0px auto 0px; background:#FFFFFF; padding:10px; font-size:12px; margin-top:10px; }

a{
   text-transform:none;
   color:#333
}
#footer{
   background:#F0F0F0;
   padding:10px;
   border:#999 dotted 1px;
}

   
   ul.lof-main-wapper li {
      position:relative;   
   }
</style>

<div id="container">

<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>

  <div class="lof-main-outer">
     <ul class="lof-main-wapper">
 
<li>
 
           <img src="http://i69.servimg.com/u/f69/12/89/57/83/dap-ch10.jpg" title="" height="300" width="600">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="" href="http://www.a2bmt.com/t1154-topic">A2 tại đập Chu Cấp</a></h3>
                <p>Một ngày trước 20/11, dân thành phố về thăm Hòa Thắng vùng ven =]] </p>
            </div>
        </li>
       
     
      </ul>     
  </div>

 
 
  <div class="lof-navigator-outer">
        <ul class="lof-navigator">


 <li>
                <div>
                   
                    <h3> A2 tại đập Chu Cấp</h3>
                    <span>19.11.2009</span> - Hòa Thắng, Đắc Lắc
                </div>
            </li>


        </ul>
  </div>
 </div>


 
</div>



Để thêm ảnh và link, các bạn cứ thêm thẻ

Code:

<li>... </li>

(xem ở đoạn code trên)

Demo: http://www.a2bmt.com/forum

[MarkChan]

Các HOT Boy làn lượt căm bách

[myxl218]

thanks pro nhiều. mình đã làm được!
Demo:

Code:

http://thptxuanloc.tk/

[bluehnvn]

thanks bạn đã chia sẻ

[tvb_tvb]

lam` không dc... publish roi` ma` no' không ra

[Khách v]

thanks đang cần

[baythang]

tuyệt

[Khách v]

sặc. làm mãi không được bị sao í.

Code:

http://c1pro.123.st/

[baivong]

Mình từng làm 1 cái cho mod_new chức năng như trên, tự thay đổi ảnh nền theo số lượng comment, nhưng số lượng ảnh ít quá nên không áp dụng thực tế được, bạn nào có 1 kho ảnh chung đề tài kíck thước trung bình có thể cho mình sử dụng để hoàn thiện code ko?

[nguyenartv3]

Cảm ơn bờ rồ nhé. Đang phân vân có cái nào mượt mượt mà ko bị băng thông. Cảm ơn trước, test sau

[baivong]

Mình cần khoảng 100 ảnh thôi, tuy nhiên số ảnh này sẽ ko mang vào code nên đảm bảo ko làm nặng forum, dù 1000 ảnh cũng vậy.

[nguyenartv3]

Mình cần khoảng 100 ảnh thôi, tuy nhiên số ảnh này sẽ ko mang vào code nên đảm bảo ko làm nặng forum, dù 1000 ảnh cũng vậy.

Những j chú nói nghe hay thế. Nhưng thật sự mình chưa hiểu rõ lắm cái "dự án" này. Chú nói rõ 1 chút về công dụng được không ? 100 ảnh ? nó sẽ hiện ngẫu nhiên theo bài viết ak ? vẫn chưa hỉu rõ lắm . Cảm ơn rất nhiều nếu chú giải thích thêm

[baivong]

Ảnh nền thay đổi theo số lượt comment bài viết.
1 comment thì ảnh 1, 3 comment thì ảnh 3
Chỉ cần đổi tên ảnh là được.

[ellen9]

Không hiểu việc thêm bớt ảnh và link thế nào ??? hd em với:
manh_ellen@yahoo.com (online 24/24)

[baivong]

Ai có bộ 100 ảnh cùng chủ đề cho mình xin nào

[nguyenartv3]

Hizz, làm j mà lấy cả 100 ghê thế, chú đếm thử đủ chưa ?

Spoiler:

[Sấm]

ấy chà chà. chuẩn bị lại có cái hay đây . Các bác prào ghê

[Sấm]

chỉ cần copy hết code sau dán vào html sau đó dùng iframe chèn vào chổ nào bạn muốn...

Tìm link ảnh và thay lại. trong này mình dùng có 1 tấm
Sửa lại text bài viết...
Thế là xong.!

Đề mô:

Code:


<br style="clear:both" /> <!-- Slide Show by Mr.Kelly v1.0 starts here -->
<script language="javascript" type="Text/javascript">
<!--
var embedFPSSCSS = '<' + 'style type="Text/css" media="all">'
+ '@import "http://truongquynhanhfc.net/forum/slideshow/templates/Movies/template_css.php?w=700&h=350&sw=250";'
+ '</' + 'style>';
document.write(embedFPSSCSS);
-->
</script>
<!--[if lte IE 7]>
<style type="Text/css" media="all">
@import "http://www.coo.vn/out/users/9xstudiobiz/template_css_ie.css";
</style>
<![endif]-->
<script language="javascript" type="Text/javascript" src="http://9xstudiobiz.googlecode.com/files/jquery-comp.js"></script>
<script language="javascript" type="Text/javascript" src="http://9xstudiobiz.googlecode.com/files/jquery-fpss-comp.js"></script>

<script language="javascript" type="Text/javascript">
var speed_delay = 6000;
var slide_speed = 1000;
var CTRrotateAction = 'click';
</script>


<div id="fpss-outer-container" >
    <div id="fpss-container">

        <div id="fpss-slider">
            <div id="slide-loading"></div>
            <div id="slide-wrapper">
                <div id="slide-outer">
                    <div class="slide">
                        <div class="slide-inner">
                            <a class="fpss_img" href="Link bài viết ở đây">

                                <span>

                                    <span style="background:url(http://i68.servimg.com/u/f68/16/28/17/28/110.jpg) no-repeat;">
                                        <span>
                                            <img src="http://i68.servimg.com/u/f68/16/28/17/28/110.jpg" alt="Click on the slide!" />
                                        </span>
                                    </span>
                                </span>
                            </a>
               
                            <div class="fpss-introText">

                                <div class="slideText">
                                    <h1><a href="Link bài viết ở đây">wWw.9xstudio.biz</a></h1>
                                    <h2>Text</h2>
                                    <h3>Text</h3>
                                    <p>Text</p>
                                    <a href="Link bài viết ở đây" class="readon">Read more...</a>

                                </div>
                            </div>
               
                        </div>
                    </div>
                   
                    <div class="slide">
                        <div class="slide-inner">
                            <a class="fpss_img" href="Link bài viết ở đây">
                                <span>

                                    <span style="background:url(http://i68.servimg.com/u/f68/16/28/17/28/110.jpg) no-repeat;">

                                        <span>
                                            <img src="http://i68.servimg.com/u/f68/16/28/17/28/110.jpg" alt="Click on the slide!" />
                                        </span>
                                    </span>
                                </span>
                            </a>
               
                            <div class="fpss-introText">

                                <div class="slideText">
                                    <h1><a href="Link bài viết ở đây"> Text </a></h1>

                                    <h2> Text </h2>
                                    <h3> Text </h3>
                                    <p> Text </p>

                                    <a href="Link bài viết ở đây " class="readon">Read more...</a>
                                </div>

                            </div>
               
                        </div>
                    </div>
                   
                    <div class="slide">
                        <div class="slide-inner">
                            <a class="fpss_img" href=" Link bài viết ở đây">

                                <span>
                                    <span style="background:url(http://i68.servimg.com/u/f68/16/28/17/28/110.jpg) no-repeat;">
                                        <span>

                                            <img src="http://i68.servimg.com/u/f68/16/28/17/28/110.jpg" alt="Click on the slide!" />
                                        </span>
                                    </span>
                                </span>
                            </a>

               
                            <div class="fpss-introText">
                                <div class="slideText">
                                    <h1><a href="Link bài viết ở đây"> Text  </a></h1>

                                    <h2> Text  </h2>
                                    <h3> Text </h3>

                                    <p> Text </p>
                                    <a href=" Link bài viết ở đây " class="readon">Read more...</a>
                                </div>

                            </div>
               
                        </div>
                    </div>
                   
                    <div class="slide">

                        <div class="slide-inner">
                            <a class="fpss_img" href=" Link bài viết ở đây">
                                <span>
                                    <span style="background:url(http://i68.servimg.com/u/f68/16/28/17/28/110.jpg) no-repeat;">
                                        <span>

                                            <img src="http://i68.servimg.com/u/f68/16/28/17/28/110.jpg" alt="Click on the slide!" />
                                        </span>
                                    </span>

                                </span>
                            </a>
               
                            <div class="fpss-introText">
                                <div class="slideText">
                                    <h1><a href=" Link bài viết ở đây"> Text</a></h1>

                                    <h2> Text</h2>

                                    <h3> Text</h3>
                                    <p> Text</p>
                                    <a href=" Link bài viết ở đây" class="readon">Read more...</a>
                                </div>

                            </div>
               
                        </div>

                    </div>
                   
                   
      
   
   </div>
            </div>
        </div>
        <div id="navi-outer">

            <div id="pseudobox"></div>

            <div class="ul_container">
                <ul>      
                         <li class="noimages"><a id="fpss-container_prev" href="javascript:void(0);" onclick="showPrev();clearSlide();" title="Previous">«</a></li>

               
   <li>
      <a class="navbutton off navi" href="javascript:void(0);" title="Click to navigate!">
         <span class="navbar-img"><img src="http://i68.servimg.com/u/f68/16/28/17/28/110.jpg" alt="Click to navigate!" /></span>
         <span class="navbar-key">01</span>
         <span class="navbar-title">Text  </span>

         <span class="navbar-tagline">Text </span>
         <span class="navbar-clr"></span>

      </a>
   </li>
   
   <li>
      <a class="navbutton off navi" href="javascript:void(0);" title="Click to navigate!">
         <span class="navbar-img"><img src="http://i68.servimg.com/u/f68/16/28/17/28/110.jpg" alt="Click to navigate!" /></span>
         <span class="navbar-key">02</span>

         <span class="navbar-title"> Text </span>

         <span class="navbar-tagline"> Text </span>
         <span class="navbar-clr"></span>
      </a>
   </li>
   
   <li>
      <a class="navbutton off navi" href="javascript:void(0);" title="Click to navigate!">

         <span class="navbar-img"><img src="http://i68.servimg.com/u/f68/16/28/17/28/110.jpg" alt="Click to navigate!" /></span>

         <span class="navbar-key">03</span>
         <span class="navbar-title"> Text  </span>
         <span class="navbar-tagline"> Text </span>
         <span class="navbar-clr"></span>
      </a>

   </li>

   
   <li>

      <a class="navbutton off navi" href="javascript:void(0);" title="Click to navigate!">
         <span class="navbar-img"><img src="http://i68.servimg.com/u/f68/16/28/17/28/110.jpg" alt="Click to navigate!" /></span>
         <span class="navbar-key">04</span>
         <span class="navbar-title"> Text</span>
         <span class="navbar-tagline"> Text</span>

         <span class="navbar-clr"></span>
      </a>

   </li>
                   <li class="noimages"><a id="fpss-container_next" href="javascript:void(0);" onclick="showNext();clearSlide();" title="Next">»</a></li>
                <li class="noimages"><a id="fpss-container_playButton" href="javascript:void(0);" onclick="playButtonClicked();return false;" title="Play/Pause Slide">Pause</a></li>
                            </ul>
            </div>

        </div>
       <div class="fpss-clr"></div>

    </div>
   <div class="fpss-clr"></div>

</div>
<div style="display: none;"><a href="http://www.prevb.com">Slide Show Pro (version 1.0.0) - Copyright © 2006-2011 by Mr.Kelly</a></div>
<!-- Slide Show by Mr.Kelly v1.0 ands here -->
 


[monkeyshandsome]

đẹp kinh

[Sấm]

Đẹp!....lại còn kinh. Đẹp Thì Thanks cái nhé! Kinh... thì Thanks luôn nhé

[baivong]

Để vào một thư mục cho tui down, đưa link thế này làm sao lấy?

[nguyenartv3]

Đã chỉnh lại code như ảnh . Chú cho vào topic nào đó rồi chờ nó load xong. Ctr+ s là có ảnh mà. Nhanh hơn cả mediafile

[baivong]

Lạy hồn, down thử chưa?

[Peacefulhb]

đđaays. thank bạn nha.

[nguyenartv3]

Lạy hồn, down thử chưa?

Là sao ? Bên Butchi.yourme dùng hoài mà. cho vào bài viết thôi. Nhiều quá thì chia ra vài lần thôi mà.

[baivong]

Thôi để tớ lấy trên google, lấy hình anime cho đẹp

[baivong]

Cái code để đâu tìm ko thấy, lên ntuts lượm được cái này: http://tghm.yours.tv

[kutactn]

sao tui làm không đk zay??

[Sấm]

Bạn tham khảo bài này thêm xem sao. cái này dễ làm hơn. không cần css

Code:

[url]http://diendan.chinhphuc.info/t15235-topic[/url]

[kutactn]

mình thử rồi...nhưng mình thích cái này hơn...

[Sponsored content]