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]).
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.