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 […]

By in Playground on
Demo Download

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Dynamic Tooltip Reveal Animations

Trigonometry in CSS and JavaScript: Introduction to Trigonometry

Some More On-Scroll Typography Animations

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

Feedback 170

Comments are closed.

  1. Hi !
    I like very much your work but unfortunately the menu (and also other filters as well) does not work properly in IE8.

    Do you have any idea on how to fix that ?

    Thanks for sharing it!

  2. Thanks for sharing this template. It’s really cool. I only have concern about the slow transition in IE browser and proper positioning of images.

    Can you share us some tips to fix the problem with IE?

    thank you 🙂

  5. Another brilliant jQuery based template. The transitions are brilliant.

    Only problem is that the transitions don’t work well on IE8 which makes this template less usable if cross-browser compatibility is high on the list of client’s priorities.

    Great work, nonetheless. I’m completely hooked to this blog!

  14. Hi Mary Lou.

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

    Tanks

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

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

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

    see ya!

  20. 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.

  21. 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

  22. 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?

  26. 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!

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

  31. This is great work!.

    I’m also trying to find an example with a background slide show and other content in front of it. Any ideas?

  32. Hi thank you for this awesome work.
    How about IE8 and older browsers users? Did any body fined a solution?

  33. Hi Mary Lou! It’s simply a faboulous work! Well done!
    I have a question: what if I try to make the links of the menu to open new pages instead of the only content?
    For my comfort, I need to have separate pages instead of a unique html file…

  34. Hiya,

    this is a brilliant template, really really beautifull, but…

    It has isues with, what i read, IE8 and IE9!
    The menu and logo dissapear partly when you enter the page. When you refresh more menu items return or disappear. When you hover over them with your mouse they also dissapear.
    I want to use the template in a website and started editing it. Weird enough, when i test the website local, on my computer everything works perfectly in IE9!?
    In FF and Chrome it works just fine.

    More weird, i can’t remember this happening when i fell in love with the template first time i saw it, maybe a update for IE 9 that screws things up? But then it should’nt work local also, i think?
    Could you please shine your artistic and creative light on it?

    Much obliged

  35. I’d like to ad this comment to my last: if you have IE9, try the demo and refresh the page a couple of times, you’ll see that the menu and logo keep dissapearing.

    It has to do with id=”bf_page_menu” class=”bf_menu”somewhere in the jquery.template.js must be a glitch, but i can’t fix it because of my noopism with languages other than html and css…
    Mary Lou, could you look in to it?

  36. Hi thank you for this awesome work.

    Some problems with IE8, Please give some way out

  37. wow – the visit us page with integrated google map is stunning!!! great work!

  39. Mary Lou, could you give some feadback please on questions asked before?
    It’s such a pitty that this template does’nt work proparly in IE 8+9

    Help?!

  40. Thanks for this fantastic template, Mary!

    Hope you or somebody here can help: I am trying to add the jScrollPane to the .bf_content_text but just can’t get it to work. Anything special required to implement this?

  42. Hey Mary Lou,

    Can you please help with questions asked before? With the problems in iE8 and 9?

    Hope so!

  43. Backwood, I am trying what you said in IE8/9 and nothing is disappearing here (I’m trying it with the demo). The only thing that comes to my mind with what you described is the loading of the Google web font which might cause some problem. Try removing the two webfonts from the head of the index.html (line 10 and 11) and let me know if it works for you. Hope it helps, ML

  44. Hi Mary Lou,

    Hope you can help : How can I add a “my maps” with msid ?

    Thanks for sharing such amazing work !

    WG

  46. sorry i commented on a different demo (Sliding Background Image Menu with jQuery).

    Anyway lovely tutorial. although a bit of a problem on safari and chrome sometimes. when you open the site on a squareish browser, the background photo appears to be stretched vertically. is there a way around this?

  48. Hey Mary!
    Thanks for your help. I tryed what you said but no, still not works.
    I’ve filmed it:

    http://youtu.be/-R_EtMZ4KKQ

    There you can see me refreshing the page and there goes the logo and top menu items…

    Hope this will help solve this problem.

    • Hey Backwood, that’s really strange, it seems like it just fades out… anybody else here with the same problem?? Thanks, ML

  50. Yep it fades out, also on start! The weird part is that when you test it local on your hardrive, it does’nt happen! I really hope this can be solved because i like this template a lot and want to use it for a photography website for myself.