jQuery.GI.TheWall.js

jQuery.GI.TheWall.js could be used to create easily an image gallery similar to the google image search

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: goldinteractive.github.io

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jQuery.GI.TheWall.js"></script>

2. HTML

<div class="GITheWall">
  <ul>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?1">
	  <img src="http://lorempixel.com/570/570?1" />
	</li>
	<li data-contenttype="ajax" data-href="ajax-contents/ajax-text-image.html">
	  ajax text + image
	</li>
	<li data-contenttype="ajax" data-href="ajax-contents/ajax-text.html">
	  ajax text
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?2">
	  <img src="http://lorempixel.com/570/570?2" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?3">
	  <img src="http://lorempixel.com/570/570?3" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?4">
	  <img src="http://lorempixel.com/570/570?4" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?5">
	  <img src="http://lorempixel.com/570/570?5" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?6">
	  <img src="http://lorempixel.com/570/570?6" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?7">
	  <img src="http://lorempixel.com/570/570?7" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?8">
	  <img src="http://lorempixel.com/570/570?8" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?10">
	  <img src="http://lorempixel.com/570/570?10" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?11">
	  <img src="http://lorempixel.com/570/570?11" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?12">
	  <img src="http://lorempixel.com/570/570?12" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?13">
	  <img src="http://lorempixel.com/570/570?13" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?14">
	  <img src="http://lorempixel.com/570/570?14" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?15">
	  <img src="http://lorempixel.com/570/570?15" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?16">
	  <img src="http://lorempixel.com/570/570?16" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?17">
	  <img src="http://lorempixel.com/570/570?17" />
	</li>
	<li data-contenttype="image" data-href="http://lorempixel.com/570/570?18">
	  <img src="http://lorempixel.com/570/570?18" />
	</li>
  </ul>
</div>

3. JAVASCRIPT

$('.GITheWall').GITheWall();

4. OPTIOINS

var wall = $('div.wall').GITheWall({
  // Callbacks API
  onBeforeInit: null,
  onReady: null,
  onViewPortUpdate: null,
  onItemChange: null,
  onDestroy: null,
  onShow: null,
  onHide: null,
  onContentLoading: null,
  onContentLoaded: null,
  margin: {
    top: 10,
    bottom: 10
  },
  scrollerElm: null,
  scrollOffset: 150,
  // settings
  arrows: true,
  closebutton: true,
  keyboardNavigation: true,
  animationSpeed: 300,
  autoscroll: true,
  responsive: true,
  initialWrapperHeight: 600,
  dynamicHeight: true,
  nextButtonClass: '',
  prevButtonClass: '',
  closeButtonClass: ''
});

5. METHODS

showExpander: Open the expander div if it's closed otherwise just update the content inside