Giter Club home page Giter Club logo

codrops / scatteredpolaroidsgallery Goto Github PK

View Code? Open in Web Editor NEW
188.0 18.0 65.0 458 KB

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.

CSS 20.40% JavaScript 33.22% HTML 46.38%

scatteredpolaroidsgallery's Introduction

Scattered Polaroids Gallery

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.

Article on Codrops

Demo

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License

Photos by Riza Nugraha, licensed under Creative Commons Attribution 2.0 Generic

© Codrops 2013

scatteredpolaroidsgallery's People

Contributors

botelho avatar crnacura avatar reneras avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

scatteredpolaroidsgallery's Issues

Limited navigation

Hello there and thanks for your amazing plugin.
The problem is that although I have 16 images in the gallery but the pagination bullets bellow the main picture are only 6 and it doesn't show the rest of images. any ideas how to fix this?
by the way it would be great if we could have navigation arrows.

Thanks again

Need to make individual polaroids clickable to make current (just like nav dots)

This is an awesome plugin! I got it working great, but I would like to make it possible for users to also be able to click directly on the scattered polaroid images to select (make current) and move to middle - just like the Nav dots do. I am new to learning js/jQuery, so I am finding it difficult to figure this out. I would think it would be possible since it is already working with the Nav dots. I want to keep the existing Nav dots menu (good for mobile view) but in addition to the Nav dots, I need the individual polaroids able to do the same as the Nav dots.How can I make this happen? Any help greatly appreciated!!

flip when clicked on image

expalin
can someone please help me how to make image flip when 'image' is clicked and 'flip' button as well ?

Bower install

First of all thanks for the great wok here , it is impressive

I have problem when I try to install from bower ,

$ bower install ScatteredPolaroidsGallery --save
bower ENOTFOUND     Package ScatteredPolaroidsGallery not found

Any idea ? , thank you in advance

Guidance for creating auto rotate

@ericthelast

Thanks for contributing to this project. Can you provide me some guidance on a few things.

  1. Have the animation begin after x seconds if user does not click the start btn
  2. Auto rotate if the user does not click the buttons to change the image

the animation stops

I do not know what the problem is, since there are no errors, but if you change the slides several times, the animation stops. It helps to resize the screen (for example, opening a console or simply zooming in the browser.

For a more convenient test - http://jsbin.com/baxodurihi/edit?output

The animation can stop on 3 clicks and 50 ...

I thought to solve the problem by changing the size of this block by several pixels with each click of the button, but I never thought of how))

Flipped content overflow

Thanks for the excellent article/work. I am encountering one issue with it, in that I tried to make the content in the flip side have overflow:auto, so that if the content is loger than the height of the container, but it seems that once flipped, the 'polaroid' is behind some kind of invisible container, and the scroll bars do not respond.

This occurs mostly in Chrome; expected behaviour works in Firefox and IE10.

A preview of the issue can be seen at http://www.oleti.fr/fr/testimonials-polaroïds/?preview . Note that the content is not yet live, hence the 'preview' parameter on URL.

I have also temporarily made it that text becomes red on hover, and again, it does not respond in Chrome (v39), but does in IE10 and Firefox.

Would you be able to help point towards a solution that would work for all browsers?
Thanks

Change Nav 'dots' system to 2 basic left / right arrow nav & 'bring to front' by clicking any image

Hi all,

Thank you for such an amazing plugin - it is almost perfect for what I need apart from 2 bits I cannot suss out!

Firstly - I want to remove the navigation dots and replace them with the ability to scroll through the images using a simple left / right arrows navigation.

Secondly - I would like to make it so we can bring any image to the front by clicking on it. Currently the image is 'static' in the background ....

Has anyone adapted the code to manage this? I have seen on a similar thread here that there is this update (684a12b) but when I replace the photostack.js code with this it breaks the gallery and leaves only the last image viewable! I have lost what feels like a large portion of my life trying to solve these 2 bits! Can any kind person help me out?!

Cheers in advance!

About License Terms

Hi,

I visited your plugins live demo. It is a cool fantastic plugin. I'm bit confused with the license term "as-is". I'm developing a WordPress premium theme. I would like to make a shortcode for displaying WordPress post thumbnails integrating with your plugin. I do not use & redistribute your code directly as it is. Is it possible to achieve my goal?. I do not like to violate any License terms & conditions for any reason.That's why I ask this from you directly. I'm happy to know your thought about this & waiting a positive feedback.

Thanks.

How to click on links on back part?

The Gallery is perfect, thank you for create.

But...
After flip(click on .current.flippable), back part of figure have style: backface-visibility: hidden;
So it is work in Firefox and Edge, but not working in chrome.
I have tag my link on back stage, and this link is disable in Google Chrome Browser.
Please, help me, how to fix it?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.