Aggiunta di descrizioni all'interno di una galleria blueimp

Question

Sto utilizzando uno BlueImp Gallery per aggiungere lightbox alla mia galleria di immagini. Quindi, quando si fa clic su una miniatura dell'immagine, viene avviata una lightbox con una versione più grande dell'immagine ecc.

Voglio aggiungere anche del testo descrittivo e un pulsante per ogni diapositiva del lightbox, ma sto avendo problemi a farlo funzionare. Non mostrerà le descrizioni dei segnaposto che ho aggiunto.

Ecco quello che ho finora;

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)); 
      } 
     } 
    } 
); 

e nel mio corpo (gallery.js è il file in cui ho aggiunto quanto sopra 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> 

Qualsiasi indicazione su dove ho sbagliato è molto apprezzata!

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/

Date un'occhiata a questo, si tratta di un lavoro. Controlla quello che hai fatto male rispetto al mio.

Answer 2

uso

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

Answer 3

che funziona solo per il primo anello ...

Sto cercando di farlo funzionare con l'HTML nel data-descrizione. L'ho fatto funzionare e ho tirato dentro il testo del decription, ma come si fa a far funzionare l'html come collegamento?

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> 

qui si sta lavorando con Fancybox, http://jsfiddle.net/yShjB/2/

ma io preferirei di gran lunga utilizzare la Galleria BlueImp ..

Answer 4

Scusate se a tardi, ma ho trovato un modo per farlo questo, cambia solo il JS da:

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)); 
      } 
     } 
    } 
); 

a questo:

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

È possibile passare tutti i dati necessari sul a elemento, e quindi visualizzare nella galleria. Trascorro molto tempo a cercare una risposta, quindi lo lascerò qui. Ecco un esempio:

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: È possibile utilizzare .scss per refactoring, ma è solo per esempio

.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; 
}