Blue Arena » images http://www.bluearena.com Just another WordPress weblog Sat, 05 Jun 2010 17:23:12 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Gallery Carousel v1.1 http://www.bluearena.com/2009/06/gallery-carousel-v1-1/ http://www.bluearena.com/2009/06/gallery-carousel-v1-1/#comments Sat, 06 Jun 2009 14:18:12 +0000 Maloric http://wordpress.bluearena.com/?p=126 Gallery Carousel is a JQuery Plugin which creates a sliding gallery of image thumbnails that can be clicked to view a full size image.  The full size image can also have a caption and/or hyperlink.  The plugin is configurable and easy to set up, requiring little markup.
Download packed code for Gallery Carousel v1.1

(requires JQuery v1.3.2)

New in v1.1

  • You can now add captions for each image
  • You can now add a link for each image to navigate to

Instructions

To create a new gallery, you need to first include the script in your page, after you have included the JQuery script.

<script src="includes/galleryCarousel-1.1.min.js" type="text/javascript"></script>

Then some simple styles to make it look nice:

<style type="text/css">
	img {border:0;}
	ul.gallery li {padding:0 5px;}
	ul.gallery li img {height:61px;} /* If you don't specify a thumnail image you should set the height of the scaled down image instead */
	ul.gallery li img.selected {border:2px solid #000;}
</style>

You’ll need some basic markup: an empty image, a next link, a previous link and a div to put our carousel into.  If you want to put captions somewhere for each image, you will also need a div or span for this:

<img id="featuredImg" />
<span id="caption"></span>
<table>
	<tr>
		<td>
			<a id="prev" href="#">Prev</a>
		</td>
		<td>
			<div id="galleryWrap"></div>
		</td>
		<td>
			<a href="#" id="next">Next</a>
		</td>
	</tr>
</table>

If you prefer to specify your images in the html rather than the javascript, you can also populate your target div with a ul like the following:

<ul class="myGalleryClass">
	<li><a href="path/to/full/image1.jpg"><img src="/path/to/thumb1.jpg" alt="Image 1" /></a></li>
	<li><a href="path/to/full/image2.jpg"><img src="/path/to/thumb2.jpg" alt="Image 2" /></a></li>
	<li><a href="path/to/full/image3.jpg"><img src="/path/to/thumb3.jpg" alt="Image 3" /></a></li>
	<li><a href="path/to/full/image4.jpg"><img src="/path/to/thumb4.jpg" alt="Image 4" /></a></li>
	<li><a href="path/to/full/image5.jpg"><img src="/path/to/thumb5.jpg" alt="Image 5" /></a></li>
</ul>

If you don’t create your image list manually, you can populate it as an array.  Below I have only specified the url of the full size image.  The alt tag (“alt”) and thumbnail (“thumb”) can also be specified, but if the thumb isn’t specified the full size url will be used instead (meaning the thumb should be resized via css instead).

<script type="text/javascript">
	$(document).ready(function(){
		var images = new Array();
		images[0] = {src : "/images/slide1.jpg"}
		images[1] = {src : "/images/slide2.jpg"}
		images[2] = {src : "/images/slide3.jpg"}
		images[3] = {src : "/images/slide4.jpg"}
		images[4] = {src : "/images/slide5.jpg"}
		images[5] = {src : "/images/slide6.jpg"}

		// Create a new galleryCarousel with a few config options
		$('#galleryWrap').galleryCarousel({
			target : $('#featuredImg'),
			nextBtn : $('a#next'),
			prevBtn : $('a#prev'),
			images : images
		});
	});
</script>

Captions

When you have specified a caption for an image, it will be shown – you can specify text or html for your caption.  When there is no caption specified for an image, the caption container will be hidden.

images[0] = {
    src : '/path/to/my/image.jpg',
    caption : 'This is my image caption.'
}

Main Image Hyperlink

You can specify a page to navigate to when clicking on an image, which is useful for portfolios and such.  To specify an image, simply add a url property like so:

images[0] = {
    src : '/path/to/my/image.jpg',
    url : '/path/to/my/page.html'
}

Property List

Here is a list of the configuration options and their defaults:

Property Name Default Value Description
itemsShown 3 The number of images visible atany one time
step 1 The number of images to scroll past when next/prev links are clicked
target $(‘#galleryImg’) The selector for the full size image
selectedClass selected The class for an image thumnail that is currently being displayed
nextBtn $(‘a#galleryNext’) The selector for the next link
prevBtn $(‘a#galleryPrev’) The selector for the previous link
highAlpha 1 The opacity of a selected / hovered thumnail
lowAlpha 0.5 The opacity of a non-selected thumbnail
scrollTime 500 The time in ms it takes to scroll left or right
interval 1000 The time in ms between automatic scrolling (set to 0 to disable auto-scrolling)
carouselClass gallery The class for the <ul> element (in case you want to style it easily)
captionTarget $(‘#caption’) The selector for your caption container
images n/a A collection of images (see below)

The following is a list of the properties for the images object:

Property Name Default Description
src n/a URL of the full size image
thumb n/a URL of the thumbnail (optional)
alt n/a Alt tag for the thumb / full image (optional)
url n/a The url you want to navigate to on clicking the full image
caption n/a The caption you want associated with this image
]]> http://www.bluearena.com/2009/06/gallery-carousel-v1-1/feed/ 1 Gallery Carousel v1.0 http://www.bluearena.com/2009/05/gallery-carousel-v1-0/ http://www.bluearena.com/2009/05/gallery-carousel-v1-0/#comments Sun, 24 May 2009 14:05:59 +0000 Maloric http://wordpress.bluearena.com/?p=54 Gallery Carousel does what it says on the tin. It’s part image gallery, part carousel. It provides an unordered list of images which can be scrolled horizontally. When an image is clicked or the list is scrolled, the main image is updated to the larger version of the thumb. In order to use Gallery Carousel you must include jQuery 1.3.2 before you create a new carousel. Creating a carousel requires relatively little markup, just a list of images, a couple of links to navigate and an image to represent the full size image.

 

Download packed code for Gallery Carousel v1.0

Here is a stripped down version.  First, include the galleryCarousel javascript file in the <head> section of your page:

<script src="includes/galleryCarousel-1.0.min.js" type="text/javascript"></script>

Then some simple styles to make it look nice:

<style type="text/css">
	img {border:0;}
	ul.gallery li {padding:0 5px;}
	ul.gallery li img {height:61px;} /* If you don't specify a thumnail image you should set the height of the scaled down image instead */
	ul.gallery li img.selected {border:2px solid #000;}
</style>

You’ll need some basic markup: an empty image, a next link, a previous link and a div to put our carousel into:

<img id="featuredImg" />
<table>
	<tr>
		<td>
			<a id="prev" href="#">Prev</a>
		</td>
		<td>
			<div id="galleryWrap"></div>
		</td>
		<td>
			<a href="#" id="next">Next</a>
		</td>
	</tr>
</table>

If you prefer to specify your images in the html rather than the javascript, you can also populate your target div with a ul like the following:

<ul class="myGalleryClass">
	<li><a href="path/to/full/image1.jpg"><img src="/path/to/thumb1.jpg" alt="Image 1" /></a></li>
	<li><a href="path/to/full/image2.jpg"><img src="/path/to/thumb2.jpg" alt="Image 2" /></a></li>
	<li><a href="path/to/full/image3.jpg"><img src="/path/to/thumb3.jpg" alt="Image 3" /></a></li>
	<li><a href="path/to/full/image4.jpg"><img src="/path/to/thumb4.jpg" alt="Image 4" /></a></li>
	<li><a href="path/to/full/image5.jpg"><img src="/path/to/thumb5.jpg" alt="Image 5" /></a></li>
</ul>

If you don’t create your image list manually, you can populate it as an array.  Below I have only specified the url of the full size image.  The alt tag ("alt") and thumbnail ("thumb") can also be specified, but if the thumb isn’t specified the full size url will be used instead (meaning the thumb should be resized via css instead).

<script type="text/javascript">
	$(document).ready(function(){
		var images = new Array();
		images[0] = {src : "/images/slide1.jpg"}
		images[1] = {src : "/images/slide2.jpg"}
		images[2] = {src : "/images/slide3.jpg"}
		images[3] = {src : "/images/slide4.jpg"}
		images[4] = {src : "/images/slide5.jpg"}
		images[5] = {src : "/images/slide6.jpg"}

		// Create a new galleryCarousel with a few config options
		$('#galleryWrap').galleryCarousel({
			target : $('#featuredImg'),
			nextBtn : $('a#next'),
			prevBtn : $('a#prev'),
			images : images
		});
	});
</script>

Here is a list of the configuration options and their defaults:

Property Name Default Value Description
itemsShown 3 The number of images visible atany one time
step 1 The number of images to scroll past when next/prev links are clicked
target $(‘#galleryImg’) The selector for the full size image
selectedClass selected The class for an image thumnail that is currently being displayed
nextBtn $(‘a#galleryNext’) The selector for the next link
prevBtn $(‘a#galleryPrev’) The selector for the previous link
highAlpha 1 The opacity of a selected / hovered thumnail
lowAlpha 0.5 The opacity of a non-selected thumbnail
scrollTime 500 The time in ms it takes to scroll left or right
interval 1000 The time in ms between automatic scrolling (set to 0 to disable auto-scrolling)
carouselClass gallery The class for the <ul> element (in case you want to style it easily)
images n/a A collection of images (see below)

The following is a list of the properties for the images object:

Property Name Default Description
src n/a URL of the full size image
thumb n/a URL of the thumbnail (optional)
alt n/a Alt tag for the thumb / full image (optional)

 

]]> http://www.bluearena.com/2009/05/gallery-carousel-v1-0/feed/ 1