Bonjour ,
j'ai repris le tuto sur le portfolio en grille , simplement ayant beaucoup de création et ne voulant pas que la page prenne trop de temps à charger ( j'ai souvent 5/6 images en 720p dans le slider de chaque créations ) , j'ai mis simplement les thumbnails et quand on affiche une création ça fait une requette ajax pour pas charger toutes les autres .

J'ai un problème assez simple en soit c'est que j'aimerais rajouter un #nom-de-la-creation dans le lien , pour que les gens puissent partager quelque chose ( mettant A veut montrer un truc çà B , c'est plus simple d'envoyer un truc du genre lien.com/portfolio#creation que de dire 2 ème colonne création du bas ^^ ) .

Sauf que je n'ai pas du tout trouver comment faire.

Mes créations sont sous cette forme :

<li class="item thumb interactive">
                                    <figure>

                                        <div class="icon-overlay icn-link">
                                            <a class="portfolio-link" href="single-portfolio.php"><img src="assets/images/post7.jpg" alt=""></a>
                                        </div><!-- /.icon-overlay -->

                                        <figcaption class="bordered no-top-border">
                                            <div class="info">
                                                <h4><a class="portfolio-link" href="#single-portfolio">Appscreen Dashboard</a></h4>
                                                <p>Interactive</p>
                                            </div><!-- /.info -->
                                        </figcaption>

                                    </figure>
                                </li><!-- /.item -->

et mon jquery :

$(document).ready(function(){
    $('#portfolio a').click(function(){
        link=$(this).attr('href');
        $.ajax({
            url: link,
            cache:false,
            success:function(html){
                load_work(html);
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                alert(textStatus+errorThrown+XMLHttpRequest);
            }
        })
        return false;
    });
    function load_work(data){
        $('#portfolio-post').fadeOut(500,function(){
            $('#portfolio-post').empty();
            $('#portfolio-post').append(data);
            $('#portfolio-post').fadeIn(500);
        });
    }

});

Merci d'avance pour votre aide

1 réponse


Romano83
Réponse acceptée

Il faut que tu regardes du côté de l'AIP History.pushState de javascript.
Regarde par ici pour un tuto