|Sliding Panel Photo Wall Gallery with jQuery|
joomla template, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, jQuery, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart
we will create a stunning full page photo wall gallery. 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!
The HTML structure consists of three main containers: one for the info bar at the bottom of the page, one for the thumbnails and one panel container for the full image:
The info bar container has a span for the image description and one for the loading display. The thumbnail wrapper contains a content container for all the small images. The very last element after the thumbnails is a placeholder. We need to add some space to the end because we don’t want the thumbnails to get covered by the info bar. Since we don’t want to use any paddings or margins in our containers, we simply add another filler element.
Now, let’s take a look at the style.
First, we will define some general style for the page:
The body needs to get the property overflow hidden, because we will set the scroll bar for the thumbs view only. If we would add scrolling to the page, the scroll bar would appear when the full image panel slides up. We avoid that by saying that the overflow will be hidden for the body.
The info bar will have a fixed position. We always want it to be visible and at the same place in the page:
We add some border radius for rounded borders. We set the z-index crazily high since we want the element to be always on top. of course you could just use a value like 15 or 50. Just be careful with the other elements that will get a new z-index dynamically in the JS. The highest one of them is 10.
The description and the loading item will have the following style:
The loading item will have a loading image as background.
The thumbs wrapper will have a panel like style. We set it fixed, occupying the whole screen. Important for the effect is the bottom:0px since we will want the wrapper to come up from the bottom by animating its height. Again, we set the overflow to hidden, since we just want the content container to have a scroll bar.
The content wrapper will also occupy all the page. The vertical scroll bar we set explicitly by saying overflow-y:scroll (auto would be the default value). Initially, we want this container to be invisible because we don’t want to show the scroll bar while there is nothing on the page during the initial loading time.
The images in the content container will float left and have an opacity of 0.4. The hover function will then increase opacity, giving the whole thing a spotlight effect.
The placeholder will make sure that our thumbs don’t get covered by the info bar when we are at the bottom of the page:
The panel will have the following style similar to the style of the thumbs wrapper:
We set it to display:none since we will make it appear by fading it in. This will create a nice effect.
The image wrapper be centered horizontally. This we achieve by setting the left and right margins to auto.
The navigation items will have the following style:
We give the navigation items a fixed position. To center an absolute or fixed element horizontally (or vertically) you can give it a top (or left) value of 50% and then a negative top (or left) margin of half of its height (or width). Since the navigation item is 40px high, our top margin is is -20px.
OK, don’t scare, it’s a bit lengthy… but don’t worry, most of it is comments and code indention :)
Our main functions fire when we click on a thumb or click on a full image.
When clicking on a thumbnail (line 34) we first show our loading item in the info bar. Then we say to load the respective image (line 40) with the source being the alt attribute of the thumb we clicked (line 92). Everything that is inside of the load function will just be executed after the image is loaded (line 41 to 93). So, we hide the loading item from the info bar, resize the image to fit into the viewport and append the image element to the wrapper. Then we fade it in (line 54) and slide up the panel where we will see the full image and the fading in effect still executing (57 – 91). We also show the description and the navigation items, and finally we make the thumbs wrapper disappear by setting the height to 0 (line 90). We do that because we want it sliding back from the bottom when we click on the full image.
For the click event on the full image (line 101 to 119) we need to use “live” since the img element is not there in the beginning but it is created dynamically. We animate the thumbs wrapper and set the panel to zero height.
The functions for browsing through the full images check which thumb image is the previous or next one and according to that we set the next or previous full image (line 128 to 137). For that we use the navigate function (line 143 to 191).
From line 18 to 26 we say that we want the full size picture to be resized whenever we resize the window. The resize function is defined from line 197 until 237. We also resize the wrapper around the image.
For further details, check the comments in the code, they describe what is done in the moment.
And that’s it! I hope you enjoyed
- jquery vticker (vertical news ticker)
- ShineTime – A New jQuery & CSS3 Gallery With Animated Shine Effects
- Animated InnerFade with JQuery
- Image gallery with fancy transitions effects(jQuery)
- Coin Slider: Image Slider with Unique Effects(jQuery)
- An elegant, lightweight slideshow script(mootools)
- Panning slideshow with jquery
- A Tab-style scrolling slideshow(Scroller) with jQuery
- Featured Content Slider Using jQuery
Recommended Web Hosting For Bloggers and Designers
I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.
- Fast, Reliable, Affordable
- 100% Satisfaction Guarantee
- And More...