ddGallery [v3.6.7.1] by: Darren Doyle

beautiful, usable, interactive multimedia galleries and rotators for desktop and mobile

Themes & Presets

Try out some themes below. Use them on your own page, modify them to suit your needs, or just use them to get some ideas to create your own!

Themes:

Some preconfigured settings to get you started. Further customize individual settings below, and then copy the settings for your own installation.

Presets:

Here are a few option presets to get you started:

Settings

Test out ddGallery settings here, then copy and use the settings for your own implementation.

Thumbnails Arrows Captions Count Dot Nav Tab Keyboard Animation Image Full Screen Initialization

thumbs [boolean, default: true]

Show the thumbnails?

hideThumbs [boolean, default: true]

If thumbnails are shown, should the thumbnail viewer only show on mouseover?

thumbsHideSpeed [milliseconds, default: 150]

Speed of animation to hide/show the thumbnails and/or arrows.

thumbsScrollSpeed [milliseconds, default: 350]

Speed of animation to scroll the thumbnails. (Only applies to automatic scrolling.)

thumbsNumbers [boolean, default: false]

Tag the thumbnails with item numbers?

thumbsPush [boolean, default: false]

Should the controls shrink the effective stage?

arrows [boolean, default: true]

Show the navigation left/right arrows?

hideArrows [boolean, default: true]

Hide the arrows when not hovering?

arrowsHideSpeed [milliseconds, default: 250]

Length of time for caption slide-out animation.

captions [boolean, default: true]

Show the captions?

hideCaptions [boolean, default: true]

If captions are shown, should they fade out?

externalCaptions [string, default: null]

The css selector to output caption text to. Outputs a span with class "ddGallery-externalCaptions".

captionPause [milliseconds, default: 2000]

Length of time to show caption before fading out.

captionHideSpeed [milliseconds, default: 250]

Length of time for caption slide-out animation.

count [boolean, default: false]

Show an item count badge?

hideCount [boolean, default: true]

Hide the item count on mouseover?

countType [string, default: 'total']

Output total item count (e.g., "5") or paged (e.g., "1 of 5")?

dotNav [boolean, default: false]

Show a standard "dot" navigation?

dotNavNumbers [boolean, default: false]

Should the dot navigation display item numbers?

pinTab [boolean, default: true]

Show the tab for pinning down the controls?

keyboard [boolean, default: false]

Use the left and right arrows on the keyboard to change images?

rotate [boolean, default: true]

Automatically play through images?

stageRotateType [string, default: fade]

Which animation to use to change items? (note: lift and drop only work with images)

hoverPause [boolean, default: true]

Pause item rotation on mouseover?

stagePause [milliseconds, default: 4000]

Length of time to show item before beginning transition animation.

stageRotateSpeed [milliseconds, default: 500]

Speed of transition animation.

autoPlay [boolean, default: false]

Automatically play YouTube movies when they load?

playlist [boolean, default: false]

Playlist mode? (for YouTube videos; see example below)

stretch [boolean, default: false]

Should images be stretched to the exact stage dimensions? (overrides fill and enlarge)

fill [boolean, default: false]

Scale all images to fill the stage? (overrides enlarge)

enlarge [boolean, default: true]

Should small images be enlarged to fit the stage? (Large images will always be reduced.)

zoom [boolean, default: false]

Enable image zooming for images larger than the stage?

hideZoom [boolean, default: true]

Only show zoom toggle on mouseover?

fullScreen [boolean, default: true]

Enable button to expand stage to fill browser window?

thumbsPushOnFull [boolean, default: true]

Should the controls shrink the effective stage when in full screen mode?

hideThumbsOnFull [boolean, default: false]

In full screen mode, hide the thumbs on when not mouse hovering?

hideCaptionsOnFull [boolean, default: false]

In full screen mode, hide the captions on when not mouse hovering?

hideCountOnFull [boolean, default: true]

Hide the count when in full screen mode?

startItem [number, default: 1]

Which item to show initially on load.

pinned [boolean, default: false]

Start with the controls pinned down?


Reload after changing options or unloading.
Unload to see the supplied HTML structure.


Copy Current Settings:

Requirements

jQuery

  • jQuery 1.7.2+ (jQuery 1.7.2 fixed some bugs which rendered ddGallery inoperable in earlier versions of Internet Epxplorer)

Default Stylesheet

The default CSS stylesheet makes extensive use of CSS3 styles including rounded corners, shadows, and RGB colors. By default, these are supported in Internet Explorer 9 or higher. However, the stylesheet has been set up to use Progressive Internet Explorer to allow IE 6-8 to support these features—you will have to edit a single line in the default CSS to point to the PIE install directory on your server. See the PIE documentation on Relative Paths.

Resizability & Responsive Layouts

ddGallery will behave well with responsive designs that resize the main ddGallery DIV. There is one caveat for this to function properly: styling should not be applied directly to the HTML element. This isn't really good practice in 99% of circumstances, anyway, so it shouldn't be a problem for the vast majority.

This also applies to setting the size of ddGallery with another script. To script resizes on ddGallery, place the ddGallery container with a width and height of 100% (set externally) inside of a wrapper div, then resize the wrapper.

Full Screen Mode

Full screen mode relies on the CSS position:fixed property which is supported in the following browsers. (This does not apply to YouTube's built-in full screen sizing which is a function of the Flash player.)

  • Chrome 16+
  • Opera 11.6+
  • Opera Mobile 10.0+
  • Android Browser 2.2+
    • requires the following meta tag: <meta name="viewport" content="width=device-width, user-scalable=no">)
  • Firefox 3.6+
  • Safari 5.0+
  • iOS Safari 5.0+
  • Internet Explorer 7.0+

YouTube Integration

Full YouTube integration supported via the YouTube iFrame API which requires HTML5 postMessage support.

Note that YouTube API is pretty flakey on mobile platforms.

  • Chrome 16+
  • Opera 11.6+
  • Opera Mini 5.0+
  • Opera Mobile 10.0+
  • Android Browser 2.1+
  • Firefox 3.6+
  • Safari 5.0+
  • iOS Safari 3.2+
  • Internet Explorer 8.0+

Gallery

DEMO [ THEME: Default ]

External Caption: Make your own external caption placeholder(s), and let the captions appear anywhere on the page. Note: as they are controlled separately, when using external captions, you may want to turn off the internal captions.

External Controls: Use JavaScript to control ddGallery and integrate with other components on the page! Send commands like so: $('#element').ddGallery('play'). The goTo command takes a second parameter for the item number: $('#element').ddGallery('play', 3); All of the available commands are listed and functioning below.

  • Navigation:   ()   ()   ( , )
  • Rotation:   ()   ()   ()
  • Image Toggles:   ()   ()
  • Controls:   ()   ()   ()

Instructions

Step 1: Download & "Install" Files

  1. jQuery version 1.7 or higher:
  2. The ddGallery Plugin (regular or minified):
  3. The Default CSS File:
  4. *Optional* CSS3 PIE:
    • Progressive Internet Explorer (PIE) makes Internet Explorer 6-9 capable of rendering CSS3 decoration features (like shadows and rounded corners) that the default CSS file makes use of. If you plan on supporting IE, it's probably a good bet. NOTE: You may need to edit the path to PIE in the CSS file to make it work properly (scroll to the very bottom of the CSS file for instructions).
  5. *Optional* Images (or use your own!):

To use these files on your page, reference them in the header.

  • jQuery must be referenced before the ddGallery js file.
  • the ddGallery CSS file must be referenced before the ddGallery js file.
	<head>
		<link href="ddGallery.default.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="jquery.ddGallery.js"></script>
	</head>
	

Step 2: HTML

The best HTML structure for a gallery of images is to put a thumbnail image inside a link to the full-sized image. This decreases initial load time (linked images are loaded asynchronously), and degrades nicely if JavaScript is turned off.

For a clickable image, wrap the full-sized image in the desired link. The target attribute (e.g., "_blank") is respected by ddGallery. You can add the attribute type="link" to force ddGallery to read the item as a clickable link rather than an image/thumbnail pair (useful if you wish to link out to an image). You can also add the attribute type="image" to force ddGallery to read the item as an image/thumbnail pair (useful if the linked image doesn't contain the usual image extension). See the examples below.

Explanation of Examples

In the following sample code, you will see these examples:

  • Direct image tag
  • Full-sized image with thumbnail
  • Full-sized image with thumbnail (full-sized image generated by PHP)
  • Clickable image linking to another site
  • Clickable image linking to another image (opens in new window)
  • YouTube video
  • Vimeo video
  • DIV
	<div id="myElement">
		<img src="images/large1.jpg" alt="caption" />
		<a href="images/large2.jpg"><img src="images/thumb2.jpg" alt="caption" /></a>
		<a href="imageGenerator.php?id=123" type="image"><img src="images/thumb3.jpg" alt="caption" /></a>
		<a href="http://another.site.com/"><img src="images/large4.jpg" alt="caption" /></a>
		<a href="http://another.site.com/some-image.jpg" target="_blank" type="link"><img src="images/large5.jpg" alt="caption" /></a>
		<a href="http://www.youtube.com/watch?v=eOrNdBpGMv8" title="caption"></a>
		<a href="http://vimeo.com/38388574" title="caption"></a>
		<div class="customClass" title="caption" thumb="images/thumb3.png">Custom Content</div>
		<iframe src="http://my.domain.com" title="caption"></iframe>
	</div>
	

Step 3: Apply Javascript

Pretty straightforward loading, just like a jQuery plugin should be!

	$(document).ready(function(){
		$('#myElement').ddGallery();
	});
	

Step 4: Add Options

If you want to override the default options, then reference them in the ddGallery call. You can use the tool on this site to generate an option list to paste into your JavaScript.

	$(document).ready(function(){
		$('#myElement').ddGallery({
			rotate : false,
			enlarge : false
		});
	});
	

Step 5: Styling!

Almost everything about ddGallery can be styled with CSS to look exactly how you want it to: from background color, to button text, to thumbnail size.

Recommended Implimentation:

  1. Duplicate the default css file.
  2. Rename the new file, e.g., "ddGallery.custom.css".
  3. In the custom file, overwrite any settings you want.
  4. In the custom file, delete any settings that haven't been altered. (Optional, but will reduce load times)
  5. Include both files in your HTML. Be sure to reference the default first.

Why This Way?

  • By creating a custom CSS file you insure that your custom style will never get overwritten when updating ddGallery. Also, any new styles (supporting new features, for example) that are added to the default CSS will work immediately on update without relying on you updating your own CSS first.

IMPORTANT! The default CSS file includes, at the bottom, the addition of CSS3 PIE which allows Internet Explorer 6+ to use CSS3 features like gradients, shadows, and rounded corners. Important notes about CSS3 PIE:

  • You must download and install css3 pie separately (you can get it here).
  • CSS3 PIE must be accessed at the exact same domain as your HTML document.
  • In the CSS document, the URL to the pie.htc file should be relative to the HTML document NOT the CSS document.
  • The default CSS assumes that pie.htc is in the same directory as the HTML. Please be sure to set this value (in your custom CSS file) according to your own configuration!

Tips & Examples

Make your first image a direct link to an image, rather than a thumb linking to an image. That will (potentially) allow the initial image to begin loading before the script starts. This is implemented in the main example above; see the sample code above.


You can use ddGallery on a page in place of a single image. If you only have one image to load, the controls will be hidden, but you will still get animated captions on mouse-over. You can also utilize the zoom and full screen modes on a single image.

  • Settings:
    • captionPause:0
    • captionHideSpeed:100
    • thumbsHideSpeed:100
    • pinTab:false
    • zoom:true

ddGallery in playlist mode is good for playing through videos that have been broken up across several videos on YouTube. In playlist mode, the videos will continue to play sequentially until the user pauses or until the end of the last video.

Using the built-in dotNavNumbers can be a particularly effective solution for displaying YouTube playlists.

NOTE: In playlist mode, autoplay only starts the first video.

  • Settings:
    • captions:false
    • thumbs:false
    • dotNav:true
    • dotNavNumbers:true
    • rotate:false
    • playlist:true
    • stageRotateSpeed:0
    • stagePause:500

Version History & To-Do

To-Do / Known Issues

IN PROGRESS:

  • complete refactor to plugin architecture for features (animation, controls, etc) to reduce working load size—avoid bloat by only loading what you use, e.g., no plugins = lightweight, controllerless image rotator

FIX:

  • [fix] caption sizing remains 0 when ddGallery starts with 0 height

ADD FEATURE:

  • Progress bar and play/pause button for rotation
  • non-scrolling and/or external thumbnails
  • automatic thumbnail sizing: scale or stretch thumbs to fit all thumbs to the width of the gallery (no scrolling)
  • touchscreen: swipe images to navigate
  • continuous scroll mode
  • integrate with Vimeo API

UNDER CONSIDERATION:

  • Ken Burns effects
  • tiled image animations; will only add if it does not interfere with scalability/resizability and performance

History

v3.6.7.1 :: 2012-05-22

  • [fix] YouTube url handling for more graceful IE7 degrade (video can still play)

v3.6.6 :: 2012-05-04

  • [ref] minor refinement to caption fade-in/out

v3.6.5 :: 2012-05-02

  • [fix] arrow drawing issues in IE6-7

v3.6.4 :: 2012-05-02

  • [add] refinements to the captions: fade in/out text on caption change
  • [ref] refinements to caption CSS to better support multi-line captions

v3.6.3 :: 2012-04-27

  • [fix] refined YouTube url parser

v3.6.2 :: 2012-04-24

  • [fix] control wrapper not collapsing properly
  • [fix] minor adjustments to css themes

v3.6.1 :: 2012-04-20

  • [add] external command: "resize"

v3.6 :: 2012-04-20

  • [add] scale to fill option for images

v3.5 :: 2012-04-20

  • [ref] unpin controls when full screen mode toggled
  • [ref] more improvements and optimizations to resizing listeners
  • [ref] significant CSS3PIE support optimizations and improvements
  • [ref] completely refactored arrows for better cross-browser compatibility
  • [ref] refactored CSS to support new arrows
  • [ref] improvements to dotNav logic
  • [fix] fixed loading image for minimalist: dark theme
  • [fix] full screen mode now accommodates border and padding widths on main gallery
  • [fix] caption still hiding while mouse hover

v3.3 :: 2012-04-19

  • [add] animation style: random
  • [ref] streamlined external command parser
  • [ref] streamlined animation sanity check
  • [ref] rewrote container/window resize listener, should be more robust
  • [fix] more default CSS fixes and refinements

v3.2 :: 2012-04-18

  • [ref] minor change to caption structure to accommodate IE
  • [fix] a few IE bug fixes
  • [fix] fixed CSS issue in gallery template preventing setting the vertical positioning of control tab
  • [fix] more default CSS fixes and refinements

v3.1.1 :: 2012-04-18

  • [add] add unused watermark references to default CSS to make it easier for editors to target
  • [ref] cleaned up CSS code and added version header
  • [fix] minor IE fixes in JavaScript

v3.1 :: 2012-04-17

  • [add] thumbnail numbering + requisite CSS + thumbsNumbers option
  • [add] dot navigation numbering + requisite CSS + dotNavNumbers option
  • [add] separate hide speed setting for arrows
  • [ref] minor edits to default CSS style
  • [ref] change controlHideSpeed to thumbsHideSpeed for consistency
  • [ref] change controlScrollSpeed to thumbsScrollSpeed for consistency
  • [ref] change controlPush to thumbsPush for consistency
  • [ref] change captionFadeSpeed to captionHideSpeed for consistency
  • [fix] minor improvements to CSS in gallery template

v3.0.1 :: 2012-04-16

  • [fix] lift and drop animation not working with clickable images

v3.0 :: 2012-04-16

  • [add] dot navigation & requisite options
  • [ref] navigation arrows completely refactored to work independently of control thumbs and be more customizable
  • [ref] control thumbnails completely refactored to scroll with mouse hover
  • [ref] HTML and style overhauls to allow for overflowed buttons
  • [ref] changed to count to off by default
  • [fix] minor bug fixes affecting animation

v2.6.2 :: 2012-04-05

  • [fix] pin tab function bugs with full screen

v2.6.1 :: 2012-04-05

  • [add] startItem option (select initial item to load)
  • [fix] watch for mouse hover on startup

v2.6 :: 2012-04-05

  • [add] external control: goTo
  • [add] fullScreen class toggle to main element to target gallery during fullscreen (specifically: need to add background during fullscreen)
  • [add] default CSS file updates and additions
  • [ref] stage drawing rewrite so that contents do not overlap controller on controlPush
  • [ref] caption drawing, external and internal captions can now be enabled independently of each other
  • [ref] set body to overflow:hidden on fullscreen to remove scroll bars and prevent background scrolling
  • [fix] layering of elements for new stage drawing method & full screen issues
  • [fix] zoom and fullScreen external controls to work when those controllers are hidden in gallery
  • [fix] iframe double scroll bar

v2.5 :: 2012-04-04

  • [add] external controls: play, pause, playToggle, last, next, zoom, fullScreen, hideControls, showControls, toggleControls

v2.4.5 :: 2012-04-02

  • [add] use ESC key to exit full screen mode
  • [fix] DIV sizing / selection bug

v2.4.4 :: 2012-04-02

  • [fix] YouTube API loading w/ Firefox

v2.4.3 :: 2012-03-30

  • [fix] bugs with full screen options

v2.4.2 :: 2012-03-30

  • [add] extra fullScreen options
  • [fix] bugs with zoom and full screen buttons

v2.4.1 :: 2012-03-28

  • [fix] bugs relating to resizability

v2.4 :: 2012-03-27

  • [add] full window mode
  • [add] resizability

v2.3 :: 2012-03-23

  • [add] clickable image support
  • [add] touchscreen support
  • [ref] change .live() calls to .on()
  • [fix] disappearing arrows bug
  • [fix] direction of some slide/push animations incorrect

v2.2.2 :: 2012-03-19

  • [fix] YouTube link parsing bug
  • [fix] iframe/youtube/vimeo scrollbars

v2.2.1 :: 2012-03-19

  • [add] CSS3 PIE added to default CSS
  • [add] hideZoom option
  • [fix] minor bug fixes

v2.2 :: 2012-03-14 Pi Day!

  • [add] image zoom

v2.1.1 :: 2012-03-14 Pi Day!

  • [fix] empty thumbnail js warning

v2.1 :: 2012-03-13

  • [add] minimal Vimeo support
  • [add] animation: pushH
  • [add] animation: pushV
  • [add] animation: slideH
  • [add] animation: slideV
  • [add] animation: lift
  • [add] animation: drop
  • [fix] minor bug fixes

v2.0 :: 2012-03-12

  • [add] YouTube support
  • [add] control panel pinning
  • [add] ability to use <iframe>
  • [ref] refactored and cleaned much code
  • [fix] fixed thumb scroll bug

v1.1 :: 2012-02-29 Leap Day!

  • [add] ability to use <div>
  • [add] ability to use <img>
  • [add] ability to use <iframe>
  • [add] item count & options
  • [add] single-item handling
  • [ref] some code cleanup and optimization

v1.0 :: 2012-02-22

  • :: initial release