How to display more text below large gallery image? « Support Forum | Kriesi.at

Support Forum » Abundance

How to display more text below large gallery image?

4 posts from 3 voices

Started 11 months ago by aricci
Latest reply from Nick
This topic is not resolved

Tags:

aricci
Member

Hi,
I'm using the Adundance theme. How can I display more text at the bottom of an enlarged gallery image but not below the thumbnail? It already displays the 'Title' text from the media library but I also need additional text and would like it to be styled differently from the title. Can the description be displayed? If possible I'd also like all that text to display in the text box that pops up when you hover over the thumbnail, but I think only the title text shows there, right?
Thanks!

Posted 11 months ago #
Dude
Dude

Hi!

Afaik Abundance supports the title and description field. The description is used as alt text of an image and will appear in the tooltip box which appears when you hover over an image.

Regards,
Peter

Posted 10 months ago #
aricci
Member

Hi Peter,

In a *gallery* the caption and description don't appear anywhere. The thumbnail hover tooltip shows the title and the enlarged image shows the alt text above (in the black background) and the title text below (on the white popup background). Can I get the description to be displayed below the title in the enlarged image or move the alt text down below the title?

Thanks

Posted 10 months ago #

Nick
Moderator

Hi Aricci,

I apologize for the delay in answering you.

This is going to be a two part edit. You will first need to find the jquery.prettyPhoto.js file located in the js/prettyPhoto folder within your theme. Make a copy of the jquery.prettyPhoto.js file in case a mistake is made so that you can use it as a backup.

Then open the jquery.prettyPhoto.js and find the following on line 9:

<div class="ppt">&nbsp;</div> \

What you are going have to do, is cut (ctrl-x on Windows) the code above, then paste it (ctrl-v) right *after* the following code which is on line 33, just below in the same jquery.prettyPhoto.js file.

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

When you are finished with moving the line of code described above, the code below is how jquery.prettyPhoto.js should look from line 8 to 35:

(function($){$.prettyPhoto={version:'3.1.3'};$.fn.prettyPhoto=function(pp_settings){pp_settings=jQuery.extend({animation_speed:'fast',slideshow:5000,autoplay_slideshow:false,opacity:0.80,show_title:true,allow_resize:true,default_width:500,default_height:344,counter_separator_label:'/',theme:'pp_default',horizontal_padding:20,hideflash:false,wmode:'opaque',autoplay:true,modal:false,deeplinking:true,overlay_gallery:true,keyboard_shortcuts:true,changepicturecallback:function(){},callback:function(){},ie6_fallback:true,markup:'<div class="pp_pic_holder"> \
      <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="pp_description"></p> \
           <div class="ppt">&nbsp;</div> \
           <div class="pp_social">{pp_social}</div> \
           <a class="pp_close" href="#">Close</a> \

Now save the jquery.prettyPhoto.js file.

Part 2.

Add the following code to the Quick CSS box in Abundance theme options, under the Styling tab:

div.pp_default .pp_description{font-size:12px;font-weight:700;line-height:14px;margin:5px 50px 5px 0}
div.pp_default .pp_content .ppt{color:#777;font-size:11px;font-weight:700;text-indent:80px;line-height:14px;margin:15px 0px 0px 0}

You can change the text-indent as well as other options in the two lines above to alter the styling. The first line will change the way the title is displayed , and the second line will alter the styling of the Alternate field below it.