2012-01-11 7 views
0

どうやって?だから私はこの問題を持っている、私は把握することはできません。NEXTGENギャラリーの説明を説明の代わりにPrettyPhoto jqueryプラグインに入れる方法

私はWordPressを使用しており、NextGenギャラリー(最新の日付2012-01-11)とPrettyPhoto jqueryプラグイン(最新の日付2012-01-11)がありますが、両方とも完璧に動作していますが、 PrettyPhotoプラグインを使用して開いているすべての画像の下にあるそれぞれのNextGenギャラリーの説明を参照してください。

$ galleryは私たちが必要とするすべてのものを保持していますが、NextGenフォルダにあります。mysql SELECTを書いて、データベースからすべてを取り出してから、もう一度、分かりませんここで適切なループを行う方法。ここで

はリンクです:http://sinergijait.lt/alex/hittoak/photo-gallery/

は、ここで私はheader.phpの中で使用prettyphotoスクリプトです:

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function(){ 
     $("a[rel^='prettyPhoto']").prettyPhoto({ 
      animation_speed: 'fast', /* fast/slow/normal */ 
      slideshow: 5000, /* false OR interval time in ms */ 
      autoplay_slideshow: false, /* true/false */ 
      opacity: 0.80, /* Value between 0 and 1 */ 
      show_title: true, /* true/false */ 
      allow_resize: true, /* Resize the photos bigger than viewport. true/false */ 
      default_width: 500, 
      default_height: 344, 
      counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */ 
      theme: 'pp_default', /* light_rounded/dark_rounded/light_square/dark_square/facebook */ 
      horizontal_padding: 20, /* The padding on each side of the picture */ 
      hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */ 
      wmode: 'opaque', /* Set the flash wmode attribute */ 
      autoplay: true, /* Automatically start videos: True/False */ 
      modal: false, /* If set to true, only the close button will close the window */ 
      deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */ 
      overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */ 
      keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */ 
      changepicturecallback: function(){}, /* Called everytime an item is shown/changed */ 
      callback: function(){}, /* Called when prettyPhoto is closed */ 
      ie6_fallback: true, 
      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> \ 
              <p class="pp_description"></p> \ 
              {pp_social} \ 
              <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>', 
      gallery_markup: '<div class="pp_gallery"> \ 
           <a href="#" class="pp_arrow_previous">Previous</a> \ 
           <div> \ 
            <ul> \ 
             {gallery} \ 
            </ul> \ 
           </div> \ 
           <a href="#" class="pp_arrow_next">Next</a> \ 
          </div>', 
      image_markup: '<img id="fullResImage" src="{path}" />', 
      flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>', 
      quicktime_markup: '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>', 
      iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>', 
      inline_markup: '<div class="pp_inline">{content}</div>', 
      custom_markup: '', 
      social_tools: '<div class="pp_social"><div class="need_gallery_desc_here" style="color:black"><?php echo 'need_gallery_desc_here' ?></div></div>' 
     }); 
    }); 
</script> 

あなたはprettyPhotoでそれを見ることができ、デフォルトでは場所がsocial_toolsブロックです:

social_tools: '<div class="pp_social"><div class="need_gallery_desc_here" style="color:black"><?php echo 'need_gallery_desc_here' ?></div></div>' 

ですから、基本的には、$ galleryの中の説明(データベースの 'galdesc'列)を抜き出す必要があります。最初のものが可能です)、そしてそのギャラリーのすべてのprettyPhoto画像にギャラリーの説明を表示するループを作成します。

あまりにも複雑ではないと思いますが。前もって感謝します。

よろしくお願いいたします。

答えて

0

画像に説明を追加するには、title属性を使用します。

<ul class="gallery clearfix"> 
<li><a href="images/fullscreen/1.JPG?lol=lol" rel="prettyPhoto[gallery1]" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a> 
</li> 
</ul> 

たとえば、data-desc属性の説明をパーソナライズすることができます。

<a href="" rel="fotos[galeria]" data-desc="Description">Examinar en Mapa</a> 

そして、かなりの写真の源にあなたがこの行に

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).attr('data-desc')) ? $(n).attr('data-desc') : ""; }) : $.makeArray($(this).attr('data-desc')); 

を変更する必要が、これは

を役に立てば幸い