Image Navigation using simple cool navigator in MVC3 Razor

Home » Image Navigator » JQuery » MVC 3 » Image Navigation using simple cool navigator in MVC3 Razor

Image Navigation using simple cool navigator in MVC3 Razor

Posted by 20Fingers2Brains on Tags: Image Navigator , JQuery , MVC 3

In this article we will see how to create a simple Image Navigator using jQuery, CSS and MVC3 Razor.
We often see great image navigators on many site. We have used 3 images and used simple jQuery to make it cool navigator.
We have also used CSS3 efficiently to make it look better.

Approach:

We have 3 images on the page. We have used CSS to set their display to none. We have used jQuery ready function to show one out of three images. We have created a three circles out of span element using CSS3. Each circle is linked to the image. On click of the circle shape span, the linked image is rendered.

DEMO

View:

    @{
    ViewBag.Title = "ImageNavigatorFancy";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
.size
{
    width:1100px;
    margin-left:100px;
    height:600px;
    position:absolute;
    display:none;
}
.spanDiv
{
    position:absolute;
    margin-top:610px;
    margin-left:650px;
}
.spanClass
{
    background-color:Orange;
    height:12px;
    width:12px;
    display:block;
    position:absolute;
    cursor:pointer;
    border-radius:5px;
}

</style>
<div>
<img class="size" src="../../Content/Images/arsenal.jpg" alt="arsenal" id="arsenalImage" />
<img class="size" src="../../Content/Images/henry.jpg" alt="henry" id="henryImage" />
<img class="size" src="../../Content/Images/thierry.jpeg" alt="thierry" id="thierryImage" />
</div>
<div class="spanDiv">
<span class="spanClass" id="image1"></span>
<span class="spanClass" id="image2" style="margin-left:20px;"></span>
<span class="spanClass" id="image3" style="margin-left:40px;"></span>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        debugger;
        $("#arsenalImage").show();
        $("#image1").css("background-color", "black");
        $(".spanClass").click(function () {
            var clickedSpanId = $(this).attr("id");
            if (clickedSpanId == "image1") {
                $("#arsenalImage").fadeIn("slow");
                $("#henryImage").fadeOut("slow");
                $("#thierryImage").fadeOut("slow");

                $("#image1").css("background-color", "black");
                $("#image2").css("background-color", "orange");
                $("#image3").css("background-color", "orange");
            }
            else if (clickedSpanId == "image2") {
                $("#henryImage").fadeIn("slow");
                $("#arsenalImage").fadeOut("slow");
                $("#thierryImage").fadeOut("slow");
                $("#image2").css("background-color", "black");
                $("#image1").css("background-color", "orange");
                $("#image3").css("background-color", "orange");
            }
            else if (clickedSpanId == "image3") {
                $("#thierryImage").fadeIn("slow");
                $("#arsenalImage").fadeOut("slow");
                $("#henryImage").fadeOut("slow");
                $("#image3").css("background-color", "black");
                $("#image1").css("background-color", "orange");
                $("#image2").css("background-color", "orange");
            }
        });
    });
</script>

In the above view we have three images with their display attribute set to none using CSS. On ready function we show first image. We have created three span element and gave then circular shape using CSS3. These circular spans are our navigators. On click of these spans the images are toggled.

Snapshots: