54
SHARES
Responsive jQuery Pop Up Gallery
September 26, 2015
4 comments
74,019
In this tutorial you will learn how to create a an awesome popup gallery. Each gallery will have a small preview animation. This tutorial will provide you with five different popup galleries.

All the main animations are done using CSS transitions. I would of liked to build the entire thing using CSS only but unfortunately this was a pretty complex gallery so i had to use some JavaScript.

I was able to make the gallery responsive by recalculating all images sizing and positioning every time the browser is resized. This is quite a complex tutorial and if you want to use it in your projects i would advise you to read the entire tutorial.

I will only talk about the first example since the other ones have only a few changes in CSS and JavaScript.

HTML

This is the basic html structure:

The '#fullscreen' container is used to hold the popup gallery. This element will be hidden by default and only activated using JavaScript. The actual images will be put inside '#fullscreen-image'

Next in our tutorial we have to create a holder that will center our example on the screen.

I will also add here the next element as well even if it doesn't have anything to do with our tutorial because it's just the dropdown that will help you navigate between the provided examples.

A simple title:

Think of the example as a row based system. Each row has two columns one for the text and the other for the picture gallery. You will need to put the images inside '.wrapper-inner-content-image'.

Notice that '.wrapper-inner-content-image-hover' class will contain the little magnifying glass icon that appears over the pictures.

CSS

There are two main CSS files attached to this example: 'main.css' and 'pop-up-gallery1.css'. The main CSS file contains some styling for elements like the navigation at the top. 'pop-up-gallery1.css' contains all the styles related to the first example. I will only be talking about 'pop-up-gallery1.css' here.

First let's style the '#fullscreen' element. This will be hidden by default and it will be activated when a user clicks on a stack of photos. You will see in the style that i have used a fixed position for this element.

'#fullscreen-inner' will be inside '#fullscreen' and it will have a relative position because this element will have the next slide, previous slide and close buttons as well as the images in the gallery.

The next thing we will do is style the next slide, previous slide and close buttons.

'#fullscreen-image' will hold the popup images and it will have a relative position.

Each image inside '#fullscreen-image' will have an absolute position and it will be centered in the middle but this will be done partially now using CSS and later be completed using JavaScript.

This is how the CSS animations looks like for the first example.

The next block of CSS style will be about the content area.

Also the CSS for the small magnifying glass icon in the content area.

The CSS preview animation for the photo stack inside the content area is very similar to the one in the popup.

And finally the CSS animations for the transitions in the popup.

JavaScript

First i have to write something that doesn't add anything to the popup: the JavaScript for the examples navigation.

We have to set the height of each '.wrapper-inner-content-image' equal to the height of the first image that will be shown at the top of the stack and also change the height of the hover element which is activated each time you hover over the stack.

The next part is a very difficult one because we have to resize as well as re-align all the images inside the popup each time the user resizes the window. In order to do this we have to create some variables the most important ones are the ratio of width to height and the ratio of height to width of the image.

When the user clicks on a gallery all the images inside '#fullscreen-image' are removed and images that where clicked on are cloned inside '#fullscreen-image'. After doing this we display '#fullscreen' and apply the proper styling. I will wrap the opening and the closing of the popup in a nice function.

The changeling of the images inside the popup is done very easily probably easier than you imagined and this is valid for all the the five examples. The images are changed just by moving the last image to the top of image list.

Because i don't like galleries that don't have keyboard arrow control i just had to add it to my tutorial.

The last thing we have to do is to instantiate all the functions and create click functions for next slide and previous slide buttons.

Subscribe to our newsletter to get notified when there is a new tutorial.

54
SHARES
16
32
4
2
About the author
Popa Robert: Is the founder of Simbyone.com, freelance web developer and designer, he likes to create beautiful websites and water cooled PC's
4 Comments
Malik
October 8, 2015
Thanks !
Gustavo
October 8, 2015
Hello. I was testing your component and saw a "problem": if I set the gallery with only few images (I did it with 3), the background stay blank, losing the background image. How can I solve it? Thanks.
Aditya
October 26, 2015
How do I close the pop-up gallery with ESC key? Cany ou help please?
Matthew Colton
June 10, 2016
Hallo, I would like to release a Typo3 extension based on your great work "Responsive jQuery Pop Up Gallery" . After checking the terms of use I wasn't quite sure if I am allowed to. The extension would be free for download from typo3.org. I would credit you in the extension documentation and source code and link to the original code. But I cannot guarantee a link to your homepage from projects/homepages using the extension. Is that ok for you? Thank you in advance.
Would you like to share your thoughts?
Name:*
Email:*
Website:
Message:*
Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
Hot Posts
1,350,005
23 comments
20,422
0 comments
120,847
0 comments