From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
do not tell how you can customize the template for multiple locations on the map? Can we make the transition to the link and download maps without clicking on the link?
Hi Mary Lou, congratulations for your great work! You look fantastic! I noticed that adding a contact page when I click to go to other pages on the contact page is fixed and superimposed on the other. What is the solution? Thanks
Hi Mary Lou,
firstly thank you very much for this share,
this is the problem on ie9(step by step);
* click “our menu”
1- next-prev is working with foreground picts. and first change background picts. later nothing change backg picts.
2- click on any pict for view background picts. later nothing change backg picts.
(close button is working anywhere)
thanks for everythings
i forgetten;
when click close button(cross)
sites default background pict. is not change and stay what is last “our menu”s pict.
😉
If i ever meet you Mary Lou ill buy you drinks for a whole week….
Thank you for all your tutorials,
i am trying to keep up with them and read them all 😉 thank you
Hi
I had the same problem with the ‘disappearing’ menus and logo – I changed where I was loading the scripts and it is all good… for me it was a script in the footer.
Great piece of work Mary Lou – thanks so much !!!!
Hi Mike, thanks a lot for letting us know how you solved that problem! Cheers, ML
Hi Mike and Mary,
well it seems not to happen that often when i change the way the script loades, but it still happens when you keep refreshing. Oke, you can question if visitors are refreshing the webpage that often, but i did…
Mike can you be more specific on the changes you made with the order of loading the scripts?
Real thanks for this help!!!
i realy like your site!!! 😉
but I have a question, how it’s possible to scroll the text on the about side, when I put in mor text that can be shown?
Great stuff, I especially like the map. You never leave the site and it’s visually appealing.
I would like to know how I would add more locations.
Again Great work!
Hiya Mary Lou,
switching the positions of scripts does’nt work for me, i still have the problem of the dissapearing menu where ever i put the scripts.Please, any thoughts on how to resolve this? I still intent to use this beauty of a template, help?!
Hi Mary Lou,
Nice work, i like it, now t want creat a big gallery, like gallery1,2,3… whith this template, i have some problems. please how to make it?? thanks
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. How can I solve or do this?
Hi, Mary thanks……. I was a little bit problem with Maps but your above reply solve this
Thanks one second
Hiya Mary Lou,
it seems i finally solved the problem.
It’s not only the @fontface link but also the link to the Jquery library of google which seems to, i don’t know how to phrase it, bug the template.js. Why excactly i don’t know, but that was/is the problem.
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. How can I do this?
Hi
I concur with all the positive comments above, it really is very nice!
Is it possible to show a different background image, depending on what link you click?
eg. Click on “About Us” a different image shows.
Many Thanks!
you guys are awesome,creating trends in plugins
Hi Mary Lou and Backwood
Could you explain what kind of changes you make to fix that bug?
A very big thanks for that great job.
Enjoy your Day
Cool tut, thx alot!
Has anyone successfully added more than one location on the map?
@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
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.
hi, it’s a great work.
Is it possible to add another gallery.
thank’s
no solution for ie8 ?
How can I do to have a different background on each menu ?
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.
Hi. I used this in http://www.criativitta.com.br/judebeat but doest work in IE8.
The background pics doesnt work.
Hi Mary,
Thanks for great share.
any good new for ie8?
*news
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?
Problem IE8/IE9
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
@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
@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 :/
Great Jobs, just one question if i want to add more maps, how can add them?
Thank you
Wonderful template, but still having problem in ie7 and ie8 . even after removing google fonts . Can you please tell me solution for that..
Thanks
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.
hello, I can not put two different galleries – thank you for your help
I really like integration of Google Map here.
This is very cool!
awesome work as usual.Well , i’ve implemented this template to my restaurant.Check this out http://pujaserakuliner.blogspot.com/
Wonderful! Thank you for letting us know! Cheers, ML
Great work… thanks, Manab – India
Great work , very beautifull ! A+++
Hi Mary, how do I link a separate page, by adding another menu item ( say “log-in”)in any sequence?
How to create just Gallery ?
ALL YOUR SCOPE ARE BELONG TO IE 8.0.
To fix this template in IE 8.0 make the following change in the animateBGImage function:
$next_item_bgimage.css({
width : dim.width + ‘px’,
height : dim.height + ‘px’,
left : starting_left,
top : dim.top + ‘px’
});
$bg_image.parent().append($next_item_bgimage);
$next_item_bgimage.stop().animate({
left: dim.left }, animSpeed);
————–
While you don’t have the nice chaining like the original code, you don’t lose the scope of the object in the above code.
Thanks IE for being a cunt yet again.
ALL YOUR SCOPE ARE BELONG TO IE 8.0.
To fix this template in IE 8.0 make the following change in the animateBGImage function:
$next_item_bgimage.css({
width : dim.width + ‘px’,
height : dim.height + ‘px’,
left : starting_left,
top : dim.top + ‘px’
});
$bg_image.parent().append($next_item_bgimage);
$next_item_bgimage.stop().animate({
left: dim.left }, animSpeed);
————–
While you don’t have the nice chaining like the original code, you don’t lose the scope of the object in the above code.
Thanks IE for being a cunt yet again.
The code does not work with IE8, which is inserted?
hello, I can not put two different galleries – thank you for your help, i m tester html5, my english is very bad, but tanks for you help
Congratulations
Could you tell me how to implement a other menu (sub menu) in the content area that opens a second content area that can integrate information text, images, video, …
Thank you
amazing