blueimpギャラリー内に説明を追加

Question

私は​​を使用して画像ギャラリーにライトボックスを追加しています。したがって、画像のサムネイルをクリックすると、より大きなバージョンの画像を含むライトボックスが起動されます。

ライトボックスの各スライドに説明テキストとボタンを追加したいのですが、問題を働かせる。私が追加したプレースホルダの説明は表示されません。

これまで私がこれまで持っていたことは次のとおりです。

HTML：

<div id="blueimp-gallery" class="blueimp-gallery"> 
    <!-- The container for the modal slides --> 
    <div class="slides"></div> 
    <!-- Controls for the borderless lightbox --> 
    <h3 class="title"></h3> 
    <p class="description"></p> 
    <a class="prev">‹</a> 
    <a class="next">›</a> 
    <a class="close">×</a> 
    <a class="play-pause"></a> 
    <ol class="indicator"></ol> 

    <div class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" aria-hidden="true">&times;</button> 
        <h4 class="modal-title"></h4> 
       </div> 
       <div class="modal-body next"></div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default pull-left prev"> 
         <i class="glyphicon glyphicon-chevron-left"></i> 
         Previous 
        </button> 
        <button type="button" class="btn btn-primary next"> 
         Next 
         <i class="glyphicon glyphicon-chevron-right"></i> 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<div id="links"> 

<div class="row prints"> 
    <div class="col-md-4"> 
    <div class="thumbnail">  
     <div class="caption"> 
     <a href="http://farm3.staticflickr.com/2843/10406026526_4cd1b56391.jpg" title="Ballooning" data-description="This is a banana." data-gallery> 
      <img src="http://farm8.staticflickr.com/7389/10404414563_0914b69e0e.jpg" alt="Ballooning"> 
     </a> 
     <h3>Ballooning</h3> 
     <p>from $18.00</p> 
     <p><a href="#" class="btn btn-YLP">Find out more</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail">  
     <div class="caption"> 
     <a href="http://farm6.staticflickr.com/5547/10406009404_c197c2221b.jpg" title="Clearing" data-description="This is a apple." data-gallery> 
      <img src="http://farm6.staticflickr.com/5490/10404414523_745ea3065d.jpg" alt="Clearing"> 
     </a> 
     <h3>Clearing</h3> 
     <p>from $18.00</p> 
     <p><a href="#" class="btn btn-YLP">Find out more</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail">  
     <div class="caption">    
     <a href="http://farm6.staticflickr.com/5510/10406026066_7f95a075ee.jpg" title="Sky/Sea" data-description="This is a cherry." data-gallery> 
      <img src="http://farm4.staticflickr.com/3769/10404249505_d767f7c420.jpg" alt="Sky/Sea"> 
     </a> 
     <h3>Sky/Sea</h3> 
     <p>from $18.00</p> 
     <p><a href="#" class="btn btn-YLP">Find out more</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail">  
     <div class="caption">   
     <a href="http://farm4.staticflickr.com/3678/10406009004_5c625e2028.jpg" title="Lights" data-description="This is a grapefruit." data-gallery> 
      <img src="http://farm3.staticflickr.com/2814/10404249395_9e4cae5bc7.jpg" alt="Lights"> 
     </a> 
     <h3>Lights</h3> 
     <p>from $18.00</p> 
     <p><a href="#" class="btn btn-YLP">Find out more</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail">  
     <div class="caption">   
     <a href="http://farm6.staticflickr.com/5538/10406019875_8424fbee11.jpg" title="Silhouettes" data-description="This is a orange." data-gallery> 
      <img src="http://farm8.staticflickr.com/7343/10404255766_d808d1902d.jpg" alt="Silhouettes"> 
     </a> 
     <h3>Silhouettes</h3> 
     <p>from $18.00</p> 
     <p><a href="#" class="btn btn-YLP">Find out more</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail">  
     <div class="caption">   
     <a href="http://farm4.staticflickr.com/3682/10406009134_3b666324ff.jpg" title="Sway" data-description="This is a kiwi." data-gallery> 
      <img src="http://farm6.staticflickr.com/5516/10404249545_7efb481042.jpg" alt="Sway"> 
     </a> 
     <h3>Sway</h3> 
     <p>from $18.00</p> 
     <p><a href="#" class="btn btn-YLP">Find out more</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail">  
     <div class="caption">   
     <a href="http://farm8.staticflickr.com/7425/10406019935_1def1e0c09.jpg" title="Sunset" data-description="This is a grape." data-gallery> 
      <img src="http://farm3.staticflickr.com/2810/10404249465_0124b7f3e5.jpg" alt="Sunset"> 
     </a> 
     <h3>Sunset</h3> 
     <p>from $18.00</p> 
     <p><a href="#" class="btn btn-YLP">Find out more</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail">  
     <div class="caption">   
     <a href="http://farm6.staticflickr.com/5532/10406009324_4cd1b56391.jpg" title="Lighthouse" data-description="This is a strawberry." data-gallery> 
      <img src="http://farm6.staticflickr.com/5543/10404240054_6261498220.jpg" alt="Lighthouse"> 
     </a> 
     <h3>Lighthouse</h3> 
     <p>from $18.00</p> 
     <p><a href="#" class="btn btn-YLP">Find out more</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail">  
     <div class="caption">   
     <a href="http://farm4.staticflickr.com/3747/10406026506_6a4dbf2df0.jpg" title="Slabs"data-description="This is a pineapple." data-gallery> 
      <img src="http://farm8.staticflickr.com/7345/10404249655_7512bf6565.jpg" alt="Slabs"> 
     </a> 
     <h3>Slabs</h3> 
     <p>from $18.00</p> 
     <p><a href="#" class="btn btn-YLP">Find out more</a></p> 
     </div> 
    </div> 
    </div>   
