How can I use the PrettyPhoto plug-in without the details area?

I have bee开发者_运维百科n using the PrettyPhoto plug-in and for some reason I can't disable the details that it produces.

How do I get rid of the details that shows 1/2 under the video?

I tried looking at the documentation and nothing that I've seen shows how to hide that.

I've tried this in my css:

.pp_nav{display:none;}

but no avail!

I had the same problem. After applying CSS rules to hide "details" block, main content area stays the same height. It's because of this line:

pp_contentHeight = height + detailsHeight;

in jquery.prettyPhoto.js file.

If we remove "+ detailsHeight", main content area height will have normal height, as it should have without "details" block.

You can try to set this CSS:

.currentTextHolder {
  display:none;
}

That will hide the .currentTextHolder element.

I also had a similar problem. My solution was to Change the Markup!

Find & Delete:

<p class="pp_description"></p> \

I'm using the following:

$("a[rel^='prettyPhoto']").prettyPhoto({
 show_title: false,
 markup: '<div class="pp_pic_holder"> \
 <div class="ppt">&nbsp;</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> \
         <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>',
});

i remove the following: detailsHeight+=$pp_details.height();detailsHeight=detailsHeight<=34?36:detailsHeight;$pp_details.remove();

in the .js and it works. i have a little margin-bottom and margin-top left but to fade it out was no problem