Hinzufügen von Beschreibungen in einer blueimp Galerie

Question

Ich benutze eine BlueImp Gallery, um Lightboxen zu meiner Bildergalerie hinzuzufügen. Wenn Sie also auf ein Bildminiaturbild klicken, wird ein Leuchtkasten mit einer größeren Version des Bildes etc. gestartet.

Ich möchte auch einen beschreibenden Text und eine Schaltfläche zu jeder Folie des Leuchtkastens hinzufügen, aber ich habe Probleme machen es funktioniert. Es zeigt nicht die Platzhalter Beschreibungen, die ich hinzugefügt habe.

Hier ist, was ich bisher habe;

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

Und in meinem Körper (gallery.js ist die Datei, wo ich die oben JS hinzugefügt haben):

<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> 

Irgendwelche Hinweise darauf, wo ich falsch gelaufen bin, würden sehr geschätzt werden!

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/

einen Blick auf dieses Konto haben, ist es eine Arbeitsgruppe ein. Überprüfen Sie einfach, was Sie im Vergleich zu mir falsch gemacht haben.

Answer 2

Verwendung

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

Answer 3

, die nur für den ersten Link funktioniert ...

Ich versuche es mit HTML in der Datenbeschreibung zur Arbeit zu kommen. Ich habe es funktioniert und ziehe den Beschreibungstext, aber wie parst du den HTML, um als ein Link zu arbeiten?

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> 

hier ist es mit FancyBox arbeiten, http://jsfiddle.net/yShjB/2/

aber ich würde viel lieber die BlueImp Gallery verwenden ..

Answer 4

Sorry, wenn zu spät, aber ich finde einen Weg zu tun Ändern Sie nur den JS von:

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

dazu:

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

Sie können alle benötigten Daten auf a Element übergeben, und es dann in der Galerie anzuzeigen. Ich verbringe viel Zeit damit, eine Antwort zu finden, also werde ich es hier lassen.Hier ist ein Beispiel:

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: Sie können .scss verwenden, um es zu Refactoring, aber es ist nur zum Beispiel

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