_ap_ufes{"success":true,"siteUrl":"www.phpgang.com","urls":{"Home":"http://www.phpgang.com","Category":"http://www.phpgang.com/category/about-php","Archive":"http://www.phpgang.com/date/2016/05","Post":"http://www.phpgang.com/how-to-get-facebook-page-feed-with-graph-api-using-php-mysql_4021.html","Nav_menu_item":"http://www.phpgang.com/3842_3842.html","Download":"http://www.phpgang.com/downloads/how-to-create-restful-api-web-service-with-slim-php-and-mysql"}}_ap_ufee How to create Full Screen Responsive Image Gallery using CSS and Masonry | PHP Gang – Tutorial Programming Blog | Programmers Demo Download Free
March 10, 2014 9:25 am

How to create Full Screen Responsive Image Gallery using CSS and Masonry

In this tutorial I am going to show you how to create a full screen responsive image gallery using CSS and Masonry ( is a JavaScript grid layout library ), I am giving you image gallery example but you can create your blog posts, user profiles, video wall etc using this technique so we are giving you this tutorial with a nice demo and source to download for free.

How to create Full Screen Responsive Image Gallery using CSS and Masonry

Read more:

How to create Responsive Header Menu with CSS

How to create Mobile Navigation Menu with CSS & jQuery

Step 1:

Create a grid and add images with different sizes.

Above markup create images grid with title and description with images placeholder for fast images delivery http://placekitten.com/1024/768 placekitten.com is A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code.

CSS to organize your gallery:

We used @media for different screens to make gallery responsive and .onhandover class to show title and description oh handover event.

jQuery files to Include:

Initialize Masonry using the following:

That’s all for today’s tutorial I hope you like this tutorial please don’t forget to give us your feedback and share with your friends.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories: