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.
This is the basic html structure:
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.
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.
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.
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.