Mobile web big picture browsing jquery component

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, 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 class="fotorama" data-max-width="100%"></div>

Where is used by the component to display a large image;

Leave a Comment

Your email address will not be published.