blueimp gallery laden von dynamischen Inhalten

Habe ich erfolgreich umgesetzt Blueimp Gallery in meine Seite, und mit HTML5 data-Attribute in der Lage bin, um die lightbox zu arbeiten.

<a href="multimedia/3.jpg"
    data-gallery=""
    data-title="Caption"
    data-unique-id="3"
    data-thumbnail="multimedia/3.jpg"></a>

Ich mit diesem laden viele Bilder, und die Benutzer können Zyklus (Folie) zwischen Ihnen. Bilder können Kommentare enthalten, die mit Ihnen und verschiedenen Aktionen, die der Benutzer nehmen kann. Ich habe die Kommentar-box, um die Galerie mit

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <div class="comments"></div>
</div>

Ich bin mit der slide Ereignis, und ich möchte in der Lage sein, um den Kommentar zu aktualisieren box mit den entsprechenden Kommentaren für die Folie. Ich habe Probleme beim Zugriff auf die data-unique-id.

$("#blueimp-gallery").on('slide', function (event, index, slide) {
    console.log(event);
    console.log(index);
    console.log(slide);
});

Kann ich nicht finden unique-id hier überhaupt. ist es? oder gibt es einen anderen Weg, um pass diese Daten?

tut $(slide).data('unique-id') oder slide.data('unique-id') nicht funktionieren?

InformationsquelleAutor Andrew Brown | 2014-03-29

blueimp jquery

6

Hier ist die Arbeiten Demo,

Dein code sieht in Ordnung zu sein , nur benötigt, um Zugriff auf die data-unique-id - Attribut von den Elementen mit getAttribute und Sie sind gut zu gehen.

Fügen Sie diese Zeilen zu Ihrer js :
```
onslide: function (index, slide) {
       var unique_id = this.list[index].getAttribute('data-unique-id');
       console.log(unique_id); //your unique id
 }
```
- data-Attribute zugegriffen werden kann .data-Methode von jQuery statt getAttribute('data-unique-id").
- Ja , this.list[index] ist eine native javascript Objekt ,also ich bin mit getAttribute Einfache.
InformationsquelleAutor Aditya
2

Verwenden Sie den folgenden code, um Ihre Bedürfnisse
```
onslide: function (index, slide) {
  console.log(this.list[index]);
}
```
Demo
- Ich bin immer ein Uncaught TypeError: Cannot read property '0' of undefined. was ich sagen kann, Sie sind nicht mit ihm über das Jquery-plugin, und ich denke, das ist, was dieses Problem verursacht. wenn möglich würde ich gerne noch verwenden, das Jquery-plugin
- Könnten Sie bitte jsfiddle Sie Ihren code? Auf jeden Fall versuchen Sie zu trösten.log(das), um herauszufinden, wo zu finden die Daten.
InformationsquelleAutor cuhuak

Müssen Sie index parameter-Wert, um den Zugriff auf die anchor tag.

<script>
$(document).ready(function() {
    blueimp.Gallery(
        document.getElementById('links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery',
            carousel: true,
            onslide: function (index, slide) {
                //Callback function executed on slide change.
                var $anchor = jQuery('#links').find('a:eq(' + index + ')');
                console.log('unique-id value is : '  + $anchor.data('unique-id'));
            }
        }
    );
});

</script>

hier links ist die id des container-element, wo alle a-tags platziert werden.

Beispiel-Markup

<div class="links" id="links">
    <a href="http://farm6.static.flickr.com/5101/13539971585_6c655628e5_b.jpg" title="La finestra" data-gallery="" data-unique-id="tmp_1">
        <img src="http://farm6.static.flickr.com/5101/13539971585_6c655628e5_s.jpg">
    </a>
    <a href="http://farm8.static.flickr.com/7058/13535332874_e1ffe2f14c_b.jpg" title="ONE OF MY FAVORITE PLACES IN NORWAY :)" data-gallery="" data-unique-id="2">
        <img src="http://farm8.static.flickr.com/7058/13535332874_e1ffe2f14c_s.jpg">
    </a>
    <a href="http://farm3.static.flickr.com/2832/13535035223_a31eb2c8a8_b.jpg" title="ghost stories and other urban legends" data-gallery="" data-unique-id="3">
        <img src="http://farm3.static.flickr.com/2832/13535035223_a31eb2c8a8_s.jpg">
    </a>
    <a href="http://farm4.static.flickr.com/3685/13539935244_3540cf2bfe_b.jpg" title="Esa Hora Del da" data-gallery="" data-unique-id="tmp_4">
        <img src="http://farm4.static.flickr.com/3685/13539935244_3540cf2bfe_s.jpg">
    </a>
    <a href="http://farm4.static.flickr.com/3760/13534581825_b32103f379_b.jpg" title="Jalapeo" data-gallery="" data-unique-id="5">
        <img src="http://farm4.static.flickr.com/3760/13534581825_b32103f379_s.jpg">
    </a>
    <a href="http://farm4.static.flickr.com/3705/13541202353_dc22b7de3b_b.jpg" title="Lady in The Flowers" data-gallery="" data-unique-id="tmp_6">
        <img src="http://farm4.static.flickr.com/3705/13541202353_dc22b7de3b_s.jpg">
    </a>
</div>

Überprüfen Sie den link unten für die arbeiten demo, wenn Sie aktivieren console Registerkarte im editor, werden Sie in der Lage, um zu sehen, die unique-id data attribute Wert gibt.

http://jsbin.com/yobenehu/1/edit

EDIT:

Bin ich aktualisieren meine Antwort zu diesem Thema.Liste Eigenschaft:

$(document).ready(function() {
    blueimp.Gallery(
        document.getElementById('links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery',
            carousel: true,
            onslide: function (index, slide) {
                //Callback function executed on slide change.
                var $anchor = jQuery(this.list[index]);
                var unique_id = $anchor.data('unique-id');
                console.log('unique-id value is : '  + unique_id);
            }
        }
    );
});

Überprüfen Sie den link unten für die Arbeit demo

http://jsbin.com/yobenehu/3/edit

Ich fühle mich jQuery(this.list[index]) unnötig ist , wird es langsamer in der Leistung , die wir direkt verwenden können getAttribute zu Holen unique-id.. 🙂

InformationsquelleAutor Dharmang

1

Ein bisschen spät vielleicht, aber ich lief in das gleiche problem nur jetzt und wollte eine Lösung, basierend auf den ursprünglichen Ansatz der Verwendung von jQuery.

Leider sind die data-Attribute des links werden nicht so übertragen, aber wir können es abrufen über die index aus den links (es muss ein container-element für die links mit id="links"):
```
$('#blueimp-gallery')
    .on('slide', function (event, index, slide) {
    var unique_id = $("#links").children().eq(index).data('unique-id');
    console.log('unique_id: ' + unique_id);
});
```
InformationsquelleAutor Steve

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Fügen Sie diese Zeilen zu Ihrer js :

EDIT: