jQuery

【jQuery】CSSとjQueryを備えた、レスポンシブギャラリーFlex Gallery

November 11, 2017
Flex Gallery

Flex GalleryはCSSとjQueryを備えた、柔軟性に優れたギャラリー。

To Include

jQueryを含める。

<!-- Include jQuery locally -->
<script type="text/javascript" src="../src/js/jquery-3.2.1.min.js"></script>
<!-- Include jQuery from a CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">

javascriptソースとCSSスタイルシートを含めます。

<script type="text/javascript" src="js/flex-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="css/flex-gallery.css">

To Create

<div id="container"></div>

To Call

$('#container').addFlexImages(image_list).flexGallery();
image_list = ['img/image1.jpg', 'img/image2.jpg', 'img/image3.jpg'];
$('#container').addFlexImages(image_list, shuffling=true).flexGallery();

To Customize

<div id="container">
    <a href="img/image1.jpg">
        <img src="img/image1.jpg">
    </a>
    <a href="img/image2.jpg">
        <img src="img/image2.jpg">
    </a>
    <!-- more images -->
</div>
$('#container').flexGallery();
/* These are default values for flexGallery() */
$('#container').flexGallery({
    margin: '0.5vmin', 
    minHeightRatio: 0.25, 
    fadeInDuration: 1000, 
    checkPeriod: 100
});

MIT