"jQuery.fn"

Methods

---

foogallery( [ options [, ready ] ] ) → {jQuery}

Expose FooGallery as a jQuery plugin.

Parameters

Name	Type	Attributes	Description
options	object	<optional>	The options to supply to FooGallery.
ready	external:"jQuery.fn"~readyCallback	<optional>	A callback executed once each template initialized is ready.

Returns

jQuery

Examples

The below shows using this method in its simplest form, initializing a template on pre-existing elements.

<!-- The container element for the template -->
<div id="gallery-1" class="foogallery">
  <!-- A single item -->
  <div class="fg-item" data-id="[item.id]">
    <div class="fg-item-inner">
      <a class="fg-thumb" href="[item.href]">
        <img class="fg-image" width="[item.width]" height="[item.height]"
        	title="[item.title]" alt="[item.description]"
        	data-src="[item.src]"
        	data-srcset="[item.srcset]" />
        <!-- Optional caption markup -->
        <div class="fg-caption">
        	<div class="fg-caption-inner">
        	 <div class="fg-caption-title">[item.title]</div>
        	 <div class="fg-caption-desc">[item.description]</div>
        	</div>
        </div>
      </a>
    </div>
  </div>
  <!-- Any number of additional items -->
</div>
<script>
	jQuery(function($){
		$("#gallery-1").foogallery();
	});
</script>

Options can be supplied directly to the .foogallery() method or by supplying them using the data-foogallery attribute. If supplied using the attribute the value must follow valid JSON syntax including quoted property names. If the same option is supplied in both locations as it is below, the value from the attribute overrides the value supplied to the method, in this case lazy would be true.

<!-- Supplying the options using the attribute -->
<div id="gallery-1" class="foogallery fg-responsive" data-foogallery='{"lazy": true}'>
	<!-- Items -->
</div>
<script>
	jQuery(function($){
		// Supply the options directly to the method
		$("#gallery-1").foogallery({
			lazy: false
		});
	});
</script>

Details

Source

core/js/foogallery.js, line 3042

---

fgImageViewer( options ) → {jQuery}

Initializes the Image Viewer plugin on the matched elements using the supplied options.

Parameters

Name	Type	Description
options	FooGallery.ImageViewer~Options	The options to initialize the plugin with.

Returns

jQuery

Details

Source

templates/image-viewer/js/foogallery.image-viewer.js, line 166

Type Definitions

---

readyCallback( template )

If supplied this method is executed after each template is initialized.

Parameters

Name	Type	Description
template	FooGallery.Template	The template that was initialized.

Examples

The below shows an example of supplying this callback to the .foogallery() method.

jQuery(".foogallery").foogallery({
	// Options here
}, function(template){
	// Called after each template is initialized on the matched elements
});

Details

Type

function

Source

core/js/foogallery.js, line 3101