ポップアップスライドショー

「Lightbox 2」を使って、ポップアップのスライドショーを簡単に作る事が出来ます。

まず、


<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で画像の動きを書きます。


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

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


//ポップアップに表示される画像とテキスト
<a href="./images/img_01.jpeg" rel="lightbox[plants]" title="ミャンマー、初めての首都、バガン">

<img src="./images/img_01.jpeg" alt="バガン"></a>

//ポップアップに表示される画像とテキスト