default.htm

{##}
{# You only need the previous line if you use the OctoberCMS Template Language extension in VS Code #}

{# You can map any component property to a local page variable this way:{% set galleryitems = __SELF__.gallery.items %} #}

{% if __SELF__.error %}
	<div class="alert zen-alert">{{ __SELF__.error|raw }}</div>
{% else %}
	{# Let's make sure that there actually is an element to attach to: #}
	<div class="alert zen-alert" id="november-gallery-nothing-to-attach-to" style="display: none;">{{ __SELF__.errorMessages.cannot_find_element_with_id|raw }}</div>
	{% put scripts %}
	<script type="text/javascript"> 
		if(jQuery("{{ __SELF__.attachTo|raw }}").length == 0) {
			jQuery("#november-gallery-nothing-to-attach-to").show(600);
		}
	</script>
	{% endput %}
{% endif %}

{% if gallery.items|length > 0 %}
	<div style="visibility: collapse; display: hidden; height: 0; width: 0;">
		<div id="{{__SELF__.id}}">
			{# If you are replacing this with your own template, you can use a straight twig filter as follows: 
			<img src="{{ galleryitem.url | resize(280, false,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>
			#}
			{% for galleryitem in gallery.items.sortBy(gallery.sortBy, SORT_REGULAR, gallery.sortDirection == 'DESC' ? true : false) %}
			<img alt="{{ galleryitem.title }}" src="{{ galleryitem.galleryItemSrc }}"
				data-image="{{ galleryitem.url }}"
				data-description="{{ galleryitem.description }}"
				data-title="{{ galleryitem.title }}" />
			{% endfor %}
		</div>
	</div>

	{% put scripts %}
	<script type="text/javascript"> 
		// UniteGallery: https://github.com/vvvmax/unitegallery/
		jQuery(document).ready(function(){ 
			
		{# If we have a custom script set (in the November Gallery backend configuration page), then simply o/p that: #}
		{% if __SELF__.customLightboxScript %}
			{{ __SELF__.customLightboxScript|raw }}
		{% else %}
			
			uniteGalleryApi_{{__SELF__.id}} = jQuery("#{{__SELF__.id}}").unitegallery({

				{{ __SELF__.defaultLightboxOptions|raw }}

				// Add additional options here!
				// See: http://unitegallery.net/index.php?page=tiles-columns-options
				// For example: 
				// tiles_col_width: 280,                   //column width - exact or base according the settings
			}); 

			jQuery("{{ __SELF__.attachTo|raw }}").click(function() {
				uniteGalleryApi_{{__SELF__.id}}.openLightbox(0);
			});

			{% endif %}
		}); 

	</script>
	{% endput %}
{% endif %}