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?
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
.
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
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
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/
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:
Example Request
Would love to see some more examples:
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! :)
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
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:
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
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.
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.
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!
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/
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.
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.
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:
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 :)
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
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;
.But wait
There's a cavet though! As I alluded to in my original implementation
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.
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.