Проблема с плиточной навигацией
 

Добрый день. Столкнулся с проблемой. В самом скрипте команда работает всего 1 раз. Пытался создать второй элемент, но не пашет.

<p><img src="images/close.png" alt="Close Blog" class="close" id="blog_c" style="right:530px; top:15px; z-index:2; position:absolute; cursor:pointer; display:none;" /></p>
<div id="blog_page" class="blog" style="margin-right: 0px; display:none;" >
dfgdfgdfg
</div>

Нужно сделать так, чтобы contacts и why работали одинаково, но с разным содержанием. Мучаюсь уже второй день. Незнаю что делать

Сам файл: http://zalil.ru/34242261

Опишите проблему более понятнее и вывесите код сюда, очень мало кто полезет качать код из файлового хранилища.
Допустим я не вижу не contacts, не why и никак не могу понять, как они должны при этом работать. А качать и потом разбираться во всём коде, нет никакого желания...

я пытался бросить сюда кусок кода, но очень много было. А так вот блоки самого кода без лишних заморочек:

var i = 0;

$(document).ready(function(){
	int = setInterval("BoxLoad(i)",500);
		
	$(".big").one("click",
		function () {
			id = $(this).attr("id");
			loader(id);
		}
	);
	
	$("#blog_c").click(
		function () {
	 		$("#blog").trigger("click");
		}
	);

	$("#ask").toggle(
		function () {
			$("#ask_form").show();
		},function () {
			$("#ask_form").hide();
		}
	);

});

function loader(id){
	blogstatus = $("#blog_page").hasClass("active");
		
	if($("#"+id).hasClass("active")){
		close(id);
	}else{
		$("#"+id).addClass("active");
		window.location.hash = id;
						
		if(id != "blog"){
			if(blogstatus == "true" || blogstatus == true){
				$("#blog").removeClass("active");
				$("#blog_page").removeClass("active");	
							
				$("#blog_c").delay(200).fadeOut(500); 
				$("#blog_page").delay(200).animate({ marginRight: "-=540px",}, 1000, 
					function (){
						$("#blog_page").hide();
					}
				);
								
				$("#blog .description").html("blog");
			}				
			
			$("#"+id).siblings().fadeOut(500);
						
			if(id == "global"){
				left = "-=50px";
				up = "-=240px";
			}else if (id == "technologies"){
				left = "-=157px";
				up = "-=240px";
			}else if (id == "solutions"){
				left = "-=264px";
				up = "-=240px";
			}
			
			$("#"+id).animate({ marginLeft: left,}, 1000 ).delay(300).animate({ marginTop: up,}, 1000, 
				function(){ 
					$("#"+id+"_page").delay(200).fadeIn(500); 
					$("#"+id+"_d").html("back");  
					$("#"+id+"_c").delay(200).fadeIn(500); 
					$("#"+id).css("position","fixed");
					
					$("#"+id).one("click",
						function () {
							loader(id);
						}
					);
					
				}
			);				
		}else{
			$("#blog_page").show().addClass("active");
			$("#blog_page").delay(200).animate({ marginRight: "+=540px",}, 1000, 
				function (){
					$("#blog .description").html("close");
					$("#blog_c").delay(200).fadeIn(500);
					
					$("#blog").one("click",
						function () {
							loader("blog");
						}
					);
				}
			);			
		}
	}
}

function close(id){
	if(id != "blog"){		
		if(id == "global"){
			left = "+=50px";
			up = "+=240px";
		}else if (id == "technologies"){
			left = "+=157px";
			up = "+=240px";
		}
		else if (id == "solutions"){
			left = "+=264px";
			up = "+=240px";
		}
		
		$("#"+id+"_page").delay(200).fadeOut(500,
			function(){
				$("#"+id+"_c").delay(200).fadeOut(500);
				$("#"+id).animate({ marginLeft: left,}, 1000 ).delay(300).animate({ marginTop: up,}, 1000,
					function(){
						$("#"+id).css("position","");
						$("#"+id+"_d").html(id);
						$("#boxes div").fadeIn(500);
					}
				);
				
				$("#"+id).one("click",
					function () {
						loader(id);
					}
				);
			}
		);
	}else{
		$("#blog_c").delay(200).fadeOut(500); 
		$("#blog_page").delay(200).animate({ marginRight: "-=540px",}, 1000, 
			function (){
				$("#blog_page").hide();
			}
		);
		
		$("#"+id).one("click",
			function () {
				loader(id);
			}
		);
						
		$("#blog .description").html("blog");
	}
	
	$("#"+id).removeClass("active");
	$("#blog_page").removeClass("active");	
	window.location.hash = "";
}

function displayImages(data) {																																   
	var iStart = Math.floor(Math.random()*(11));	

	var iCount = 0;								

	var htmlString = "<ul>";					

	$.each(data.items, function(i,item){
							
		if (15 > iCount) {
		
		var sourceSquare = (item.media.m).replace("_m.html", "_s.html");		
		
		htmlString += '<li><a href="' + item.link + '" target="_blank">';
		htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
		htmlString += '</a></li>';
		}
		
		iCount++;
	});		

	$('#flickr').html(htmlString + "</ul>");
}

function BoxLoad() {
	var box = $('#boxes div').length;
	if (i >= box) {
		var hash = window.location.hash.substr(1);
		if(hash != ""){
	 		$("#"+hash).trigger("click");
	 		$("#hider").hide();
		}else{
			$("#hider").hide();
		}
		
		clearInterval(int);
	}

	$('#boxes div:hidden').eq(0).fadeIn(500);

	i++;
}

Код самой кнопки:

<div class="box big" id="blog" style="background-color:#38509e;width:50px;height:20px;display:none; margin-left:330px;margin-top:20px">
<a title="solutions">
<span class="description" id="blog_d">contacts</span>
</a>
</div>
	    	
<div class="box big" id="blog" style="background-color:#38509e;width:50px;height:20px;display:none; margin-left:330px;margin-top:70px">
<a title="solutions">
<span class="description" id="blog_d">why?</span>
</a>
</div>

Содержимое и действие после нажатия кнопки:

<div id="solutions_page" style="display:none; overflow:auto; height:auto;" class="page" >

dfsdfsdfsdf

</div>

Western,
Пожалуйста, локализуйте проблему!

Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно.

И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему.

Спасибо.

P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting

Вроде я все правильно заполнил в предыдущем посте. Спасибо ребята за отклик. надеюсь на вашу поддержку

Western,
можно проблему изложить короче? а пока в вашем коде повтор id работать будет только с первым id. id должен быть уникальным!!! на странице

Если вы заметили, то есть только один blog. Я копировал тот же код, но для id blog2, но почему то не работало. А так проблема думаю ясна, код ведь перед глазами...

Так что народ?

проблема всё таже дайте ясный короткий код, нерабочий пример получите ответ.
а пока у народа рябит в глазах от кода

Или ссылку на действующий макет с пояснениями куда жать (скрипт вынесите на страницу или дайте ссылку