HTML Image
1.
Image
1.1 Image-shape
1.
img-rounded
2.
img-circle
3.
img-thumbnail
1.2 Image-position
1.
pull-left
2.
pull-right
3.
center-block
Ex-
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
</head>
<body style="background-color: #ff0066;">
<div class="container">
<h1>Image</h1>
<img src="img\1.jpg" src="img-responsive img-thumbnail pull-right" style="width: 250px; height: 250px;" />
</div>
</body>
</html>
2. Image Gallery
Ex-
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
</head>
<body style="background-color: #ff0066;">
<div class="container">
<div class="row" ><br>
<div class="col-md-12" >
<center><font color="black" face="Times New Roman" ><h1><u>Image Gallary </u></h1></font></center><br><br>
</div>
</div>
<div class="row" style="border: 1px solid grey;"><br>
<div class="col-sm-4" >
<a class="popup" href="img\1.jpg"><img src="img\1.jpg" src="img-responsive img-thumbnail" style="width: 350px; height: 200px" /></a>
</div>
<div class="col-sm-4">
<a class="popup" href="img\2.jpg"><img src="img\2.jpg" src="img-responsive img-thumbnail" style="width: 350px; height: 200px"/></a>
<h2></h2>
</div>
<div class="col-sm-4">
<a class="popup" href="img\3.jpg"><img src="img\3.jpg" src="img-responsive img-thumbnail" style="width: 350px; height: 200px"/> </a>
<h2></h2>
</div>
<div class="col-sm-4">
<a class="popup" href="img\4.jpg"><img src="img\4.jpg" src="img-responsive img-thumbnail" style="width: 350px; height: 200px"/> </a>
<h2></h2>
</div>
<div class="col-sm-4">
<a class="popup" href="img\5.jpg"><img src="img\5.jpg" src="img-responsive img-thumbnail" style="width: 350px; height: 200px"/> </a>
<h2></h2>
</div>
<div class="col-sm-4">
<a class="popup" href="img\6.jpg"><img src="img\6.jpg" src="img-responsive img-thumbnail" style="width: 350px; height: 200px"/> </a>
<h2></h2>
</div>
</div>
</div>
<div class="modal" id="mymodal" role="dialog" style="margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<img src="" class="img-responsive" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$('.popup').click(function(event)
{
event.preventDefault();
$('.modal img').attr('src',$(this).attr('href'));
$('#mymodal').modal('show');
});
});
</script>
</body>
</html>
3.
Image
Slider/Carousel
-
Class “carousel” for image slider
-
Class “carousel-inner” keep info
each slide
-
Class “item” individual info in this
class
-
Class “carousel-caption” for image
caption
-
“data-ride” attributes àdata-interval=”2000” , data-pause=”boolean value”
Ex-
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
</head>
<body style="background-color: #ff0066;">
<div class="container">
<center><font color="#99003d" face="Algerian" ><h1>-:Carousel Example:-</h1></font></center><br><br>
<div class="carousel slide" data-ride="carousel" data-interval="2000" id="mycar">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycar" data-slide-to="0"></li>
<li data-target="#mycar" data-slide-to="1"></li>
<li data-target="#mycar" data-slide-to="2"></li>
<li data-target="#mycar" data-slide-to="3"></li>
</ol>
<div class="item active">
<img src="img\3.jpg" style="width: 100%; height: 400px">
</div>
<div class="item">
<img src="img\4.jpg" style="width: 100%; height: 400px">
<div class="carousel-caption">
<h1>Rangoli</h1>
</div>
</div>
<div class="item">
<img src="img\5.jpg" style="width: 100%; height: 400px">
<div class="carousel-caption">
<h1>Nature</h1>
</div>
</div>
<div class="item">
<img src="img\6.jpg" style="width: 100%; height: 400px">
<div class="carousel-caption">
<h1>Flower</h1>
</div>
</div>
</div>
<a href="#mycar" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#mycar" class="right carousel-control" data-slide="next">
<span cla ss="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
Result-
0 Comments