GalleryView – A jQuery Content Gallery Plugin

(No Ratings Yet)

Loading ...

1,438 views

Using GalleryView requires a simple function call and four parameters:

$('#photos').galleryView({
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100,
});

All other parameters are strictly optional, but allow for a great deal of customization in the look and functionality of your gallery. View all options in the table at the bottom of the page.

GalleryView will expect three element types:

1. A

with the id you specify in your call to GalleryView

<div id="photos" class="galleryview">
	...
</div>

A series of panel

s, with optional overlays

...
<div class="panel">
	<img src="img/gallery/02.jpg" />
	<div class="panel-overlay">
		<h2>Eden</h2>
		<p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.
		View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
	</div>
</div>
...

An unordered list of images (with optional title attributes if show_captions is set to true)

<ul class="filmstrip">
	<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
	<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
	<li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
	<li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
	<li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
	<li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
	<li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
	<li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
</ul>

View the source of the following demonstrations for some example source code.
Download:http://plugins.jquery.com/project/timers
Demo:http://www.spaceforaname.com/jquery/galleryview/gallery-light.html
Source:http://www.spaceforaname.com/jquery/galleryview/

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

Customizable jQuery Gallery Plugin: Ad Gallery Ad Gallery is a jQuery plugin for creating an image...
AD Gallery, gallery plugin for jQuery A highly customizable gallery/showcase plugin for jQuery. Features * Choose...
EO Gallery-Jquery EOGallery is a web animated slideshow gallery maid with jQuery....
Photo Gallery : Moo Tools Open Source Photo Gallery Designed with Mootools Javascript Library (E)2...

Do you like this post?

1 Comment »

florian Says:
October 19th, 2009 at 4:20 pm

am new to using jquery and am trying to integrate this slideshow into a wp site.

have downloaded the plugin zip through the links provided, and also the easing js.

however, I am not sure if there are any pre-requisites, nor how to actually install this and call up the functions. Maybe you could give me some instructions how to start? many thanks in advance.
Florian

RSS feed for comments on this post. TrackBack URL