My next step was to check on Nivo slider, which I had used seamlessly in the past. Reviewing the documentation again plus gathering some tips on how to apply Nivo on bootstrap, I was able to come up with this page:
The screenshot on my laptop is shown below:
To see how Nivo would respond to mobile devices, I've checked on my smart phone:
Impressive enough for me.
The resources below allowed me to apply Nivo on Bootstrap:
- http://dev7studios.com/plugins/nivo-slider/
- http://docs.dev7studios.com/jquery-plugins/nivo-slider
- http://stackoverflow.com/questions/11128455/nivoslider-and-twitter-bootstrap
The first link provides a download to the slider plug-in. From the downloaded files, I copied into my slider sample page.
The first set of files I copied was from the default theme css into my sample page's css:
The next set of files was from the JavaScript that came from the download:
Lastly, I've prepared images from photos my wife took :-)
With the files in place, I proceeded to work on the codes.
On the <head> tag, I've linked to the Nivo css files I copied:
<!--nivo stylesheets--> <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" /> <link rel="stylesheet" href="css/default.css" type="text/css" />
Next, I applied the Nivo tags within Bootstrap tags:
Lastly, I've linked to Nivo JQuery and entered JQuery codes:
The code in its entirety is as follows:
Need help on some web coding task? Let me know about it. Email me at jun.dolor@gmail.com and I'll be more than happy to blog about it with my thoughts.
Hosting of the sample pages were provided for by the following:
<!--nivo slider-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/02.png" alt="" />
<a href="http://dev7studios.com"><img src="images/03.png" alt="" title="#htmlcaption" /></a><!---->
<img src="images/04.png" alt="" title="This is an example of a caption" />
<img src="images/05.png" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
</div>
</div>
Lastly, I've linked to Nivo JQuery and entered JQuery codes:
<!--Nivo JQuery scripts-->
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
The code in its entirety is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Nivo with Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--nivo stylesheets-->
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="css/default.css" type="text/css" />
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Nivo</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://getbootstrap.com/examples/carousel/#">Home</a></li>
<li><a href="http://getbootstrap.com/examples/carousel/#about">About</a></li>
<li><a href="http://getbootstrap.com/examples/carousel/#contact">Contact</a></li>
<li class="dropdown">
<a href="http://getbootstrap.com/examples/carousel/#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="http://getbootstrap.com/examples/carousel/#">Action</a></li>
<li><a href="http://getbootstrap.com/examples/carousel/#">Another action</a></li>
<li><a href="http://getbootstrap.com/examples/carousel/#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="http://getbootstrap.com/examples/carousel/#">Separated link</a></li>
<li><a href="http://getbootstrap.com/examples/carousel/#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--nivo slider-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/02.png" alt="" />
<a href="http://dev7studios.com"><img src="images/03.png" alt="" title="#htmlcaption" /></a><!---->
<img src="images/04.png" alt="" title="This is an example of a caption" />
<img src="images/05.png" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script
<!--Nivo JQuery scripts-->
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body?
</html>
Need help on some web coding task? Let me know about it. Email me at jun.dolor@gmail.com and I'll be more than happy to blog about it with my thoughts.
Hosting of the sample pages were provided for by the following:
No comments:
Post a Comment