How to Integrate prettyPhoto with Post Images in your Wordpress Themes

Download prettyPhoto and set up book or directions structure
Head over to margins for-errors.com and download the plugin. one time you’ve got it we’re going to create a new book or directions structure for the plugin to make things simpler for us.

First let’s delete a few things we don’t need. In the images folder delete everything apart from the prettyPhoto folder and it’s contents. In the origin folder, delete the document xhr_response.html and index.html. Now move jquery.prettyPhoto.js from the js folder to the origin plugin folder and delete the js folder.

eventually, rename the folder to prettyPhoto and upload the folder to your theme’s book or directions, you probably currently have a js or scripts book or directions so upload to that, for this tutorial let’s presume it’s in your-theme/js.

Add the scripts to your theme
Before we burden up the plugin files in our topic we need to load jQuery. We’re going use the Google hosted type of jQuery using the method shared on cutting into into WordPress, so let’s add the snippet to our functions.php. 

if (!is_admin()) {
    add_action("wp_enqueue_scripts", "register_scripts", 11);
}
function register_scripts() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
    wp_enqueue_script('jquery');
   
    wp_register_script('prettyPhoto_script', (get_bloginfo('stylesheet_directory')."/js/prettyPhoto/jquery.prettyPhoto.js"));
    wp_enqueue_script('prettyPhoto_script');
    wp_register_script('customprettyPhoto_script', (get_bloginfo('stylesheet_directory')."/js/prettyPhoto/customprettyPhoto.js"));
    wp_enqueue_script('customprettyPhoto_script');
}

You might desire to address the benefits and disbenefits of using a CDN to assist jQuery. WordPress does ship with a copy of jQuery but utilising Google’s hosted type may benefit your site’s presentation. If you’re a topic scribe I would stick with using the transported type. ascertain out the consideration on another tutorial to help you make up your own mind.

You’ll observe we’ve supplemented another document called customprettyPhoto.js. This is where we’ll be making the plugin play pleasant with our post images and initialising it. So let’s create that document and put it in your prettyPhoto directory. OK, let’s initialise prettyPhoto.  

<script>
  $(document).ready(function(){
    $("a[class^='prettyPhoto']").prettyPhoto();
  });
</script>

We need to add a line of jQuery to add the needed prettyPhoto class prettyPhoto to the anchor tags that enclose our mail images. Since we’re talking jQuery let’s use it to complete this. Add the following right after $(document).ready(function(){ where we make sure the sheet is loaded.

$('.entry-content a').has('img').addClass('prettyPhoto');  

Replace .entry-content with anything class name or ID you’ve wrapped your mail content with and you should have effectively added the class to all connections that cover your mail images. If you had a look at the documentation for prettyPhoto you will see it states to use a rel attribute but rather than we’ve utilised a class. Doing so stops validation mistakes in our HTML because rel attributes can only have certain allowed values according to the HTML5 spec.

Next we want to endow prettyPhoto’s description choice. We have to overcome one small obstacle which is that prettyPhoto wants us to add name attributes to our anchor tags that will be used for the descriptions but WordPress adds names to likeness tags. To explain this we’ll compose a twosome lines of jQuery that will take the image name tag and set the same title on the anchor tag that wraps the image. 

$('.entry-content a img').click(function () {
    var desc = $(this).attr('title');
    $('.entry-content a').has('img').attr('title', desc);
});
 

Here we blaze a function when the client clicks on a mail likeness. We grab the image’s name tag and attach it to the anchor. This step makes it a allotment simpler for your theme’s users to add descriptions. If you desire to disable the functionality entirely just make sure to set each anchors name to be empty, if it’s totally missing, as in there isn’t even an empty title, prettyPhoto will just display “undefined” instead.

Add the prettyPhoto CSS to your topic
We need to add the CSS for prettyPhoto to the theme. Back to your functions.php document and add the following line to the top: 

wp_enqueue_style('prettyPhoto', get_bloginfo('stylesheet_directory').'/js/prettyPhoto/css/prettyPhoto.css');

Since we kept the images and CSS in their original folders and relative to each other as they were originally we don’t need to worry about broken images.

Let’s gaze at how to add captions and names that our prettyPhoto will use. Looking at the likeness overhead we can see the connection between the mail likeness alt tag and link title tag we can set when supplementing an likeness to a mail or page.