Problema com Código JavaScript/PHP/Ajax

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

Topicos relacionados