using this lightbox jquery plugin:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
$("a[rel^='prettyPhoto']").prettyPhoto({markup: '<div class="pp_pic_holder"> <div class="ppt"> </div> <div class="pp_top"> <div class="pp_left"></div> <div class="pp_middle"></div> <div class="pp_right"></div> </div> <div class="pp_content_container"> <div class="pp_left"> <div class="pp_right"> <div class="pp_content"> <div class="pp_loaderIcon"></div> <div class="pp_fade"> <a href="#" class="pp_expand" title="Expand the image">Expand</a> <a class="pp_next" href="#">next</a> <a class="pp_previous" href="#">previous</a> <div id="pp_full_res"></div> <div class="pp_details"> <div class="pp_nav"> <a href="#" class="pp_arrow_previous">Previous</a> <p class="currentTextHolder">0/0</p> <a href="#" class="pp_arrow_next">Next</a> </div> <p class="pp_description"></p> <div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href='+location.href+'&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div> <div class="pp_social"> <!-- BNL_Gallery_Bottom --> <div id="div-gpt-ad-1416042025558-3" style="width:728px; height:90px;"> <script type="text/javascript"> googletag.cmd.push(function() { googletag.display("div-gpt-ad-1416042025558-3"); }); </script> </div> </div> <a class="pp_close" href="#">Close</a> </div> </div> </div> </div> </div> </div> <div class="pp_bottom"> <div class="pp_left"></div> <div class="pp_middle"></div> <div class="pp_right"></div> </div> </div> <div class="pp_overlay"></div>',social_tools: '<div class="pp_social"></div><!-- BNL_Gallery_Bottom --><div id="div-gpt-ad-1416042025558-3" style="width:728px; height:90px;"><script type="text/javascript">googletag.cmd.push(function() { googletag.display("div-gpt-ad-1416042025558-3"); });</script></div>',changepicturecallback: function(){ googletag.cmd.push(function() { googletag.display("div-gpt-ad-1416042025558-3"); }); _gaq.push(['_trackPageview', location.href]); }}); });
you will need to use asynchronous google analytics code like:
<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
example: http://www.purepixel.co.uk/2011/10/tracking-javascript-lightbox-and-ajax-page-views-with-google-analytics/