Tobias
- Image Gallery Design inspired by Google Plus
- http://ed-lea.github.io/jquery-collagePlus/ (Worth a look)
- http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/ (Summary of features that Google Plus used 2 years ago, informative)
- http://jquery-gp-gallery.ionelmc.ro/demo/ (Gallery is not that great, but it uses hover effect, worth looking at that element)
What elements are important to consider from the gallery?
-
Image alignment: All images are displayed in rows and aligned to left and right borders.
-
Even spacing: All Images are evenly spaced (6px spacing, i.e. 3px margin around each image).
-
Sorting: Images are usually sorted by date from latest to oldest. Other orders possible?
-
Cropped thumbnails: To achieve the justified layout some portions of the images are hidden (cropped). Possible to achieve this with javascript / HTML on the client side. Google Plus solves this on the server side with several image resolutions for each image.
-
Big title image: There is a “title” image or (album cover image) which spans two rows. Google Plus did this a while back, would be an option if we wanted to?
-
Comment badges: The number of comments is displayed on each image thumbnail.
-
Dynamic resolution: The size of the images depends on the width of the browser window. G+ uses small images for smaller browser windows and larger images for wider browser windows, i.e. the image resolution adapts to the screen size. This is espacially useful for mobile devices which have lower resultion than desktop browsers.
-
Window resize: The image sizes change and the grid images are re-aligned dynamically when the browser window is resized.
-
Dynamic row height: This is a really subtle feature: Depending on the dimensions of the images in one row (e.g. if a lot of images in portrait format) some rows are rendered bigger in height than others. This helps portrait shots not to become too small.
-
Popup Preview: When you hover over an image an animated popup appears and displays the image in a larger rendition.
-
Infinite scroll: When you scroll to the bottom of the page more images are loaded automatically.
- Demonstration: http://fmaul.de/gallery-grid-example/ (Demonstrates client side cropping and fitting images in a line)
-
Just for a quick comparison, a different approach to display images is masonry, it lists images with a fixed width and a variable height:
-
Shows a approach to album view
Different approach to the image gallery: http://miromannino.com/projects/justified-gallery/
-
Enable Back Button in JQuery, looks to be difficult hence my page design with 2 different types of divs ** http://www.jquery4u.com/plugins/history-back-button-plugins/
-
Change Layout to use more whitespace
-
Display a active div on the right side by expanding it, marking it and show a arrow on the side
-
animations with jQuery: http://www.w3schools.com/jquery/jquery_slide.asp (and many more examples from this page)
-
responsive design with bootstrap. look at examples at the bottom of the following link and resize the browser window: http://getbootstrap.com/getting-started/
-
make the news stream client to things:
- responsive design in its size
- animate creation of new content
- define a clear API for the build javascript methods
- Getting familiar with the bootstrap grid system for responsive page design
- Experimenting with animations, one big div on left side of screen and multiple divs on right side, when you click on one of the right ones it gets maximized to the left side and vice versa.
- Working on making a template for the now finished newsstream, so that a user that wants to use it just has to implement one little javascript and has a complete newswidget at his disposal
- Finished Codeacademy course on Javascript to get more familiar with Javascript syntax
- Tried to understand the OpenLayers API, and got a small view of a working map
- Completed a small widget to display the autocompletion from our own server using JSON input
- Trying to get a newsfeed widget to work, still in the process of understanding AJAX request handling and the data stream
- Adding a button that sends an AJAX request to get a new server update
- Possible Solutions:
- When user clicks button, we have a loading icon and when server sends its ok that he received data then we render the data he is sending to the server directly in our newsfeed box
- Possible Solutions:
- Getting familiar with bootstrap
Tutorials: