back

How to embed an images gallery (small)

Examples:

Carousel and Infopane on

Title

DescriptionDescription Description Description Description Description Description Description Description Description

Title

Description

Title

Description

Title

Description

Title

Description


Resizing the images

  1. For the display image

    Independent of the quality or resolution of the photo, all photos should not exceed 300px wide/high. If you are processing the images by yourself, we recommend you to scale down the image proportionally to 300px wide/high.

  2. For the thumbnail image

    Independent of the quality or resolution of the photo, all photos should not exceed 100px wide OR 75px high. If you are processing the images by yourself, we recommend you to scale down the image proportionally to 100px wide if the image is landscape type or 75px high if the image is portrait type.

Installation

  1. For Site Manager 2: Turn on the object smooth-gallery for the page that contains the gallery.

    For Site Manager 1: Copy and paste the following code into the <head> section of the HTML, usually in the template.

    
<link rel="stylesheet" href="http://datasearch2.uts.edu.au/common-assets/smoothgallery/smgallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://datasearch2.uts.edu.au/common-assets/smoothgallery/mootools.v1.11.js" type="text/javascript"></script>
<script src="http://datasearch2.uts.edu.au/common-assets/smoothgallery/smgallery.js" type="text/javascript"></script>

  2. Copy and paste the following code where you want the gallery to be and then modify it as necessary:

    
<script type="text/javascript">
	function startGallery() {
		var myGallery = new gallery($('myGallery'), {
			showArrows: true,
			showCarousel: true,
			showInfopane: true,
			embedLinks: false,
			delay: 8000
		});
	}
	window.addEvent('domready',startGallery);
</script>		
		
		
<div id="myGallery" class="sml">

	<div class="imageElement">
		<h3>Title</h3> 
		<p>Description</p>
		<a href="#" title="open image" class="open"></a>
		<img src="<sm object="site url" server="Folders" />/multimedia/smgallery/demo/01.jpg" class="full" alt="" />
		<img src="<sm object="site url" server="Folders" />/multimedia/smgallery/demo/thumbs/01.jpg" class="thumbnail" alt="" />
	</div>
	
	<div class="imageElement">
		<h3>Title</h3>
		<p>Description</p>
		<a href="#" title="open image" class="open"></a>
		<img src="<sm object="site url" server="Folders" />/multimedia/smgallery/demo/02.jpg" class="full" alt="" />
		<img src="<sm object="site url" server="Folders" />/multimedia/smgallery/demo/thumbs/02.jpg" class="thumbnail" alt=""  />
	</div>
	
</div>

    Each image is represented by:

    
<div class="imageElement">
	<h3>Title</h3> 
	<p>Description</p>
	<a href="#" title="open image" class="open"></a>
	<img src="<sm object="site url" server="Folders" />/multimedia/smgallery/demo/01.jpg" class="full" alt="" />
	<img src="<sm object="site url" server="Folders" />/multimedia/smgallery/demo/thumbs/01.jpg" class="thumbnail" alt="" />
</div>

    You can also customize the gallery by changing these variables:

    Smoothgallery options 
    
<script type="text/javascript">
	function startGallery() {
		var myGallery = new gallery($('myGallery'), {
			showArrows: true, // SHOW/HIDE THE NAVIGATION ARROWS
			showCarousel: true, // SHOW/HIDE THE THUMBNAILS
			showInfopane: true, // SHOW/HIDE THE DESCRIPTION PANEL
			embedLinks: false, // ACTIVATE/DESACTIVE IMAGES LINK
			delay: 8000 // SET THE TRANSITION DELAY IN MS
		});
	}
	window.addEvent('domready',startGallery);
</script>
back