Recently, I made a mobile image page. The mother page is a series of preview thumbnails. After clicking a small image, I need to display a large image on the full screen, and I can slide left and right to browse other large images. I found a fotorama component on the Internet. Feel good to use, record the use of experience;
First download the fotorama package from http://www.fotorama.io/set-up/, import CSS and JS on the page. In addition, fotorama depends on the jquery framework, and jquery needs to be introduced.
Introducing css in the head:
<link href="js/fotorama.css" type="text/css" rel="stylesheet">Introducing js in the body:
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/fotorama.js"></script>Put the page into the preview thumbnail:
<div class="box">
<div class="pic"><img src="images/1_s.jpg" /></div>
<div class="pic"><img src="images/2_s.jpg" /></div>
<div class="pic"><img src="images/3_s.jpg" /></div>
<div class="pic"><img src="images/4_s.jpg" /></div>
<div class="pic"><img src="images/5_s.jpg" /></div>
<div class="pic"><img src="images/6_s.jpg" /></div>
</div>
<div class="fotorama" data-max-width="100%"></div>Where is used by the component to display a large image;