Problema com Código JavaScript/PHP/Ajax

[Scalha 0]

Olá pessoal;

 

Estou trabalhando no código de uma galeria dinamica onde o link na pagina index.php chama o conteúdo de uma DIV via Load na página projetos.php e exibe em uma DIV na pagina index.php

 

Ao total são 12 links diferentes, para abrir 12 slides de projetos diferentes porém não estou conseguindo identificar a rota correta para fazer que cada link abra o slide correspondente ao seu projeto.

 

Seguem os codigos:

 

Código JavaScript/PHP/Ajax:

 

//CYCLE PROJECT
function load_cycle(){
	$('#slide_project').cycle({
 	    fx:     	'scrollHorz',
   	timeout: 	6000,
   	speed: 		500,
    slideExpr: 	'img',
 	    next: 		'#slide_project img',
 	    pager:  	'#nav_slide_project'
	});
	$("#slide_project").touchwipe({
       wipeLeft: 	function() { $('#slide_project').cycle("next"); },
       wipeRight: 	function() { $('#slide_project').cycle("prev"); },
       min_move_x: 300,
       min_move_y: 100000,
       preventDefaultEvents: true
});
}

function load_project(id) {
if ($("#pro_container").css('display')=='block') {
	$("#pro_container").hide();
	$('#loading').show();
} else {
	$("#pro_container").hide();
	$('#loading').slideDown();
	$.scrollTo('#sec_projects',700);
	$('#sec_project').slideDown(1000);
}
$("#pro_container").load("projetos.php #project_wrap_ajax", {id: id}, function(){
	$("#loading").hide();
	$("#pro_container").fadeIn();
	// CALL CYCLE
       load_cycle();
	//BUTTON CLOSE
	$('#btn_close').click(function() {
       	$('#pro_container').slideUp();
       	$('#slide_project').cycle('stop');
		window.location.hash = "#!"
       	return false;
   	});

   	// FB.XFBML.parse(document.getElementById('pro_container'));

});
}


$(document).ready(function(){


// CSS SWITCHER
$(".btn_white").click(function() {
	$("link[title=switch]").attr({href : "css/white.css"});
	return false;
});
$(".btn_black").click(function() {
	$("link[title=switch]").attr({href : "css/black.css"});
	return false;
});

// DEFAULTS
$('.caption').css('bottom','0px');

$('#pro_container').hide();

var l = window.location.href;

if (l.indexOf("#")!=-1){
	var l_elm = l.split("#");
	var id_p = l_elm[1];
	if (id_p!="!"){
		load_project(id_p);
		_gaq.push(['_trackEvent', 'project', 'view', id_p]);
	}
}


// CAPTIONS
$('.project_inner').hover(function() {
   	$(this).find('.caption').animate({'bottom':'45px'}, {duration:200});
   	$(this).find('img').animate({'bottom':'25px'}, {duration:200});
},
function() {
   	$(this).find('.caption').animate({'bottom':'0px'}, {duration:400});
   	$(this).find('img').animate({'bottom':'0px'}, {duration:400});
});

// 'SCROLL TO' PLUGIN
$(".project_inner").click(function(e){
	e.preventDefault();
	var id = $(this).attr('href').replace('#', ''); 
	$.scrollTo('#sec_projects',700);
	window.location.hash = $(this).attr('href');
	load_project(id);
	$('#slide_project').cycle('stop');
});
});

 

 

Código do Link na index.php:

 

<li class="project" style="background-color:#1799B9;">
  <a class="project_inner" href="#!projeto01" onclick="_gaq.push(['_trackEvent', 'project', 'view', 'projeto01']);return true;">
    <img src="images/projetos/thumb/01.jpg" alt="Projeto01" style="bottom: 0px; ">
       <div class="caption" style="bottom: 0px; ">
        <p>Projeto01<br><span>Nonono, nonono, nonono/span></p>
       </div>
  </a>
</li>

 

Div na pagina projetos.php que dever ser puxada via load para uma div na index.php

 

<div id="projeto01">  
    <a id="btn_close" href="index.php">CLOSE</a>
    <div id="slide_project" style="position: relative; overflow-x: hidden; overflow-y: hidden; ">
       <div id="nav_slide_project"><a href="#" class="">1</a><a href="#" class="">2</a><a href="#" class="">3</a><a href="#" class="">4</a><a href="#" class="">5</a></div>
    <img src="images/projetos/projeto01_01.jpg" alt="Projeto01" width="915" height="462" style="position: absolute; opacity: 1; width: 915px; height: 462px; z-index: 5; top: 0px; left: -915px; display: none; ">
    <img src="images/projetos/projeto01_02.jpg" alt="Projeto01" width="915" height="462" style="position: absolute; opacity: 1; width: 915px; height: 462px; z-index: 5; top: 0px; left: -915px; display: none; ">
    <img src="images/projetos/projeto01_03.jpg" alt="Projeto01" width="915" height="462" style="position: absolute; opacity: 1; width: 915px; height: 462px; z-index: 5; top: 0px; left: -915px; display: none; ">
    <img src="images/projetos/projeto01_04.jpg" alt="Projeto01" width="915" height="462" style="position: absolute; opacity: 1; width: 915px; height: 462px; z-index: 5; top: 0px; left: -915px; display: none; ">
    <img src="images/projetos/projeto01_05.jpg" alt="Projeto01" width="915" height="462" style="position: absolute; opacity: 1; width: 915px; height: 462px; z-index: 5; top: 0px; left: -915px; display: none; ">
    </div>

   <div id="project_description">
      <div id="project_description_txt">
      <h3>Projeto01</h3>
      <p>Projeto 01 - Nononono nonono nononono nonono nonononono nononono nononono nononono nonononono nonononono nonononononono nonono nonono nononono.</p>
   </div>
</div>

 

Quem puder dar uma luz agradeço muito !!!

[mauhru 0]

oi

 

Conseguimos resolver este problema?, Mas então eu também muito interessante para implementá-lo