benschwarz / gallery-css Goto Github PK

View Code? Open in Web Editor NEW

1.1K 58.0 297.0 6.05 MB

CSS only Gallery

Home Page: http://benschwarz.github.io/gallery-css/

License: MIT License

JavaScript 11.04% CSS 88.96%

gallery-css's People

Contributors

Stargazers

Watchers

Forkers

twocngdagz lokmane isabelmitchell cre8art4life nickbaldwin primaapriansyah eliuflorez gitlisted netconstructor uxscripts openux msoftware a973c luis761974 orioltf mouafa jbenito jonjonny jordan-carl lokidg chrisemoulton kublaj ortense xzyfer 9kopb reneruiz jtarrinho1978 epidoux whdrnr01 joshnock rahulvramesh royceyadav stefanritter guilhermemunhoz lu4sh1i ajitsinghit2 luisenriquecfr rmsweb douglogue conching mc1camal lucianobta bergson henridias kevinchichetti eltoncarvalhoo jakschu vinnymesquita davvidd adamrights ottanoz sudhirsb2003 arthurruan vanielopes ander123 vitortadashi gabrielsalim djonasm devildeveloper leorj1981 paulo-carvajal chrisgosling multiservice ankyskywalker plankshen luankaue halkibsi hierbeidir amorim-ac ae2 rmassucato rafaelguardiano95 joneba mchamorro999 viniciuspinheiro cursenei markesrodrigues shanesheppard asanjeevak karimabdul tiesalfrink zburgh tecmasters gabrielcury raissonbuba msfurquim rodaan thalesvauna carolinaloquette c-sole rafaborges12 lucianotavares yuriguida20 birdthrane juancportela simonezang daniloborgez dropesantiago rroman1978 joeperkins

gallery-css's Issues

Css gallery safari overlap animation

hi, I have this site:

http://domar.laranciaweb.it/

but in safari the animation css overlap, why? :(

Thank you

Blank slide in autoplay mode

Blank slide in autoplay mode.
Please check it!
www.oltoffshore.it > hompage slides

thanks

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.

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.

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/

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

Gem gallery-css-rails

I recently made a gem for your library, so people can start building some awesome rails applications with your library. I mentioned the source (of course), but if you want some additional credits, links to demo pages or something else I forgot to mention please let me know.

Swipe gesture?

Is it possible to enable a swipe navigation on mobile device?

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:

Incorporate the delay into individual @Keyframe rules for each line

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.

Examples are either incomplete or of poor taste

Examples use prefixfree, which sucks for non-http serving (#10)
Examples have incomplete formatting, which sucks for taking and using (#11)
Examples should demonstrate best usage practice
Generally, people are having trouble (#13, #6)

Aim:

Cleanup /examples and make it easier to get started with Gallery

Lets do this!

Adding images

how do i add image for the slides

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

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>

Standard example broke

Hi, I download the gallery-css with bower and open the standard example in chrome and I get this screenshot:

Console Log:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///dist/gallery.css
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///dist/gallery.theme.css
XMLHttpRequest cannot load file:///Users/david.basilio/Documents/workspace/azionmanager/bower_components/gallery-css/examples/standard/css/vendor/normalize.css. Cross origin requests are only supported for HTTP. index.html:1
XMLHttpRequest cannot load file:///dist/gallery.css. Cross origin requests are only supported for HTTP. index.html:1
XMLHttpRequest cannot load file:///dist/gallery.theme.css. Cross origin requests are only supported for HTTP. index.html:1
XMLHttpRequest cannot load file:///Users/david.basilio/Documents/workspace/azionmanager/bower_components/gallery-css/examples/standard/css/vendor/normalize.css. Cross origin requests are only supported for HTTP. index.html:1
XMLHttpRequest cannot load file:///dist/gallery.css. Cross origin requests are only supported for HTTP. index.html:1
XMLHttpRequest cannot load file:///dist/gallery.theme.css. Cross origin requests are only supported for HTTP.

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

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.

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.

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 can't seem to make the buttons clickable.
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 :)

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

Links on figcaptione

I've linked a caption in each slide.. but it works only the first and when it has slide away the other links won't work. It seems to be the first caption always on top!

Building with Grunt fails (.gallery-css-s3-credentials not found)

Hello

I've tried rebuilding the Gallery script with grunt and got this error:

$ grunt
Loading "Gruntfile.js" tasks...ERROR
>> Error: Unable to read "/Users/olliefr/.gallery-css-s3-credentials" file (Error code: ENOENT).
Warning: Task "default" not found. Use --force to continue.

I managed to work around this by doing

$ echo "{}" > ~/.gallery-css-s3-credentials

Then the grunt command completed successfully.

Would it not be better if the script checked the S3 credentials file without failing? I am not that good at JS/Grunt/Node so I cannot fix it myself but am offering this as a suggestion :-)

Next / Previous to start and end

Hello, because the first slider and the last one does not show the Prev / Next buttons?

Getting the slider to change slides

Hello, I was wondering if you would be able to help me. We are trying to add swipe detection to the gallery (using hammerjs) and I was wondering how I could trigger the slide to change depending on which way the slide went.

The only requirement is that it cannot use jQuery.

Thanks.

Links hanging around and not changing with the slides.

http://codepen.io/marc-costello/pen/uqaHx

Links aren't changing with the slides. So the first link it encounters is persisted

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

autoplay wont work in safari or firefox

Hi i've added the autoplay class and all is fine in firefox browser but as for safari and chrome the autoplay does not work. Can someone offer advice?

Thanks

Turbolink issue control-button

Thanks for this awesome library @benschwarz!

As I was testing this awesome piece of craftsmanship, I stumbled upon a problem where the control-buttons don't seem to work when using gallery-css together with turbolinks. This can easily be fixed of course by disabling turbolinks entirely, or disabling it for the links that don't work. Still I thought it should be nice to let you know that currently this problem is present.