XtGem Forum catalog
» » » [Share] Code Album ảnh đẹp của Kindness
Bạn phải để Bình luận
25-12-2016#
admin offline * LeYTi (Sáng Lập!)
Level MAX  Like 0
Xu 0  TN 0
VnMaster

Hôm nay vnmaster sẽ reshare code Album ảnh của kindness đang sử dụng. Code này có lẽ hơi nặng vì có tới 2 files Js lận, ai thích thì cứ thử nha
Cảm nhận:
- Khá mượt.
- Hiệu ứng chuyển hình ảnh đẹp
- Có thể thêm nhiều ảnh (tùy sở thích)
- Còn lại tùy các bạn cảm nhận...
Demo: Kindness.Wap4.Co

Cách làm:
- Đầu tiên các bạn dán code này vào Header (trong thẻ head)
<link rel="stylesheet" type="text/css" href="http://kindness.wap4.co/css/demo.css" />
<br><link rel="stylesheet" type="text/css" href="http://kindness.wap4.co/css/slicebox.css" />
<br><link rel="stylesheet" type="text/css" href="http://kindness.wap4.co/css/custom.css" />
<br><script type="text/javascript" src="http://kindness.wap4.co/js/modernizr.custom.46884.js"></script>

Copy code

- Hoặc các bạn import 3 CSS này về wap của mình.
1. http://kindness.wap4.co/css/demo.css
2. http://kindness.wap4.co/css/slicebox.css
3. http://kindness.wap4.co/css/custom.css
- Tạo một thư mục images và up ảnh ở dưới đây vào trong thư mục đó.
1. http://kindness.wap4.co/images/fancy_deboss.png
2. http://kindness.wap4.co/images/nav.png
3. http://kindness.wap4.co/images/shadow.png
4. http://kindness.wap4.co/images/options.png
- Sau đó post code này và đặt chỗ nào bạn muốn nó hiển thị.
<div class="phdr"><i class="fa fa-image"></i><b> Album Ảnh</b></div>
<br>            <div class="wrapper">
<br>
<br>                <ul id="sb-slider" class="sb-slider">
<br>                    <li>
<br>                        <a href="http://i.imgur.com/R8jUrhw.jpg" target="_blank"><img src="http://i.imgur.com/R8jUrhw.jpg" alt="image1"/></a>
<br>                        <div class="sb-description">
<br>                            <h3>Oregairu</h3>
<br>                        </div>
<br>                    </li>
<br>                    <li>
<br>                        <a href="http://i.imgur.com/t40GaXi.jpg" target="_blank"><img src="http://i.imgur.com/t40GaXi.jpg" alt="image2"/></a>
<br>                        <div class="sb-description">
<br>                            <h3>5cm/s</h3>
<br>                        </div>
<br>                    </li>
<br>                    <li>
<br>                        <a href="http://i.imgur.com/BTOmIov.jpg" target="_blank"><img src="http://i.imgur.com/BTOmIov.jpg" alt="image1"/></a>
<br>                        <div class="sb-description">
<br>                            <h3>Garden Of Words</h3>
<br>                        </div>
<br>                    </li>
<br>                    <li>
<br>                        <a href="http://i.imgur.com/1CfE0ba.jpg" target="_blank"><img src="http://i.imgur.com/1CfE0ba.jpg" alt="image1"/></a>
<br>                        <div class="sb-description">
<br>                            <h3>Your Name.</h3>
<br>                        </div>
<br>                    </li>
<br>                    <li>
<br>                        <a href="http://i.imgur.com/cXQO6wC.jpg" target="_blank"><img src="http://i.imgur.com/cXQO6wC.jpg" alt="image1"/></a>
<br>                        <div class="sb-description">
<br>                            <h3>Alone...</h3>
<br>                        </div>
<br>                    </li>
<br>                    <li>
<br>                        <a href="http://i.imgur.com/W1Q7FMn.png" target="_blank"><img src="http://i.imgur.com/W1Q7FMn.png" alt="image1"/></a>
<br>                        <div class="sb-description">
<br>                            <h3>Cross Road</h3>
<br>                        </div>
<br>                    </li>
<br>                    <li>
<br>                        <a href="http://i.imgur.com/jkeQ4ji.jpg" target="_blank"><img src="http://i.imgur.com/jkeQ4ji.jpg" alt="image1"/></a>
<br>                        <div class="sb-description">
<br>                            <h3>Hachiman và Yuikino</h3>
<br>                        </div>
<br>                    </li>
<br>                </ul>
<br>
<br>                <div id="shadow" class="shadow"></div>
<br>
<br>                <div id="nav-arrows" class="nav-arrows">
<br>                    <a href="#">Next</a>
<br>                    <a href="#">Previous</a>
<br>                </div>
<br>
<br>            </div><!-- /wrapper -->
<br>
<br>        </div>
<br>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<br>        <script type="text/javascript" src="/js/jquery.slicebox.js"></script>
<br>        <script type="text/javascript">
<br>            $(function() {
<br>                
<br>                var Page = (function() {
<br>
<br>                    var $navArrows = $( '#nav-arrows' ).hide(),
<br>                        $shadow = $( '#shadow' ).hide(),
<br>                        slicebox = $( '#sb-slider' ).slicebox( {
<br>                            onReady : function() {
<br>
<br>                                $navArrows.show();
<br>                                $shadow.show();
<br>
<br>                            },
<br>                            orientation : 'r',
<br>                            cuboidsRandom : true
<br>                        } ),
<br>                        
<br>                        init = function() {
<br>
<br>                            initEvents();
<br>                            
<br>                        },
<br>                        initEvents = function() {
<br>
<br>                            // add navigation events
<br>                            $navArrows.children( ':first' ).on( 'click', function() {
<br>
<br>                                slicebox.next();
<br>                                return false;
<br>
<br>                            } );
<br>
<br>                            $navArrows.children( ':last' ).on( 'click', function() {
<br>                                
<br>                                slicebox.previous();
<br>                                return false;
<br>
<br>                            } );
<br>
<br>                        };
<br>
<br>                        return { init : init };
<br>
<br>                })();
<br>
<br>                Page.init();
<br>
<br>            });
<br>        </script>

Copy code

Nhớ thay link hình ảnh nhé!
Như vậy là đã xong rồi, chúc bạn thành công!
Đã chỉnh sửa bởi: LeYTi
Tổng số 1 bình luận
Chia sẻ bài viết: Sắp xếp:
Liên kết:
BBcode:
Tìm kiếm
Online
» Có 0 thành viên đang trực tuyến.
Stats
TOP
Facebook - Thanks to XTgem™ Sitemap - Nội quy
© 2015-2017 VnMaster.Yn.Lt
-->