The Gallery is oriented in its functionality towards Apple's iTunes Music Library. But it doesn't only serve as illustration of image material, it also shows further informations. Therefore this work cannot only being used as image gallery, but also as a type of project gallery like in this case with a slideshow, informations about the project and an optional link.

Overall the HTML file consists of 2 sections. The first section is a container with the respective thumbnail pictures of the single projects. Another, not visible container consists of diverse canvas elements for jQuery-painted pictographs (close, next picture, previous picture and a canvas element as mark for the currently opened project) and a p-element as output for the current picture number of the slideshow. The container with the different numeric values is just there for demonstration.

The gallery has a responsive webdesign, for what reason the number of columns first has to be determined with a function at a click. This happens easily by doing sum the width of the first picture and its margins, left and right, and multiply this with a growing number so long as the result is bigger than the width of the browser window.
result = x * (width 1st picture + margins (left & right) 1st picture) //x = 0, 1, 2, 3, ...
Comparison between width of the browser window with the result → number of columns In this way the maximum number of columns can be calculated at every browser width.

Furthermore a container is generated employing jQuery. With the index of the clicked element and the number of columns you can now find the right insertion point of this container at the end of a specific row.
Should you be in front of a computer und change the size of the window independently, there has to be reacted on the changing number of columns while opened details. For this purpose the index of the clicked Element and the continously retrieved number of columns is needed once again. Also needed are the insertion point at the time of the click and the new insertion point at the current number of columns. The difference between old and new insertion point states the number of shifting elements, which jump in fornt of the opened details container or behind. In the course of this the pictures are cached in a variable, deleted and inserted at the new position – the order of the DOM is manipulated.

After loading the informations about the project with the aid of AJAX and the corresponding jQuery function load(), the previously compiled canvas elements and the p-element are removed from the invisible container and inserted in "projectDetails" for navigating through the said slideshow or else to close the container again. After that the container "projectDetails" opens.
Closing happens by the "x" or the surrounding greyish surface. Is one of both elements clicked, the function slideToggle() is called again, the container will be closed, the navigation elements are replaced in the invisible container and "projectDetails" completely deleted.

The slideshow doesn't need to be used by the navigation arrows. Therefor I have implemented easy swipe gestures. So a verticle swipe up or down can be used. In this example the gestures were mirrored to the mouse, to try it on the home, non-touchable monitor.

With the help of CSS3 and the Media Queries it is reacted to the changing browser width, elements are shifted or scaled in size. Inside the stylesheet it is distinguished between 4 sections.
@media screen and (min-width: 320px) and (max-width: 479px) → Smartphones - vertical / Monitor
@media screen and (min-width: 480px) and (max-width: 767px) → Smartphones - horizontal / Monitor
@media screen and (min-width: 768px) and (max-width: 1023px) → Tablets - vertical / Monitor
@media screen and (min-width: 1024px) → Tablets - horizontal / Monitor To apply the settings to mobile devices, a meta declaration has to be made regarding the viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=10.0"> With width=device-width you can ensure that content and indicating range match. On narrow layouts there is no loss of redundant space, but the website will be displayed in the possible maximum size. With the scale data you can specify the zoom factor. If you want to prevent the zoom, you can either set maximum-scale to 1.0 or user-scalable to no as replacement for maximum-scale.

  Try out the demonstration