spacegallery:奥から前へ整列した複数画像を表示させるJs
- 2019.07.04
- JavaScript jQuery
- spacegallery, ギャラリー, 画像スライダー

奥から前へ整列した複数画像を表示します。
画像をクリックすると整列した画像が前へ移動します。
1.CSSの記述
<style type="text/css"> <!-- .spacegallery { position: relative; overflow: hidden; width:600px; height:500px; } .spacegallery img { position: absolute; left: 50%; } .spacegallery a { position: absolute; z-index: 1000; display: block; top: 0; left: 0; width: 100%; height: 100%; background: url(images/blank.gif); } --> </style>
2.読込むJsとJavaScriptの記述
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#idDemo").spacegallery(); }); </script>
3.HTMLの記述例
<div id="idDemo" class="spacegallery"> <img src="images/i1.jpg" alt=""> <img src="images/i2.jpg" alt=""> <img src="images/i3.jpg" alt=""> <img src="images/i4.jpg" alt=""> <img src="images/i5.jpg" alt=""> <img src="images/i6.jpg" alt=""> <img src="images/i7.jpg" alt=""> <img src="images/i8.jpg" alt=""> <img src="images/i9.jpg" alt=""> <img src="images/i10.jpg" alt=""> </div> <!--/idDemo-->
ソース元:Spacegallery – jQuery plugin
ギャラリー系の複数画像の見せ方って色々ありますね。
その他またありましたらご紹介します。
-
前の記事
docx.js:JavaScriptで記述の情報をWordファイルのテキストとして出力・ダウンロードできるJs 2019.07.03
-
次の記事
FPDF:日本語文字をpdfで出力するphpライブラリ 2019.07.05