Click here to Skip to main content
13,000,179 members (59,090 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 26 Nov 2012

An enhanced WebMatrix Bakery template

, 27 Nov 2012
Rate this:
Please Sign up or sign in to vote.
How to add a random sliding effect to the Bakery home page


The idea for this simple improvement to the WebMatrix Bakery template came to my mind from a post in the WebMatrix and ASP.NET Web Pages forum.

The question was how to implement a random sliding effect on the main image of the Bakery home page.

I'll try to propose a solution based on jQuery and JSON.

Using the code

The Bakery template lends itself to this improvement because it already foresees that the product for the main image is randomly chosen every time the home page is loaded.

Nevertheless, the home page header is composed not only by the main image, but also by name, price and description of the represented product.

Therefore, if you want to change the main product periodically , you must update the other data that pertain to it.

The proposed solution arises from a simple javascript Random Image Slideshow and expands it with the management of the other product data, that are passed with JSON from the Products database.

Here is the new Default.cshtml page, which you can simply substitute to the original one after creating a new site in WebMatrix 2 from the Bakery template:

    Page.Title = "Home";
    var db = Database.Open("bakery");
    var products = db.Query("SELECT * FROM PRODUCTS").ToList();
    // Serialize the products list
    var json = Json.Encode(products);
<h1>Welcome to Fourth Coffee!</h1>
<!-- The main product section -->
<div id="featuredProduct">
    <img id="myImage" alt="Featured Product" src="#"/>
    <div id="featuredProductInfo">
        <div id="productInfo">
            <h2 id="pname"></h2>
            <p class="price" id="pprice"></p>
            <p class="description" id="pdescr"></p>
        <div id="callToAction">
            <a id="plink" class="order-button" href="" title="">Order Now</a>
<div id="productsWrapper">
    <ul id="products" data-role="listview" data-inset="true">
        @foreach (var p in products) {
            <li class="product">
                <a href="~/order/@p.Id" title="Order @p.Name">
                    <img class="hide-from-desktop" src="~/Images/Products/Thumbnails/@p.ImageName" alt="Image of @p.Name" />
                    <div class="productInfo">
                        <img class="product-image hide-from-mobile" src="~/Images/Products/Thumbnails/@p.ImageName" alt="Image of @p.Name" />
                        <p class="description">@p.Description</p>
                        <p class="price hide-from-desktop">$@string.Format("{0:f}", p.Price)</p>                    

                <!-- Desktop only -->
                <div class="action  hide-from-mobile">
                    <p class="price">$@string.Format("{0:f}", p.Price)</p>
                    <a class="order-button" href="~/order/@p.Id" title="Order @p.Name">Order Now</a>


@section Scripts {
    <script type="text/javascript">

        var delay = 5000; //set delay in milliseconds
        var curindex = 0;

        // Use Html.Raw to pass the JSON-encoded data
        var prods = @Html.Raw(json);

        // Preload graphic files
        var preload = new Array();
        for (n = 0; n < prods.length; n++) {
            preload[n] = new Image();
            preload[n].src = "Images/Products/" + prods[n].ImageName;

        // Randomly select a new product
        function rotateimage() {
            if (curindex == (tempindex = Math.floor(Math.random() * (prods.length)))) {
                curindex = curindex == 0 ? 1 : curindex - 1;
            else {
                curindex = tempindex;

        // Display product's data
        function changeProduct(pIndex) {
            $("#myImage").attr("src", "Images/Products/" + prods[pIndex].ImageName);
            $('#pprice').text("$" + prods[pIndex].Price);
            $("#plink").attr("href", "/order/" + prods[pIndex].Id);
            $("#plink").attr("title", "Order " + prods[pIndex].Name);

        // Load first product and set the sliding effect
        $(document).ready(function () {
            var imgIndex = Math.floor(Math.random() * (prods.length));
            setInterval("rotateimage()", delay);

The page is also available for the download.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Gianmaria Gregori
Chief Technology Officer Federfarma Pavia
Italy Italy
No Biography provided

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170624.1 | Last Updated 27 Nov 2012
Article Copyright 2012 by Gianmaria Gregori
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid