Problema com Código JavaScript/PHP/Ajax

Front-end
#1

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:

[code]//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');
    });

});

[/code]

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 !!!

#2