How to embed an images gallery (big)

Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Description

Title

Description

Title

Description

Title

Description

Resizing the images

For the display image
Independent of the quality or resolution of the photo, all photos should not exceed 550px wide OR 435px high. If you are processing the images by yourself, we recommend you to scale down the image proportionally to 550px wide if the image is landscape type or 435px high if the image is portrait type.
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

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>

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">

	<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:


<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