From our sponsor: Leverage AI for dynamic, custom website builds with ease.
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!
great work
Thanks again for this Great Tutorial! You are making me addicted to your site!
it’s awesome 🙂
This is not only great work, this is awesome! I’m blown away by the contact page. It is so pretty *bling*
Oh my goodness! It’s not only awesome! It’s incredible awesome! 🙂
Wow it’s beautiful! Great work!
Thanks!
Another Awesome Stuff! Thanks a lot!
very nice. I really like integration of Google Map here!
Great!
AWESOME !
It’s so great !
I cannot say just how great this is…
it’s absolutely awesome! codrops number 1!!!!
hi,
it is a great tutorial. after clicking on the cross, the default background image is shown. but when we use wheel of mouse we can navigate through our menu’s images. is it a bug?
Thank you all for your great feedback!
@karakolum thanks for noticing 😉 already fixed!
Cheers, ML
This is so cool. How do I change the Google map location – is it possible?
Hi JPeeze! You can change the location of the map in the jquery.template.js file in line 23, 24 and 25 by setting your latitude and longitude (and the name that will be displayed). On this page you can get the right values given an address: http://itouchmap.com/latlong.html
Don’t forget to minify the JS again because that’s the one we are including (or include the normal one, line 122 in the index.html).
Hope it helps,
cheers,
ML
Excelente trabajo Mary! Como siempre, muchas gracias!
Epic! – Playing around with the Google map, I cannot figure out how to set the cords. Anyone have success changing the location?
Is it possible to add more than one location?
Beautiful
Que pasada!!! madre mia. excelente trabajoooo
perfecto
Thank you for releasing this ‘should-be-a-premium’ template for free. Yeah you’ve made us addicted.
You did all the great stuff. I am addicted of your site. Thanks for sharing amazing stuffs.
Once again fantastic!
I hope you don’t mind if I use this in some projects…
Your jQuery code is truly amazing! (You must be a true jQuery Ninja) I am learning a lot from simply reading it…
wow that’s too good to be giving away
AWESOMENESS IS THE WORD.! Mary are U married? 😀 Just kidding!
U are really doing a great job by creating such tutorials. After going through all this i feel that I’m Level up now. I discovered this website yesterday ! And I went through each and every post of yours. You are a 1 man show, Sorry I meant to say 1 woman show 🙂 !
God Bless You!
I’m really Grateful! ^:)^
Awesome!!!
Like This ^_^
Thanks 4 Share Mary =¤
Wow, very nice! I can see any site that wants to show off a product wanting this, not just restaurants.
Congratulations for your wonderful work. I have one question: If I wanted to add a new menu item. For example: Our Clients and wanted to display the flag of each one of them would have to change something on. js?
Thank you very much! It is so awesome! I try something in vain: I wish I could change the background of the container for each li of the navigation. Could you help me?
Many thanks again!
xxx from Paris
hi, thank you for sharing so much work. I tried the demo site on the iPad, the menu hilights but the page doesn’t change.
Keep up the wonderful work.
Hi….
What I wanted to ask is how you can modify this template Restaurant website. I’m used to modify XML files for Flash sites, but not this kind of templates.
How do you do to change the template Rfestaurante?
I hope to answer.
Thanks
Greetings
Ray
You are by far one of my favorite coders/designers. You inspired me so much.
Thank you very much Mary. This is a really nice and well done template.
I think I would like to change the background image for each page as well.
Can’t even believe this is free 🙂 . Reallly nice theme.
Thanks a lot.
Dear Mary-Lou, I have been testing and learning all the day long with this template and I do really appreciate it !!
Another challenge : I try now something else that I cannot achieve: I put a lot of text in one content (for the Home page) . The bg image of the container remains static but the content is too long and its bottom is cut on my screen (except with F11 that does not work on Safari) and it won’t show any vertical scroll neither. I tried to add a scroll with an overflow on the CSS page, but it did not work neither. Could you give me a clue?
Thank you!
Found ! I changed the position (absolute instead of fixed) and now I am happy !
A vertical scroll appeared and I can read the content text of each page. Good !
Thanks again Mary Lou for the excellent tutorials you provide !
nice work marry , but i cant work jq
just html site ? m i wrong ?
Absolutely Breathtaking! is the only thing i’ve to say, congratulations one more time, high level posts!
really amazing i like it
nice work 😉
Awesome !
I love this template and realy like the photo gallery.
Excellent work ! Keep it up !
this is a truly awesome concept. the jquery animation really compliments the sweet photography on show.
I Love it!
Thank you so much for this template!
Is there a way to make the thumbnails open to its own gallery?
What I can, change background in “Visit Us”?
esta buenisimo.. gracias por compartir
you are such a GENIUS.
Is it possible to change the background on the other sites ( for examble: About us) too?
nice work! would be nice if it works on iphone/ipad too!
This is just awesome!!!
I really love the whole page google map
Wow, very generous for you to code this and give it out to the community. Way to give back.
Really a very good work, my best compliments and regards Mary…
Thanks’ for share all your works.