「Lightbox 2」を使って、ポップアップのスライドショーを簡単に作る事が出来ます。
まず、
|
1 2 3 4 5 | <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <script src="js/jquery.smooth-scroll.min.js"></script> <script src="js/lightbox.js"></script> |
cssとjsをheaderの部分に書いて、ソースを読み込みます。
次は
jQueryで画像の動きを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> jQuery(document).ready(function($) { $('a').smoothScroll({ speed: 1000, easing: 'easeInOutCubic' }); $('.showOlderChanges').on('click', function(e){ $('.changelog .old').slideDown('slow'); $(this).fadeOut(); e.preventDefault(); }) }); </script> |
表示させたいHTML内容
|
1 2 3 4 | //ポップアップに表示される画像とテキスト <a href="./images/img_01.jpeg" rel="lightbox[plants]" title="ミャンマー、初めての首都、バガン"> <img src="./images/img_01.jpeg" alt="バガン"></a> |
ポップアップのデザインをちょっと調整したい時は、「css/lightbox.css」を使って調整できます。
