LeYTi: Hôm nay vnmaster sẽ reshare code Album ảnh của - Diễn đàn tổng hợp

VnMaster

Forum

Videos

High Team

Đăng ký | Đăng nhập | Quên Pass?

Diễn đàn » Góc Lập Trình » Wap / Web » [Share] Code Album ảnh đẹp của KindnessXem bình luận

25-12-2016

LeYTi (Sáng Lập!)
Level

MAX

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)

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>
<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

#9 [0 ]

Online

» Có 0 thành viên và 1 khách đang trực tuyến.