Gallery.css is all CSS

  • By Ben Schwarz
  • Last update: Dec 13, 2022
  • Comments: 15

Gallery.css

Gallery.css is all CSS. Think: Simple, maintainable and understandable galleries without the use of Javascript.

What? No script!? Why? — Gallery css started as an experiment to build interactive, fluid componentry without the need for jQuery, or a jQuery carousel script. Use this library, or don't — either way, hopefully you'll learn from the techniques used within.

Installation

The preferred method to install gallery-css is by using Bower, a package manager for front-end components.

bower install gallery-css

Otherwise, if you want to keep it simple, check the dist directory.

Getting started

You've got a couple options with how you'd like to use gallery.css:

* Without autoplaying animation
* With autoplaying animation
* With or without browser prefixes

Read the getting started guide, or checkout the examples

How does it work?

Gallery CSS screencast: Building advanced web componentry using only CSS

I've prepared a screencast that will take you through how to build something like Gallery-css from scratch, theres tonnes of tiny details that I learnt myself while building it. Its $15, you'll learn and it'll help me keep building for the web. How good is that?

Browser support

Safari Firefox Chrome IE8 IE9 IE10
✔ ✔ ✔ ✖ † ✔ ✔

† Absolutely possible using a variety of JS selector shims, although not recommended.

Build instructions

Gallery CSS is built using grunt & RubySASS.

You'll need:

  • Ruby (and sass - gem install sass)
  • Run npm install from the root directory.
  • To run a build, you'll simply need to run grunt.

Github

https://github.com/benschwarz/gallery-css

Comments(15)

  • 1

    2nd, 3rd, 4th images are dropped down about 20 px

    Hi,

    This is great but I am having a few issues. All secondary images in the slideshow (1 is good, 2-5 are off) are dropped down and I can't get them positioned correctly. See screenshots. Any help would be greatly appreciated. Thanks!!

    Justin

    screen shot 2014-03-25 at 6 50 47 pm screen shot 2014-03-25 at 6 51 24 pm screen shot 2014-03-25 at 6 51 37 pm screen shot 2014-03-25 at 6 51 55 pm

  • 2

    adding more items

    I see that 3 items are default (or max), but in my attempt to add more items, the screen goes "white" and doesn't render anything added past 3 items.

    Is there something I'm missing or not seeing?

    Thanks in advance

  • 3

    Problem on href in each slide

    HELP! Can't get it work.. Only the last slide href is clickable. I've tried changing 'pointer-events' state but still not work.

    Please check this link http://www.imaginali.com/slide-test/

  • 4

    Animation-delay gets out of sync on iOS

    This project rocks!

    Notice that—on iOS—scrolling the page will throw the gallery items’ timelines out of sync. I guess it’s due to the way iOS pauses timers while the page is scrolling (duh, sounds self-explanatory after typing it).

    I found this similar report on an unrelated repo which seems to provide workarounds, the best one (possibly) being number 3:

    1. Incorporate the delay into individual @keyframe rules for each line
  • 5

    Example Request

    Would love to see some more examples:

    • how do you use images with your slider
    • how do you make it responsive
    • how do you add controls to go left / right

    sry, if this is kind of a dump question, but i am trying to figure out how this works and learn something.

    btw. i enjoyed your screencast, i guess the most useful part for me was the introduction to grunt. anway i guess my understanding of css and html isnt good enough to understand what you did and how you built your slide for the example page, appreciate any help! :)

  • 6

    links failed during the first seconds of the animation

    Hello,

    I am doing two galleries with 5 items and autoplay using your awesome work. I've bought and saw your video but I still have a problem:

    If I click on the control button for the 2nd image before it appears on the animation (5 seconds), it shows a blank div, if then I click in the first control button, everything works fine. This happens for the rest of the images if I click on the control button before its delay-animation. Do you know if there is a way to solve this?

    Please let me know if you need more info, the webpage is http://95.85.58.103/jardineriacanizo/index.php

    Thanks in advance, Jairo García

  • 7

    The first item from the slider is some pixels up from the rest

    I've tested the gallery-css and I found a problem: the first item of the list is few pixels up from the rest, and it make the animation strange. Here is the code that I use:

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css?v=1.0">

    <link rel="stylesheet" href="gallery.theme.css">
    <link rel="stylesheet" href="gallery.css">
      <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
    <style>
        #container{
            width:900px;
            margin:auto;
        }
    </style>

</head>
<body>
    <div id="container">
        <div class="gallery items-3">
          <div id="item-1" class="control-operator"></div>
          <div id="item-2" class="control-operator"></div>
          <div id="item-3" class="control-operator"></div>

          <figure class="item">
            <img src="http://placedog.com/900/300" alt="" />  
          </figure>

          <figure class="item">
            <img src="http://dummyimage.com/900x300/292929/e3e3e3" alt="" />
          </figure>

          <figure class="item">
            <img src="http://dummyimage.com/900x300/ffffff/000000" alt="" />
          </figure>

          <div class="controls">
            <a href="#item-1" class="control-button">•</a>
            <a href="#item-2" class="control-button">•</a>
            <a href="#item-3" class="control-button">•</a>
          </div>
        </div>
    </div><!--end container-->
  <script src="js/scripts.js"></script>
