Image Gallery Effects
In our last adventure through image gallery creation, I retrospected on several incremental improvements to the gallery.
In this article, I am going to focus on demonstrating a few methods I used, with little demos to show each.
Click here to see the final image gallery.
Fade in and Fade out
To make an element fade in and out of view,
manipulate opacity with a transition like this:
Use javascript to add and remove the ‘hide’ class.
Potentially, you will have problems when the object is hidden.
Even though it is invisible, it will block clicks on objects underneath it.
To prevent this, use a property called pointer-events:
If you are placing the element on top of other elements in the page, then just place it after those elements. Do not use z-index, or it will be more difficult to maintain.
Shadow and Lightbox
The gallery features lightboxes that pop up when an image is clicked and the rest of the page dims. How do you dim the rest of the page?
Set an element between the part of the page you want to dim, and the new content you are going to show (no z-index).
This element is then styled with a background of black and an opacity below 1 to show what’s behind but also dim it.
Another feature of lightboxes is that you can close them by clicking anywhere outside the box. We can set a click listener on the cover element to do so. But you have to be sure the cover is clicked and NOT the lightbox, so the event.currentTarget (the element of the event listener) must equal the event.target (the most specific element clicked):
That’s it for today. Next up: Carousel effects and swipe gestures.
