PrettyPhoto by the folks over at No Margin for Errors has been my go-to lightbox tool for a long time. I use it on most of the WordPress themes I develop. One thing that has always bothered me though, was that I found the placement of the text information in the popup counter-intuitive.
By default PrettyPhoto places whatever value is in the image’s ALT tag as a title across the top of the popup window, and it uses the contents of the link’s TITLE tag as the description under the photo. Now, common SEO practice is to use descriptive text and keywords in all your images ALT tags. In my opinion, PrettyPhoto’s default behavior encourages you to sacrifice your SEO best practices to get information to display correctly in the popup window. So I wanted it to behave differently.
I went looking for a solution and couldn’t find anything online about it specifically. Some folks had posted the same question on a few forums, but I didn’t find any answers. After some more digging on my own, it turns out to be pretty simple to swap the information’s positions. When you initiate PrettyPhoto in jQuery, one of the options is to tell photo the markup you want to use for your popup. I found that I just had to switch a pair of class names in that code, specifically the .ppt and .pp_description classes. Once I did that, the PrettyPhoto script that inserts the information would then behave how I wanted.
Original Markup
<div class="ppt"> </div> (title above the image) <p class="pp_description"></p> (description below the image)
After Swapping the Classes in the Markup
<div class="pp_description"> </div> (title above the image) <p class="ppt"></p> (description below the image)
It’s probably the solution the developer intended. It doesn’t require mucking around in any of the PrettyPhoto javascript. Here’s a look at the whole block of text I use to get PrettyPhoto working – and working the way I want. I hope this helps. You’re SEO consultant will appreciate it!
jQuery(document).ready(function($) {
// prettyPhoto $("a[href$='.png'],a[href$='.jpg'],a[href$='.jpeg'],a[href$='.tif'],a[href$='.gif']").not("a[target='_blank']").prettyPhoto({
theme: 'light_square',
deeplinking: false,
social_tools: false,
markup: '<div class="pp_pic_holder"> \
<div class="pp_description"> </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> \
<div class="pp_hoverContainer"> \
<a class="pp_next" href="#">next</a> \
<a class="pp_previous" href="#">previous</a> \
</div> \
<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="ppt"></p> \
<div class="pp_social">{pp_social}</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>',
});
});