</body>
</html>
  • 8

    No Source Code About http://benschwarz.github.io/gallery-css/

    When I opened your web page - Gallery CSS, I read the code of this page through the Browser. But I cannot find resource like

    "images/arrow-left.svg"  or "images/arrow-right.svg"

    I quite fancy the style of your work, but where the source code you put in? I can't find them in your public repositories.

  • 9

    Automatic stylesheet generator

    I wrote an automatic CSS generator for your gallery. It can be used to generate a stylesheet once off, or it can create one on the fly for when your gallery has a variable number of images, like mine did.

    All you need to do is supply the number of images in your gallery. Here's how I used it in my project.

    <link rel="stylesheet" href="gallery.prefixed.css.php?n=<?php echo count($images); ?>">

    This is the first time I've ever contributed to anything, so let me know if I've done something incorrectly. Thanks for your awesome gallery!

  • 10

    Autoplay not working?

    Great plugin!

    I've installed the slider on a website and added the "autoplay" class, but it only seems to be working when the bullets are clicked. Any idea where I've gone wrong?

    http://visiondemo.com.au/lab/

  • 11

    Working example for IE8

    examples/IE8 is pretty close, to working perfectly — :target appears to be working, as does the ~ and + selectors.

    Need to spend some time with it, but not right now.

  • 12

    Hyperlink Issues with Autoplay

    I have a similar issue as "Hyperlink issue #36 " posted by KwrKy, but have an additional detail factoring in; I am using autoplay for the slider. In fact, I had the exact same issue as KwrKy but the reply by gscscnd in thread #36 fixed that aspect of my problem.

    My additional problem seems to only factor in with autoplay turned on. When the slider first loads, all is well; all hyperlinks are clickable on all slides. However, as soon as the last slide moves back around to the first slide, the hyperlink on the first slide is masked by the hyperlink of the last slide for about 2 seconds, then it becomes clickable. What do I need to change to make the first slide immediately clickable once it gains focus/view?

    Note: All of my hyperlinks are in the same place on each slide, this explains why the link for the last slide is masking the link on the first slide.

  • 13

    Hyperlink issue

    Hi @benschwarz

    I'm using Gallery and loving it, but I'm really struggling with two things, and being the novice coder that I am, I have exhausted my limited supply of troubleshooting know-how. If you could look into this and help me out I would really appreciate it 👍

    The website is www.theworldneedafather.com/ and Gallery is used for the section "Initiatives" about halfway down the page. My issues are:

    1. I can't seem to make the buttons clickable.
    2. Each of the slides has a hyperlink to a different section, but for some reason only the hyperlink on first one is clickable, and that hyperlink stays clickable on the following pages even when the slides change. The hyperlinks on the other pages just aren't clickable at all.

    I dug into the code a little using the Chrome dev tools but couldn't find anything obvious. Please could you take a look and let me know where my issue might lie?

    Thank you for your time :)

  • 14

    Slideshow will play automatic without the autoplay class

    Hello, could it be that you have some different versions of the examples on the githubpage, github and on the screencast version? Actually now I have copied it to jsbin to create a testslide. But it play automatic and I don't have used the autoplay class. What is now the actual version of the slider?

    Kind regards

  • 15

    Pause auto play on hover v2 - electric boogaloo

    This is revised implementation of #4 with 4536% more sexy.

    Feature

    Pause gallery autoplay whilst an item is being hovered over as one would expect from a tradition javascript based solution.

    How?

    CSS3 animation module to the rescue, more specifically animation-play-state: paused;.

    The ‘animation-play-state’ property defines whether the animation is running or paused. A running animation can be paused by setting this property to ‘paused’. To continue running a paused animation this property can be set to ‘running’. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation.

    But wait

    There's a cavet though! As I alluded to in my original implementation

    [animation-play-state] doesn't pause animations that are big delayed. This causes animations to start queuing once their delay is over.

    The current implementation defines a single animation that is applied to all gallery items with successive delays (hawt!). As noted above this doesn't play nice if you happen to hover the gallery before every animation has begun to play atleast once.

    To work around this initially I programmatically generated a new animation for each item. This works as expected but was messy.

    The solution

    To avoid the excessive increase in complexity, and generated file size of my original approach I wanted to find a way to get delays and play-state to play nice.

    If the value for ‘animation-delay’ is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset.

    Viola! By reversing the animating I could instead use negative delays. This means all the animations have technically begun immediately so play-state can now be utilised.

Popular Tag

Related