Berg HTML documentation

Gallery

Create own gallery by add images to gallery.html and load images content in gallery-content. You want 4 images columns in your gallery? It's simple. All you need to do is declare columns count in class "gallery-content" and "data-columns" e.g. "four-columns", data-columns="4". You can also devide images to categories by add a category number (e.g. category-1). More infromation about load content you find in blog

		<div class="gallery-content three-columns" data-columns="3"<-- declare columns count
			<a class="mix category-1 open-overlay" href="http://peach.blender.org/wp-content/uploads/big_big_buck_bunny.jpg" > 
				<img src="img/blog/blog1.jpg" />
				<div>
					<div>
						<span>						
							<h3>Single image</h3>
							<p>This is an example for single image.</p>
						</span>
					</div>
				</div>
			</a>
		...
		

We're proud to present our overlay you can use it by insert class "open-overlay". Overlay can shows single image, video or images group. We chose owl carousel to light images group. It's a simple usage, all you need to do is fill file "ajax-gallery.html". This slider has many options which you can change if you want it but remember about use predefined our classes.

		Images slider
		// gallery.html
		...
		<a class="mix category-2 open-overlay" href="ajax-gallery.html">
			<img src="img/blog/blog3.jpg" />
			<div>
				<div>
					<span>
						<h3>Ajax loaded album</h3>
						<p>This is the most advanced option. Provide url to another file with album content. You can use images and videos.</p>
					</span>
				</div>
			</div>				
		</a>
		...

		// ajax-gallery.html
		<section id="gallery">
		    <div class="gallery-content fullscreen"><a class="close-button"><i class="icon-close"></i></a>
		        <div class="gallery">
		            <div class="loading-spinner"></div>
		            <div id="images" class="owl-carousel">
		            	// add url images or video
		            	<div class="item-video"><a class="owl-video" href="http://vimeo.com/23924346"></a></div>
		            	<div class="item"><figure><img src="img/blog/blog6.jpg" /></figure></div>
		            	<div class="item"><figure><img src="img/blog/blog7.jpg" /></figure></div>
		            	<div class="item"><figure><img src="img/blog/blog8.jpg" /></figure></div>
		            </div>
		            <div class="controls"></div>
		        </div>
		    </div>
		</section<
		

Owl carousel options

We used the newest version owl carousel 2. More information about this slider you find here

		// main.js
		...
		var loop = true;
			if($(owl).find('.item').length === 1)
				loop = false;
				owl.owlCarousel({
				video: true,
				videoWidth: false,
				videoHeight: false,
				items: 1,
				loop: loop,
				merge: false,
				nav: true,
				slideSpeed: 2000,
				dots: false,
				startPosition: current,
				callbacks: true,
				navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
				responsiveClass: false,
		...