https://github.com/jackwanders/GalleryView

jQuery plugin for creating photo galleries
https://github.com/jackwanders/GalleryView

Last synced: about 2 months ago
JSON representation

jQuery plugin for creating photo galleries

• Host: GitHub
• URL: https://github.com/jackwanders/GalleryView
• Owner: jackwanders
• License: mit
• Created: 2012-03-22T14:50:54.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2014-10-13T22:34:53.000Z (almost 10 years ago)
• Last Synced: 2024-06-09T23:35:42.381Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 231 KB
• Stars: 253
• Watchers: 40
• Forks: 116
• Open Issues: 67
• Metadata Files:
  • Readme: README.txt
  • Changelog: CHANGELOG.txt
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-jquery - GalleryView - jQuery plugin for creating photo galleries (Images / Data Table)

README

        
GalleryView - jQuery Photo Gallery Plugin

Author: Jack Anderson

INSTRUCTIONS FOR USE

---------------------------------

1) Place galleryview-x.x folder somewhere in your website directory structure (you can rename this folder if desired)

2) Include script tags for the desired version of the script (uncompressed, packed) and for the included jQuery Timers and Easing plugin files

3) Include a reference to the jquery.galleryview-x.x.css stylesheet in your document

4) Create an unordered list in your HTML with the content you wish to be displayed in your gallery (see below for more information on markup options

5) Edit the id of the first rule in jquery.galleryview-3.0.css to match the id given to your unordered list

6) Call the GalleryView plugin with the function call below:

	$('#id_of_list').galleryView()

	To override default option values, include them in object literal format in the call to the plugin, like so:

   

	$('#id_of_list').galleryView({

		panel_width: 800,

		panel_height: 600,

		frame_width: 120,

		frame_height: 90

	});

	

	Refer to the uncompressed javascript to see a full list of options, their effects on the plugin and their default values.

	

HTML MARKUP REQUIREMENTS

---------------------------------

Below, I will show you the markup required to produce various types of galleries. After the first example, 

I will exclude the UL wrapper and only show the HTML necessary for a single panel and/or frame.

1) 	Basic slideshow (no added features)

		


			


			


			


			


		

	

	This is the simplest gallery one can have. By default, the filmstrip will appear below the panels. The number of frames visible will be

	determined by the size of the panels. If there is enough space in the gallery to fit all the filmstrip frames, the filmstrip will be centered

	within the gallery. If there are too many frames, the additional frames will be hidden from view initially, appearing as the filmstrip slides

	to the left with each transition. Panel and frame dimensions are set via plugin options, as is the location of the filmstrip. It can be set 

	to appear below, above, or to either side of the panels.

	

2) 	Slideshow with custom thumbnails

		

		


			

		

	

	By adding a data-frame attribute with a relative or absolute path to a separate image, GalleryView will use it to populate the thumbnail. This

	can be helpful when using large panel images and small thumbnails to avoid degradation due to scaling.

	

3)	Slideshow with panel overlays

	

		


			

		

		

	For this gallery, the contents of the title and data-description attributes will display on top of the panel image, its position determined by the 

	'overlay_position' option. The color of the overlays are  set in the included CSS file.

	

CREATING/USING CUSTOM NAVIGATION THEMES

---------------------------------

GalleryView comes with two themes by default:

	- dark

	- light


The dark themes contain dark navigation buttons and are best used in galleries with light backgrounds. The light themes contain light 

colored images and are best for galleries with dark backgrounds. Both themes also contain oversized panel navigation buttons to demonstrate

GalleryView's ability to use any kind of navigation images you may want to use

To create your own navigation theme, first create the following images:

	- next.png

	- prev.png

	- play.png

	- pause.png

	- panel-nav-next.png

	- panel-nav-prev.png

The images can be of any file type. Then, update the galleryView CSS file with the paths to your new navigation images.

That should hopefully be enough to get you started on the right track. Feel free to experiment and find me on twitter (@jackwanders) 

if you have any questions or comments. Enjoy!