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 monthly sponsor: Take WordPress to a whole new level with Divi's incredibly advanced visual builder technology. 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:

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

Receive our bi-weekly Collective or official newsletter right in your inbox.

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. @Josh @Kazaf

    I made a way to add more than one location on the map, maybe not the best but is working.

    on the javascript file at BGMap = …
    right after closing this function, you should add:

    function NewLocation() {
    address = ‘Something you want’
    lat = customlat
    lng = customlng
    }

    And your link on your .html file should look like:

    Link

    Try it

  2. Thanx for sharing a great template. This is by far the best. A google map with this design is by far the best design tip ever.
    I’ve seen sites that rely only on google maps in background like:
    http://www.conflicthistory.com/
    It’s great. Keep up the good work.
    Thinking of working on a google map template?This would be great with all the great stuff u do…You are an ispiration for me definately.

  3. Amazing template, cant stress this enough.

    I was trying to add a 2nd MENU list, say one is the MENU for food the other DESERTS and the other DRINKS, so I copied and pasted the HTML code in INDEX to make a 2nd list, but this second list cannot does not load images like MENU does.

    How can I do this? thank you.

  4. Simply superb template!!
    But in Google Chrome 13.0, when the main background picture loads,its size is not zoomed…after restoring-down and maximizing back the browser,it zooms.
    How can i fix this?

  5. Hi Mary..
    i am having problems changing the location on the Map, it wont change at all

    can you please tell me the steps?

    34 Eastgate , Aberystwyth … is the location i need to display!

    thanks and hope to hear from you!

    • Hi Moe,

      if you want to change the location in the google maps, go to the jquery.template.min and replace lat = 52.414933 and lng=-4.086038. The jquery.template.min is the same as jquery.template.js but without the spaces and the line brakes, in a more compact form that occupies less space. So if you want to understand a little bit better the content check the jquery.template but the changes should be made in the jquery.template.min in order to take place!
      I hope I helped you and that it will work for you!
      Cheers/
      Penny

  6. @Mary Lou: Your work is really great! Congrats! I have a question, is there a way i can something to jscript in order to change the satellite view of the map to the normal one?

    Thank you

  7. @Mary Lou: a second question 🙂 How i can make the font size bigger in the welcome content block? i opened style.css and i put font-size:15pt; but without success :/

  8. Wonderful template, but still having problem in ie7 and ie8 . even after removing google fonts . Can you please tell me solution for that..

    Thanks

  9. This is amazing work. Thanks a lot.
    I am facing a little issue with IE-7 and IE-8. In the our menu page the front image and bg image changes for the first time. But after that the bg image doesn’t change at all. Is this a big with this template. I need to use the template in my website. Will you let me know about the issue. Thanks again for the wonderful work.