</div> 
</div> 

CSS：

.blueimp-gallery > .description { 
    position: absolute; 
    top: 30px; 
    left: 15px; 
    color: red; 
    display: none; 
} 

.blueimp-gallery-controls > .description { 
    display: block; 
} 

JS：

blueimp.Gallery(
    document.getElementById('links'), 
    { 
     onslide: function (index, slide) { 
      var text = this.list[index].getAttribute('data-description'), 
       node = this.container.find('.description'); 
      node.empty(); 
      if (text) { 
       node[0].appendChild(document.createTextNode(text)); 
      } 
     } 
    } 
); 

そして、私の体で（gallery.js私はJSの上に追加したファイルです。 ）：

<script src="//code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="lib/fancybox/jquery.fancybox.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> 
    <script src="js/bootstrap-image-gallery.min.js"></script> 
    <script src="js/gallery.js"></script> 

私が間違ってしまった箇所のポインタは大変ありがとう！

Answer 1

  blueimp.Gallery(
      document.getElementById('links'), { 
       onslide: function (index, slide) { 
       var text = this.list[index].getAttribute('data-description'), 
        node = this.container.find('.description'); 
       node.empty(); 
       if (text) { 
        node[0].appendChild(document.createTextNode(text)); 
       } 
       } 
      }); 

http://jsfiddle.net/2B3bN/25/

それが働い一つであり、この1を見てください。 あなたは私のものと比べて間違ったことをちょうど確認してください。

Answer 2

最初のリンクのみのために働くの使用

document.getElementById('links').getElementsByTagName('a') or .children() 

Answer 3

...

私はそれは、データの記述にHTMLで動作するように取得しようとしています。私はそれを働いて、decsriptionのテキストを引っ張っているが、どのようにリンクとして動作するようにHTMLを解析するのですか？ここ

http://jsfiddle.net/LXp76/

<a href="http://lorempixel.com/200/200/" title="This is the title element 1" data-gallery="1" data-description="This is a description.<a href='http://google.com' target='_blank' class='btn btn-warning'>This is link 1</a>"><img src="http://lorempixel.com/80/80/" alt="" ></a> 

それは、FancyBoxでの作業http://jsfiddle.net/yShjB/2/

が、私はむしろBlueImpギャラリーを使用します。..後半にあれば

Answer 4

申し訳ありませんが、私は実行する方法を見つけていますこれは、JSを変更するだけです。

blueimp.Gallery(
    document.getElementById('links'), 
    { 
     onslide: function (index, slide) { 
      var text = this.list[index].getAttribute('data-description'), 
       node = this.container.find('.description'); 
      node.empty(); 
      if (text) { 
       node[0].appendChild(document.createTextNode(text)); 
      } 
     } 
    } 
); 

blueimp.Gallery(
    document.getElementById('links'), 
    { 
     onslide: function (index, slide) { 
      var text = this.list[index].getAttribute('data-description'), 
       node = this.container.find('.description'); 
      node.empty(); 
      if (text) { 
       node[0].innerHTML = text; 
      } 
     } 
    } 
); 

Answer 5

あなたはa要素上の任意の必要なデータを渡し、そのギャラリーにそれを表示することができます。これまで。 私は答えを見つけようと多くの時間を費やしますので、ここでそれを残します。

HTML：：

<div id="blueimp-gallery" class="blueimp-gallery"> 
    <div class="slides"></div> 
    <h3 class="title"></h3> 
    <p class="description"></p> 
    <p class="example"></p> 
    ... 
</div> 
------ 
<div id="links"> 
    <a href="images/banana.jpg" title="Banana" data-description="This is a banana." data-example="Additional data">Banana</a> 
    <a href="images/apple.jpg" title="Apple" data-description="This is an apple." data-example="Additional data">Apple</a> 
</div> 

JS：ここ は一例です

document.getElementById('links').onclick = function (event) { 
    event = event || window.event; 
    var target = event.target || event.srcElement, 
    link = target.src ? target.parentNode : target, 
    options = { 
     index: link, event: event, 
     onslide: function (index, slide) { 

     self = this; 
     var initializeAdditional = function (index, data, klass, self) { 
      var text = self.list[index].getAttribute(data), 
      node = self.container.find(klass); 
      node.empty(); 
      if (text) { 
      node[0].appendChild(document.createTextNode(text)); 
      } 
     }; 
     initializeAdditional(index, 'data-description', '.description', self); 
     initializeAdditional(index, 'data-example', '.example', self); 
     } 
    }, 
    links = this.getElementsByTagName('a'); 
    blueimp.Gallery(links, options); 
}; 

CSS：は あなたはそれをリファクタリングする.scssを使用することができますが、それだけで、たとえばです

.blueimp-gallery > .description, .blueimp-gallery > .example { 
    position: absolute; 
    top: 30px; 
    left: 15px; 
    color: #fff; 
    display: none; 
} 
.blueimp-gallery-controls > .description, .blueimp-gallery-controls > .example { 
    display: block; 
}