The following quick start is aimed at getting you quickly up and running with the wijgallery widget. In the quick start you'll create a Web page, add the wijgallery widget, and customize the appearance and behavior of the widget. Complete the following steps:
- To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup to paste in Notepad
| Paste in Notepad. |
Copy Code
|
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
|
- Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.
Drop down and copy references to paste inside the head tags
| References |
Copy Code
|
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.15.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.js" type="text/javascript"></script> |
This adds jQuery and Wijmo references as well as theme and CSS links.
-
Place the following markup within the <body> tags.
Drop down and copy markup to paste inside the body tags
| Paste inside the body tags. |
Copy Code
|
<div id="gallery1" class="">
<ul class="">
<li class=""><a href="http://lorempixum.com/750/300/sports/1">
<img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word Caption 1" />
</a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/2">
<img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word Caption 2" />
</a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/3">
<img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word Caption 3" />
</a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/4">
<img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word Caption 4" />
</a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/5">
<img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word Caption 5" />
</a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/6">
<img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word Caption 6" />
</a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/7">
<img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word Caption 7" />
</a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/8">
<img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word Caption 8" />
</a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/9">
<img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word Caption 9" />
</a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/10">
<img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word Caption 10" />
</a></li>
</ul>
</div>
|
The <div> HTML element is what creates the widget. The <div> element's id option is set to 'gallery1', which we call in jQuery to initialize the widget.
-
Within the <head> tags, below the references, add the following markup to set the size of the gallery widget.
Drop down and copy markup to paste inside the head tags
| Paste inside the head tags. |
Copy Code
|
<style type="text/css">
#gallery1
{
width: 750px;
}
</style>
|
This markup sets the width of the widget.
-
Within the <head> tags, below the style markup, add the following script to initialize the jQuery widget.
Drop down and copy markup to paste inside the head tags
| Paste inside the head tags. |
Copy Code
|
<script type="text/javascript">
$(document).ready(function () {
$("#gallery1").wijgallery({
showControlsOnHover: false,
thumbsDisplay: 4,
thumbsLength: 150
});
});
</script>
|
The script sets the size and number of thumbnail images.
- Save and close your HTML file and open it in a browser. The wijgallery widget appears like the following:
See Also
Reference
Show All
Hide All