Михаил Горячкин

Вот держите вам самую простую демочку. Эффекты смены я думаю добавите сами.

Грубый вариант решения вашей проблемы, ну если использовать чисто css, будет примерно такой:
HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

ul {
    width: 70%;
    font-size: 0;
    list-style: none;
}
ul li {
    display: inline-block;
    width: 50%;
    padding: 10% 0;
    overflow: hidden;
    background-size: cover;
    background-position: 50% 50%;
}
ul li:nth-child(1) {
    background-image: url(http://untifler.narod.ru/photos/gaf8-1s.jpg);
}
ul li:nth-child(2) {
    background-image: url(http://www.gjkt.cz/files/images/budova.jpg);
}
ul li:nth-child(3) {
    background-image: url(http://imageproxy.jxs.cz/~nd04/jxs/cz~/856/512/fbafffc141_70326674_o2.jpg);
}
ul li:nth-child(4) {
    background-image: url(http://untifler.narod.ru/photos/gaf8-1s.jpg);
}
img {
    width: 100%;
}

Может вас такой вариант устроит, а иначе js вам в помощь.

Вот вам пример:
HTML

<button id="open">Открыть</button>
<div id="form">
  <form action="#" method="post">
    <input type="text" value="" placeholder="найти" />
  </form>
</div>

CSS:

#form {
  padding: 20px;
  background-color: #000;
  display: none;
}

JS:

$(document).ready(function () {
  var searchBlock = $('#form');
  $(document).on('click', '#open', function () {
    searchBlock.slideToggle();
    return false;
  });
});

А вообще заглянули бы в код страницы, там все написано.

У вас ошибка возникает, потому-что какое-то изображение не смогло подгрузиться. В файле queryLoader замените код ф-и createPreloading на:

createPreloading: function() {
		QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
		$(QueryLoader.preloader).css({
			height: 	"0px",
			width:		"0px",
			overflow:	"hidden"
		});
		
		var length = QueryLoader.items.length; 
		QueryLoader.doneStatus = length;
		
		for (var i = 0; i < length; i++) {
			var imgLoad = $("<img></img>");
			$(imgLoad).attr("src", QueryLoader.items[i]);
			$(imgLoad).unbind("load");
			$(imgLoad).bind("load", function() {
				QueryLoader.imgCallback();
			});
			$(imgLoad).bind("error", function () {
				console.warn(this.src + ' картинка не найдена!');
				QueryLoader.imgCallback();
			});
			$(imgLoad).appendTo($(QueryLoader.preloader));
		}
	}

Можно попробовать сделать при помощи трансформаций.
Вот по быстрому пример набросал:

<div class="treangle">
  <div class="treangle--left"></div>
  <div class="treangle--right"></div>
</div>

CSS:

body, html {
  height: 100%;
  width: 100%;
}
.treangle {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
  overflow: hidden;
  
  [class*='treangle--'] {
    width: 100%;
    height: 50%;
    position: absolute;
    background-color: yellow;
  }
  
  .treangle--left {
    float: left;
    left: -50%;
    transform: rotate(20deg);
    transform: matrix(-1, -0.2, 0, 1, 0, 0);
  }
  
  .treangle--right {
    float: right;
    right: -50%;
    transform: rotate(-20deg);
    transform: matrix(1, -0.2, 0, 1, 0, 0);
  }
}

Все будет ресайзиться как надо. Вопрос только в поддержке браузеров.

Рабочий пример.