Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
20 May

How to Create a Stunning Full Page Photo Wall Gallery

  • Gallery, License Free
  • Leave a Comment

Codrops has shared a tutorial of how to create Sliding Panel Photo Wall Gallery with jQuery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode.

In the full picture view we add some nice transition effect when we browse through the photos. In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically.

photo-wall-gallery

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/
License: License Free

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
How to Build a Dynamic Flash Gallery with Slider Control

How to Build a Dynamic Flash Gallery with Slider Control

Smooth Javascript Image Zooming For Your Web Pages

Smooth Javascript Image Zooming For Your Web Pages

How to Create a Photo Stack Gallery with jQuery & CSS3

How to Create a Photo Stack Gallery with jQuery & CSS3

Stunning Full Page Image Gallery with jQuery

Stunning Full Page Image Gallery with jQuery

Interactive Photo Desk with jQuery and CSS3

Interactive Photo Desk with jQuery and CSS3

Pixelpost Open Source Multi-Lingual Photoblog App

Pixelpost Open Source Multi-Lingual Photoblog App

Comments
  • http://www.dylanmullins.com/ dMullins

    Strange, I was just looking for something like this for a project, then ditched the idea because I couldn’t find it. Thanks again, WebAppers, for saving the day.

  • http://www.alltechdealsonline.com tech deals

    Very cool script, beautiful layout, Id like to use it on my site, thanks for sharing -:)

  • Dhareesh.D.Lal

    Its Really amazing.. Its very use full. Thanks for this post and expecting more like this project.Once again THANKS….

  • http://www.fedmich.com/life fedmich

    Cool,
    just a few mods to integrate the keyboard LEFT and RIGHT on it.

    Thanks for sharing

  • http://theluxurylifestyle.net/blog Phee

    I like this piece of article, great sharing!

  • http://www.websdeveloper.com Web Developer

    Excellent – my son’s grandparents in two different continents can now see every single photo I take of him with my iPhone. Thanks for introducing me to this!

  • http://www.kutyur.ru yuri kutyur

    Excellent Gallery…
    Original code?..)

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • Free Responsive HTML5 + CSS3 Site Templates
  • 35 Creative Twitter Covers for Web Designers
  • FROONT: Responsive Web Design in the Visual Way
  • Designing Experiences for Responsive Web Sites
  • jQuery Unveil: The Lightweight Version of Lazy Load
  • What are HTML5 Datalists and When to Use Them
  • Easy Responsive Tabs jQuery Plugin for Web & Mobile
  • jQuery.Swatches Turns Div into a Sweet Color Swatch
  • Pure: A Set of Small & Responsive CSS Modules
  • Create Sexy Android-like UI with Fries
Sponsors
Plugins
  • Advertisement15
  • Calendar48
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour17
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup50
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons27
  • Color Schemes25
  • Fonts47
  • Forms115
  • Icons110
  • Patterns24
  • PS Tutorials17
  • Stock Photos21
  • Tables25
Others
  • Announcement104
  • Best Collections6
  • Code57
  • eCommerce25
  • Framework217
  • Hosting13
  • Information244
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools302
  • Webmail14
Licesnes
  • BSD License69
  • CC License123
  • GPL License224
  • LGPL License40
  • License Free749
  • MIT License422
Sponsors
Advertise Here
Partners
MaxCDN