CSS only Gallery

Overview

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.
Issues
  • 2nd, 3rd, 4th images are dropped down about 20 px

    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

    opened by digibrink 10
  • Links only work if they are on the last slide

    Links only work if they are on the last slide

    It seems my links won't function unless they are on the last slide. Any ideas? I'm using the sass files provided from the PeepCode screencast.

    opened by ardavis 9
  • adding more items

    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

    opened by bruce1969 8
  • Problem on href in each slide

    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/

    opened by dailybread81 7
  • Example Request

    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! :)

    opened by Gong-Bao-Chicken 5
  • Animation-delay gets out of sync on iOS

    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
    opened by joeldbirch 5
  • The first item from the slider is some pixels up from the rest

    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>
    
    
    opened by evandropastor 4
  • links failed during the first seconds of the animation

    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

    opened by jairusgit 4
  • Disable pointer events on gallery items, enable on the first-of-type as inititalizer

    Disable pointer events on gallery items, enable on the first-of-type as inititalizer

    Added proper pointer-events to the initialization, this way the user can interact with the first slide the first time the slider is executed.

    opened by JoePerkins 4
  • No Source Code About http://benschwarz.github.io/gallery-css/

    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.

    opened by WaylanPunch 3
  • Hyperlink Issues with Autoplay

    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.

    opened by ShadowMessiah 0
  • Hyperlink issue

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

    opened by KwrKy 1
  • Slideshow will play automatic without the autoplay class

    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

    opened by janstieler 0
  • control-button hover fails if anchor link exists in URL

    control-button hover fails if anchor link exists in URL

    Pretty straightforward. If you click a control-button (dot) link, the hover dots no longer function properly.

    opened by estin1985 0
  • Pause auto play on hover v2 - electric boogaloo

    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.

    opened by xzyfer 0
Releases(1.0.1)
Owner
Ben Schwarz
Founder & CEO @calibreapp
Ben Schwarz
Photato - The personal Pictures gallery

Photato Photato aims to be a self-hosted photo gallery, accessible through a responsive WebUI. Give to Photato a picture folder and it will index it,

Trebonius 139 Jan 10, 2022
Photo gallery for self-hosted personal servers

Photoview is a simple and user-friendly photo gallery that can easily be installed on personal servers. It's made for photographers and aims to provid

Photoview 1.4k Jan 13, 2022
A directory-first photo gallery website, witch rich UI, optimised for running on low resource servers (especially on raspberry pi)

PiGallery2 Homepage: http://bpatrik.github.io/pigallery2/ This is a directory-first photo gallery website, optimised for running on low resource serve

Patrik J. Braun 743 Jan 23, 2022
Manage your photos with Piwigo, a full featured open source photo gallery application for the web. Star us on Github! More than 200 plugins and themes available. Join us and contribute!

Manage your photo library. Piwigo is open source photo gallery software for the web. Designed for organisations, teams and individuals. The piwigo.org

Piwigo 1.7k Jan 15, 2022
yet another simple static gallery generator

Sigal - Simple Static Gallery Generator Sigal is yet another simple static gallery generator. It's written in Python and it allows to build a static g

Simon Conseil 733 Jan 4, 2022
An easy to use, simple to manage, web photo gallery written in PHP.

UberGallery - The simple PHP photo gallery Created by, Chris Kankiewicz Introduction UberGallery is an easy to use, simple to manage, web photo galler

UberGallery 195 Jan 1, 2022
The Zenphoto open-source gallery and CMS project

Zenphoto The simpler media website CMS http://www.zenphoto.org Welcome to the Zenphoto git repository! About Zenphoto is a standalone CMS for multimed

ZenphotoCMS 254 Jan 17, 2022
🔥 Open source static (serverless) status page. Uses hyperfast Go & Hugo, minimal HTML/CSS/JS, customizable, outstanding browser support (IE8+), preloaded CMS, read-only API, badges & more.

Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Completely free with Netlify. Comes with Netlify CMS, read-only

cState 1.5k Jan 14, 2022
Wekan 17.7k Jan 12, 2022
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets

google-webfonts-helper A Hassle-Free Way to Self-Host Google Fonts This service might be handy if you want to directly download all .eot, .woff, .woff

Mario Ranftl 9k Jan 21, 2022
An open source code editor for the web, written in JavaScript, HTML and CSS.

⚠️ On September 1, 2021, Adobe will end support for Brackets. If you would like to continue using, maintaining, and improving Brackets, you may fork t

Adobe, Inc. 33.7k Jan 22, 2022
An open source code editor for the web, written in JavaScript, HTML and CSS.

