Skip to content
Responsive Pure CSS image gallery without javascripts.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
stylesheets
LICENSE
README.md

README.md

ma5-cssgallery

MA5-CSSgallery

Responsive CSS Gallery without javascripts.

v.1.0 Initial

###Features:

  • Responsive
  • Html5
  • CSS3
  • No javascripts
  • The number of images is not dependent on the CSS

Example

1.Getting Started

<!-- html head -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
<link href="./stylesheets/ma5-cssgallery.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lte IE 9]>
<link href="./stylesheets/ma5-cssgallery-ie9.css" media="screen, projection" rel="stylesheet" type="text/css">
<![endif]-->

<!-- html body -->
<div class="ma5-css-gallery">
    <input type="radio" name="gallery-1" id="gallery-1" checked="checked">
    <div class="ma5-gallery-content">
        <!-- thumbnails -->
        <figure>
            <label for="gallery-1-slide-1">Slide 1</label>
            <img src="./path/to/thumbnail.jpg" alt="">
        </figure>
        <figure>
            <label for="gallery-1-slide-2">Slide 2</label>
            <img src="./path/to/thumbnail.jpg" alt="">
        </figure>
        <figure>
            <label for="gallery-1-slide-3">slide3</label>
            <img src="./path/to/thumbnail.jpg" alt="">
        </figure>
        <!-- slider -->
        <div class="ma5-container">
            <div class="ma5-cssslider">
                <label class="ma5-close" for="gallery-1">close</label>
                <div class="ma5-slides">
                    <!-- slide 1 -->
                    <div class="ma5-slide">
                        <input type="radio" name="gallery-1" id="gallery-1-slide-1">
                        <figure class="ma5-has-figcaption">
                            <img src="./path/to/full.jpg" alt="">
                            <figcaption>Title of slide 1</figcaption>
                        </figure>
                        <label for="gallery-1-slide-1"><img src="./path/to/navigator-icon.jpg" alt=""></label>
                    </div>
                    <!-- slide 2 -->
                    <div class="ma5-slide">
                        <input type="radio" name="gallery-1" id="gallery-1-slide-2">
                        <figure class="ma5-has-figcaption">
                            <img src="./path/to/full.jpg" alt="">
                            <figcaption>Title of slide 2</figcaption>
                        </figure>
                        <label for="gallery-1-slide-2"><img src="./path/to/navigator-icon.jpg" alt=""></label>
                    </div>
                    <!-- slide 3 -->
                    <div class="ma5-slide">
                        <input type="radio" name="gallery-1" id="gallery-1-slide-3">
                        <figure class="ma5-has-figcaption">
                            <img src="./path/to/full.jpg" alt="">
                            <figcaption>Title of slide 3</figcaption>
                        </figure>
                        <label for="gallery-1-slide-3"><img src="./path/to/navigator-icon.jpg" alt=""></label>
                    </div>
                </div>
            </div>
        </div> 
    </div>       
</div>

When the picture hasn't figcaption:

<!-- slide without figcaption -->
<div class="ma5-slide">
    <input type="radio" name="gallery-1" id="gallery-1-slide-1">
    <figure>
        <img src="./path/to/full.jpg" alt="">
    </figure>
    <label for="gallery-1-slide-1"><img src="./path/to/navigator-icon.jpg" alt=""></label>
</div>

License

The MIT License (MIT)

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.