In this blog post, we will explain how to display multiple images as a gallery & slider using jQuery.galleryview.js, in a way that even beginners can easily understand. We will go through the steps one by one, so you can follow along with the code.
Required Preparations
First, let’s download the necessary files. You will need the following files:
- jQuery library
- jQuery UI library
- jquery.timers.js
- jquery.easing.js
- jquery.galleryview.js
- jquery.galleryview.css
You can get these files from the official website or a CDN. Here are the CDN links, so you can load the files using them.
CSS Settings
Next, we will set up the CSS. CSS is necessary to style the gallery. Load the jquery.galleryview-3.0-dev.css file.
Add the following code:
<link type="text/css" rel="stylesheet" href="css/jquery.galleryview-3.0-dev.css" />
<style type="text/css" media="all">
<!--
body{
margin:0;
padding:0;
}
h1{
text-align:center;
font-size:18px;
font-weight:bold;
padding:10px 0;
line-height:1.4em;
text-align:center;
}
.clWrap{
width:800px;
margin:0 auto;
}
-->
</style>
JavaScript Settings
Next, we will set up the JavaScript. Load the necessary files and write the script to initialize the gallery.
Load the jquery.min.js, jquery-ui.min.js, jquery.timers-1.2.js, jquery.easing.1.3.js, and jquery.galleryview-3.0-dev.js files.
Use $(‘gallery & slider area’).galleryView() to set the area you want to display as a gallery & slider.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-3.0-dev.js"></script>
<script type="text/javascript">
$(function(){
$('#myGallery').galleryView();
});
</script>
HTML Description
Finally, we will place the gallery images within the HTML. Prepare 5 jpg images in the gallery & slider area (id=”myGallery”). Refer to the following code:
<div class="clWrap">
<h1>Displaying multiple images as a gallery & slider.</h1>
<div align="center">
<ul id="myGallery">
<li><img src="i1.jpg" alt="First image" /></li>
<li><img src="i2.jpg" alt="Second image" /></li>
<li><img src="i3.jpg" alt="Third image" /></li>
<li><img src="i4.jpg" alt="Fourth image" /></li>
<li><img src="i5.jpg" alt="Fifth image" /></li>
</ul>
</div>
</div><!--/clWrap-->
jquery.galleryview: Demo Page to Display Multiple Images as a Gallery & Slider
After completing these steps, you will have a demo page like the one below. Now you understand how to use jQuery.galleryview.js to display multiple images as a gallery & slider.
jquery.galleryview: Demo Page to Display Multiple Images as a Gallery & Slider
Summary
In this article, we introduced how to display multiple images as a gallery & slider using jQuery.galleryview.js. We explained the steps so that even beginners can easily implement it. Please try to use it in your projects.
* Please use this information at your own risk.
Do not reuse the Google Analytics tag in the demo page tag.