⚠️ On September 1, 2021, Adobe will end support for Brackets. If you would like to continue using, maintaining, and improving Brackets, you may fork t

Adobe, Inc. 33.7k Dec 31, 2021
A static photo gallery generator

Fussel Fussel is a static photo gallery generator. It can build a simple static photo gallery site with nothing but a directory full of photos. Featur

Chris Benninger 102 Jan 6, 2022
Photato - The personal Pictures gallery

Photato Photato aims to be a self-hosted photo gallery, accessible through a responsive WebUI. Give to Photato a picture folder and it will index it,

Trebonius 139 Jan 10, 2022
Photo gallery for self-hosted personal servers

Photoview is a simple and user-friendly photo gallery that can easily be installed on personal servers. It's made for photographers and aims to provid

Photoview 1.4k Jan 13, 2022
A directory-first photo gallery website, witch rich UI, optimised for running on low resource servers (especially on raspberry pi)

PiGallery2 Homepage: http://bpatrik.github.io/pigallery2/ This is a directory-first photo gallery website, optimised for running on low resource serve

Patrik J. Braun 743 Jan 23, 2022
Manage your photos with Piwigo, a full featured open source photo gallery application for the web. Star us on Github! More than 200 plugins and themes available. Join us and contribute!

Manage your photo library. Piwigo is open source photo gallery software for the web. Designed for organisations, teams and individuals. The piwigo.org

Piwigo 1.7k Jan 15, 2022
yet another simple static gallery generator

Sigal - Simple Static Gallery Generator Sigal is yet another simple static gallery generator. It's written in Python and it allows to build a static g

Simon Conseil 733 Jan 4, 2022
An easy to use, simple to manage, web photo gallery written in PHP.

UberGallery - The simple PHP photo gallery Created by, Chris Kankiewicz Introduction UberGallery is an easy to use, simple to manage, web photo galler

UberGallery 195 Jan 1, 2022
The Zenphoto open-source gallery and CMS project

Zenphoto The simpler media website CMS http://www.zenphoto.org Welcome to the Zenphoto git repository! About Zenphoto is a standalone CMS for multimed

ZenphotoCMS 254 Jan 17, 2022
The TYPO3 Core - Enterprise Content Management System. Synchronized read-only mirror of http://git.typo3.org/Packages/TYPO3.CMS.git

TYPO3 CMS TYPO3 is an open source PHP based web content management system released under the GNU GPL. TYPO3 is copyright (c) 1999-2021 by Kasper Skaar

TYPO3 GitHub Department 820 Jan 20, 2022
[READ-ONLY] An open source Content Application Platform based on Flow. A set of core Content Management features is resting within a larger context that allows you to build a perfectly customized experience for your users

The Neos package Note This repository is a read-only subsplit of a package that is part of the Neos project (learn more on www.neos.io). Neos is an op

Neos 98 Jan 9, 2022
📈 Collect customer event data from your apps. (Note that this project only includes the API collector, not the visualization platform)

Rakam Rakam is an analytics platform that allows you to create your analytics services. Features / Goals Rakam is a modular analytics platform that gi

null 788 Jan 5, 2022
Fast and lightweight header-only C++ library (with Python bindings) for approximate nearest neighbor search

MRPT - fast nearest neighbor search with random projection MRPT is a lightweight and easy-to-use library for approximate nearest neighbor search. It i

Ville Hyvönen 227 Dec 9, 2021
Let's Upload That Image ! Read-only mirror of https://framagit.org/fiat-tux/hat-softwares/lutim

Lutim What Lutim means? It means Let's Upload That Image. What does it do? It stores images and allows you to see them, download them or share them on

Luc Didry 167 Nov 19, 2021
Read-only mirror of https://framagit.org/fiat-tux/hat-softwares/lufi/

Lufi What does Lufi mean? Lufi means Let's Upload that FIle. It's a E2E encrypted file sharing software. Which browsers are compatible? Lufi is tested

Luc Didry 202 Dec 31, 2021
:lock: A simple open source web application that lets users encrypt and share messages that can only be read once.

CryptoNote CryptoNote is a very simple open source web application that lets users encrypt and share messages. If you'd like to see an example of the

Alain Meier 159 Dec 8, 2021
HTTP(S)/WS(S)/TCP Tunnels to localhost using only SSH.

sish An open source serveo/ngrok alternative. Deploy Builds are made automatically for each commit to the repo and are pushed to Dockerhub. Builds are

Antonio Mika 2.3k Jan 10, 2022