Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

play nice with bootstrap #14

Open
mderazon opened this issue Apr 18, 2014 · 2 comments
Open

play nice with bootstrap #14

mderazon opened this issue Apr 18, 2014 · 2 comments

Comments

@mderazon
Copy link

very nice !

what do I need to do to make it play nicely with Bootstrap ?
the position: absolute; css tag makes it a little hard to put it inside bootstrap grid etc.
@geelen
Copy link
Owner

geelen commented Apr 18, 2014

The first frame should be position: static, and the others are position: absolute so they layer over the top. I've tried to make it so it acts as similar to an <img> tag as possible, so it should work with whatever grid.

Can you show me how it's not working for you, maybe as a codepen or jsfiddle?

@mderazon
Copy link
Author

After stripping the code to just the images and some css + js, i'm not so sure it's bootstrap's fault anymore. I tried to put it in jsfiddle but couldn't work out how to include x-gif as a resource, so I put it on my server instead: http://goo.gl/CP30qa

the top 6 gifs are without x-gif, the bottom 6 are with x-gif.
Here's the code for the page:

<!DOCTYPE html>
<html class="no-js">
  <head></head>
  <body>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="vendor/normalize.css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="vendor/modernizr/modernizr.js"></script>

    <section class="portfolio" id="portfolios">
        <img src="http://i.imgur.com/iKXH4E2.gif" alt="" class="img-responsive pull-left" />
        <img src="http://i.imgur.com/iKXH4E2.gif" alt="" class="img-responsive pull-left" />
        <img src="http://i.imgur.com/iKXH4E2.gif" alt="" class="img-responsive pull-left" />
        <img src="http://i.imgur.com/iKXH4E2.gif" alt="" class="img-responsive pull-left" />
        <img src="http://i.imgur.com/iKXH4E2.gif" alt="" class="img-responsive pull-left" />
        <img src="http://i.imgur.com/iKXH4E2.gif" alt="" class="img-responsive pull-left" />




        <x-gif src="http://i.imgur.com/iKXH4E2.gif" class="img-responsive pull-left" stopped></x-gif>
        <x-gif src="http://i.imgur.com/iKXH4E2.gif" class="img-responsive pull-left" stopped></x-gif>
        <x-gif src="http://i.imgur.com/iKXH4E2.gif" class="img-responsive pull-left" stopped></x-gif>
        <x-gif src="http://i.imgur.com/iKXH4E2.gif" class="img-responsive pull-left" stopped></x-gif>
        <x-gif src="http://i.imgur.com/iKXH4E2.gif" class="img-responsive pull-left" stopped></x-gif>
        <x-gif src="http://i.imgur.com/iKXH4E2.gif" class="img-responsive pull-left" stopped></x-gif>
    </section>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script src="vendor/x-gif/dist/platform.js"></script>
    <link rel="import" href="vendor/x-gif/dist/x-gif.html">
  </body>
</html>

BTW, I wanted to use x-gif so I could stop the gifs and start them only on mouse over. will it be possible to do something like that with some js ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@geelen @mderazon