https://github.com/schell/smugmugjsgallery

A smugmug javascript gallery
https://github.com/schell/smugmugjsgallery

Last synced: 17 days ago
JSON representation

A smugmug javascript gallery

• Host: GitHub
• URL: https://github.com/schell/smugmugjsgallery
• Owner: schell
• Created: 2010-05-30T23:51:31.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2010-10-18T19:25:17.000Z (about 14 years ago)
• Last Synced: 2024-05-01T23:31:39.950Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.07 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Smug Mug JS Gallery v0.1.2

==========================

This is a gallery viewer for smug mug galleries, written in javascript + mootools. Two of three external libraries are git submodules, so if you wish to embed smugal using option 2 you'll have to download 'go' and 'heyjacks' with

	git submodule init

	git submodule update

which will pull in the submodules from their repos.

Use

---

Step 1: Include the monolithic js file, smugal/smugal-monolithic.js (this file is a concatenation of all the libs and smugal.js - for convenience), or optionally, include all the libs and smugal/smugal.js in your html.  

	

	

	

	

	

	

	

	

Step 2: Create a div in the body of your html to hold the gallery - the inner html of this div will be rewritten once the gallery is loaded successfully, which is great for alt content (in case the user has js turned off, or the api calls fail).

	

		
Here is a smug mug gallery!

	

	

Step 2: Initialize smugal with your configuration options (description of options below).

	

		smugal({

			targetId : 'theGalleryDivId',

			albumId : '11397881',

			albumKey : 'MYoeS',

			fadeDuration : 1000

		});

	

	


Config options

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

The configuration options are listed below with their name, type and a description. All options are *optional* EXCEPT targetId, albumId and albumKey. Image size is 'Original' by default.

	testing - boolean (true or false) - if true, debugging messages will be output to the js console (don't use this if your browser doesn't have a js console)

	targetId - string ('somestring') - the id of the div the gallery should be injected into (required)

	albumId - string - the album id of the album being shown 

	albumKey - string - the album key of the album being shown

	

A note about album id and key - they can be retreived from your gallery url. They are connected by an underscore '_' as it is in any SmugMug gallery url like in this example:

http://cmac.smugmug.com/gallery/2504559_f3ta9

2504559 is the albumId

f3ta9 is the albumKey (the key is case sensitive and you will encounter upper case characters in it)

		

	size - string - the image size the gallery should display. If the preferred size is not available the gallery will display the original size by default.

	

A note about sizes - the size must be one of the following:

'X3Large'

'X2Large'

'XLarge'

'Large'

'Lightbox'

'Medium'

'Original'

'Small'

'Thumb'

'Tiny'

			

	viewDuration - number - the length of time (in milliseconds) that each picture is shown at full opacity

	fadeDuration - number - the length of time (in milliseconds) that each picture takes to fade in or out

Further customization

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

You can customize the gallery through css. All images are displayed inside the target div as img tags, so your css file could look something like this:

	#theGalleryDivId {

		width:100%;

		height:100%;

		background:#000000;

	}

	#theGalleryDivId img {

		border:2px #FFFFFF solid;

		margin:auto;

	}