In this article, I will show how to create a bootstrap modal image gallery for a blog using bootstrap jQuery plugins. You can create advanced image gallery using bootsrap with slideshow. i.e bootstrap image modal slideshow.It is useful for e-Commerce websites.
Description: This bootstrap image gallery is responsive design, it is suitable for mobile, tablets and PC screens.When the user clicks on the bootstrap photo grid, the image which scales automatically and show in a modal popup with 25 % larger version of the image.
Step 1: Create a asp.net mvc application and right click on the "Controllers" folder and add "Home" controller. Copy and paste the following code.
public ActionResult Index()
{
return View();
}
Step 2: Right click on the HomeControllers and create an index view. Copy and paste the following code.
@{
ViewBag.Title = "Index";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="panelpanel-Primary">
<div class="panel-heading">
<h1 style="color: #0480d1">Csshighlight color </h1>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3col-sm-6">
<a href="#" class="thumbnail">
<img src="~/images/1.jpg" name ="1"/>
</a>
</div>
<div class="col-md-3col-sm-6">
<a href="#" class="thumbnail">
<img src="~/images/2.jpg" name ="2" />
</a>
</div>
<div class="col-md-3col-sm-6">
<a href="#" class="thumbnail">
<img src="~/images/3.jpg" name ="3" />
</a>
</div>
<div class="col-md-3col-sm-6">
<a href="#" class="thumbnail">
<img src="~/images/4.jpeg" name ="4"/>
</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">×</span></button>
</div>
<div class="modal-body">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active item-active">
<img src="~/images/1.jpg" style="height:400px;width: 566px;" name="1" class="img-responsive">
</div>
<div class="item">
<img src="/Images/2.jpg" style="height:400px;width: 566px;" name="2" class="img-responsive">
</div>
<div class="item">
<img src="/Images/3.jpg" style="height:400px;width: 566px;" name="3" class="img-responsive">
</div>
<div class="item">
<img src="/Images/4.jpeg" style="height:400px;width: 566px;" name="4" 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>
<script type="text/javascript">
$(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-innerdiv').removeClass("active");
$(mname).parent().addClass("active");
$('#myModal').modal({
backdrop: 'static',
}, 'show');
});
$(function () {
$("#myCarousel").carousel({
interval: 5000
});
});
});
</script>
Output:
Post your comments / questions
Recent Article
- How to hide the ID field from the Django admin?
- It is impossible to add a non nullable field without specifying a default. Django error
- ImportError: cannot import name 'url' from 'django.conf.urls' - Django Error
- How to Enable Virtualization in BIOS Security Settings in Intel Processors For Android Studio?
- Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that depend on it.
- AttributeError: 'NoneType' object has no attribute 'get_text' - Python
- ModuleNotFoundError: No module named 'openpyxl' - Python
- How to get thumbnail from vimeo video URL in Python?
Related Article