How to execute Javascript for (not in) Ajax response?

I’m creating a one page responsive portfolio site in WordPress based on the Foundation framework by Zurb. I’m not happy with the Clearing lightbox included in the framework, so I’m trying to include a different lightbox for images/videos (currently using Magnific Popup [http://dimsemenov.com/plugins/magnific-popup/documentation.html], but I’ve tried a few different plugins, including Fancybox, Colorbox, and the Responsive Lightbox plugin from dFactory).

I have a custom post type called Projects. All of the projects get displayed on the one page website, and when the user clicks on a project to see more information, the_content gets called and loaded into a div dynamically via Ajax (similar to the way portfolio projects work in the SimpleKey WordPress theme [http://themeforest.net/item/simplekey-one-page-portfolio-wordpress-theme/3729774]).

Read More

I can get the lightbox to work on the single.php page if I manually navigate to it (ex. http://www.aisle7Studios/project/project-name/), however when I’m on the main one-page site, I can’t get the lightbox to work. I know this is because the content is being loaded dynamically via Ajax, but I can’t seem to get it to work. Ideas?

This is the Javascript that loads the portfolio posts, located in header.php

<!-- Items for loading portfolio posts without refreshing -->
<script type="text/javascript">
    $(document).ready(function(){
    $.ajaxSetup({cache:false});
    $("h6 a").click(function(){
        var post_id = $(this).attr("rel")
        $("#singlePortfolioPost").html("loading...");
        $("#singlePortfolioPost").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/portfolio-item/",{id:post_id});
        return false;
    });
});
</script>
<!-- End Portfolio Post load-->

This is the div where the post content gets loaded, located on the Portfolio page.

<div id="singlePortfolioPost" class="large-12">

</div> <!-- .singlePortfolioPost -->

The content loads fine, and upon examining the code, I can see that the plugins that automatically add rel=”lightbox” to anchor tags work the way they’re supposed to. However the lightbox plugins just don’t work…they simply take me to the media file I clicked on.

Related posts

Leave a Reply