Home > DeveloperSection > Beginner > Image viewer using bootstrap carousel

Image viewer using bootstrap carousel


ASP.NET MVC CSS-CSS3  Bootstrap  CSS 
Ratings:
0 Comment(s)
 6884  View(s)
Rate this:

Image viewer using bootstrap carousel

Hi everyone in this article I’m explaining about image viewer using bootstrap carousel.

This article shows use of bootstrap to create Image galery in your site or blog. This is very useful if you have large images that will otherwise take up too much space. The bootstrap framework has undoubtedly made the responsive programmers easier and made it possible for non-experts to do fancy stuff themselves. With bootstrap, we can do a lot of really advanced and dynamic things by writing just a few class name. Since its arrival, bootstrap has revolutionized the way we do a great variety of web designing and developing tasks. With bootstrap, we can create advanced photo gallery and slideshow.

As we all know, effects would probably be useful for e-commerce sites, but I don't see any reason why you can't use it for any other sites. The basic idea is to have the image "zoom" forward & show an approximately 25% larger version of the image. So let's get on with it.

Description:

In this post, we have make image gallery with example, Image viewers such as sliders, carousels, galleries, magnify and zoom. Image viewers for sliders, carousels, galleries, magnify (image pops up larger) and zoom (lens moves around image showing a close up of that bit).

When we click on the image a magnifying glass appears alongside the image which automatically scales to show the selected region. In that effect, the grainy, scaled-up image was then replaced with a hi-resolution version of the selected region. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command. Now it's time to see how we will make it.

 

Step 1:  First we have to create a web application

Open visual studio >> File Project>> Select ASP.NET MVC 4 Web Application

Give the application name and click ok

On clicking OK a window like this will pop up on your screen.

 

In that window from Project Templates you have several options like:

1.       Empty 

(Simply a blank view)


2.       Basic 

(Contains a few options and a few folders)


3.       Internet Template 

(Contains all the folders for global use)


4.       Intranet Template 

(Contains all the folders but for a specific scenario)


5.       Mobile Application 

(For mobile app dev)


6.       Web API 

(Extra features of Razor, Routing and others)


7.       Single Page Application 

(For single page app dev)


8.       Facebook Application 

(Facebook app dev)

From those select Empty and then from View Engine select Razor Engine View (it's the default actually).

Download these latest bootstrap file and latest jquery file

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.1.1.min.js"></script>

<script src="~/Scripts/bootstrap/js/bootstrap.min.js"></script>

 

Step 2:  Add Home Controller

Step 3:  Add index view page

Then after we have design for show image gallery

index.cshtml:

 

@{

    ViewBag.Title = "Index";

}

 

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.1.1.min.js"></script>

<script src="~/Scripts/bootstrap/js/bootstrap.min.js"></script>

<script src="~/Scripts/app.js"></script>

<br />

<br />

<br />

<div class="container">

    <div class="panel panel-Primary">

        <div class="panel-heading">

            <h3 class="panel-title">Photos</h3>

        </div>

        <div class="panel-body">

            <div class="row">

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/mindstick-1.jpg" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/mindstick-1.jpg" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/mindstick-1.jpg" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/mindstick-1.jpg" />

                    </a>

                </div>

            </div>

            <div class="row">

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/mindstick-1.jpg" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/mindstick-1.jpg" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/mindstick-1.jpg" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/mindstick-1.jpg" />

                    </a>

                </div>

            </div>

        </div>

    </div>

</div>

 

Output:

 

If you want to show image like image viewer and show next image on click next or previous

Then you add bootstrap model popup and set all image in bootstrap model popup and open modelpoup on click image

index.cshtml:

@{

    ViewBag.Title = "Index";

}

 

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.1.1.min.js"></script>

<script src="~/Scripts/bootstrap/js/bootstrap.min.js"></script>

<script src="~/Scripts/app.js"></script>

<br />

<br />

<br />

<div class="container">

    <div class="panel panel-Primary">

        <div class="panel-heading">

            <h3 class="panel-title">Photos</h3>

        </div>

        <div class="panel-body">

            <div class="row">

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/Camel.jpg" name="1" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail" >

                        <img src="~/Images/Dog.jpeg" name="2" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/Giraffe.jpg" name="3" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/Liger.jpg" name="4" />

                    </a>

                </div>

            </div>

            <div class="row">

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/Polar_Bear.jpg" name="5" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/Saint_Bernard.jpg" name="6" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/Siberian_Tiger.jpg" name="7" />

                    </a>

                </div>

                <div class="col-md-3">

                    <a href="#" class="thumbnail">

                        <img src="~/Images/Zebra.jpg" name="8" />

                    </a>

                </div>

            </div>

        </div>

    </div>

</div>

 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

            </div>

            <div class="modal-body">

                <div id="myCarousel" class="carousel slide">

                    <div class="carousel-inner">

                        <div class="item ">

                            <img src="/Images/Camel.jpg" style="height:400px;" name="1" class="img-responsive">

                        </div>

                        <div class="item">

                            <img src="/Images/Dog.jpeg" style="height:400px;" name="2" class="img-responsive">

                        </div>

                        <div class="item">

                            <img src="/Images/Giraffe.jpg" style="height:400px;" name="3" class="img-responsive">

                        </div>

                        <div class="item">

                            <img src="/Images/Liger.jpg" style="height:400px;" name="4" class="img-responsive">

                        </div>

                        <div class="item">

                            <img src="/Images/Polar_Bear.jpg" style="height:400px;" name="5" class="img-responsive">

                        </div>

                        <div class="item">

                            <img src="/Images/Saint_Bernard.jpg" style="height:400px;" name="6" class="img-responsive">

                        </div>

                        <div class="item">

                            <img src="/Images/Siberian_Tiger.jpg" style="height:400px;" name="7" class="img-responsive">

                        </div>

                        <div class="item">

                            <img src="/Images/Zebra.jpg" style="height:400px;" name="8" class="img-responsive">

                        </div>

                    </div>

                    <!-- Controls -->

                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">

                        <span class="icon-prev"></span>

                    </a>

                    <a class="right carousel-control" href="#myCarousel" data-slide="next">

                        <span class="icon-next"></span>

                    </a>

                </div>

            </div>

        </div>

    </div>

</div>

 

 

App.js:

$(document).ready(function () {

    $('.thumbnail').click(function () {

        var name = $(this).find('img').attr('src');

        var mname = $('.carousel-inner').find("img[src='" + $(this).find('img').attr('src') + "']");

        $('.carousel-inner div').removeClass("active");

        $(mname).parent().addClass("active");

        $('#myModal').modal({

            backdrop: 'static',

        }, 'show');

    });

 

 

    $(function () {

        $("#myCarousel").carousel({

            interval: 5000

        });

    });

});

 

Output: