Restaurant Website and Gallery Template

Today we want to share a little website experiment with you. The theme for today’s template is a restaurant website which will include an image gallery for the menu and an integrated Google map that shows the location. The great food photography is by avlxyz and you can find his Flickr photostream here. The license […]
RestaurantTemplate

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

Today we want to share a little website experiment with you. The theme for today’s template is a restaurant website which will include an image gallery for the menu and an integrated Google map that shows the location.

The great food photography is by avlxyz and you can find his Flickr photostream here.
The license for these pictures is the Attribution-NonCommercial-ShareAlike 2.0 Generic License.

The main homepage photo of Venice at night is by krossbow, be sure to check out his Flickr photostream.

When coming to the homepage, the background image will fade in and we will see the first welcome content block:

When the user clicks on “Our Menu”, a little thumbnails gallery will appear in the content area:

Choosing a dish from the thumbnails gallery, will open the fullscreen gallery, that shows the dish image with a title and a description and the same image as background. Using the navigation arrows on screen, the left/right keyboard arrows, or the scrolling wheel of the mouse, the user can slide the images. The title and description will animate back behind the foreground image during the sliding.

When clicking on the foreground image, it will disappear and the background will become more bright. Now, the user can view the fullscreen image and navigate through them the same way. Clicking on the background will bring us back the foreground gallery element.

When we click on the cross on the top right corner, we will leave the image gallery.

The menu point “Visit us” will hide the content box and show a google map as the background of the whole page:

And that’s it! We really hope you liked this template idea and find it useful!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 170

Comments are closed.
  1. Hi Mary Lou.

    great template because is it possible to add more gallery? how can i add?

    Tanks

  2. Hi Mary, the link for download don’t work… can you resolve please? 🙂 thank you!

  3. Hi Mary,
    but the template don’t work with ipad, iphone etc… how i resolve??

  4. someone can help me? the script don’t work with ipad/iphone/ and other smartphone..

    see ya!

  5. The template is inspiring! Thanks! but is there a way to fix the bug on IE? Also I’m not sure how I can add new galleries.

  6. if your location’s coordinates are south of equator (-ve degrees ) or west of the Greenwich meridian you need to change this on line 61 of jquery.template.js

    latlngStr = address + “LatLng: ” – lat – ” , ” – lng – “”;

    that way it works … kudos Lou

  7. if i want to intergrate a mailing list module which is written in php/ajax/jquery.. how do i go about it coz it seems to conflict with the jquery script thus unable work properly.. anyone with any a idea…? Mary Lou any idea?

  8. Like others, I am wondering how I can put multiple photo galleries in. I would like to have 3 on my site – it’s such a cool feature!

  9. I am trying to use this with Lightbox, but there are conflicts. Has anyone been able to use both together.