Galerie und Colorbox Gruppe Bilder

Ich habe eine kleine Galerie:

  • Großen Foto
  • Kleinen Daumen an der Unterseite

Wenn ein Benutzer klicken Sie auf einen Thumbnail das grosse Foto ändern, und wenn Sie darauf klicken ColorBox geladen, so weit so gut.

Nun möchte ich, dass wenn sich ein Benutzer in der ColorBox kann er navigieren Sie durch die Bilder mit dem nächsten ein prev-Pfeile, aber wie kann ich dies tun? Mit dem normalen 'rel: "gallery" wird es nicht funktionieren?

Hier ist mein js:

$("#wrapper #right #detail #photo ul li .thumb").click(function() {
    var image = $(this).attr("rel");
    $('#image').hide();
    $('#image').fadeIn('fast');
    $('#image').html('<table><tr><td><a href="' + image + '" class="gallery"><img src="' + image + '" alt="" /></a></td></tr></table>');
    return false;
});

$('#wrapper #right #detail #big #image').on('click', 'a', function(e){
    e.preventDefault();
    $.colorbox({
        transition: 'elastic',
        href: this.href,
        rel: 'gallery',
        speed: 200,
        opacity: 0.4,
        scalePhotos : true,
        maxWidth : '800px',
        maxHeight : '700px'
    });
});

Und die HTML -:

<div id="photo">
    <div id="big"><div id="image"><table><tr><td><a href="gfx/detail/1.jpg" class="gallery"><img src="gfx/detail/1.jpg" alt="" /></a></td></tr></table></div></div>

    <ul>
        <li><a href="#" rel="gfx/detail/1.jpg" class="thumb gallery"><img src="gfx/detail/1.jpg" alt="" /></a></li>
        <li><a href="#" rel="gfx/detail/2.jpg" class="thumb gallery"><img src="gfx/detail/2.jpg" alt="" /></a></li>
        <li><a href="#" rel="gfx/detail/3.jpg" class="thumb gallery"><img src="gfx/detail/3.jpg" alt="" /></a></li>
    </ul>
</div>

Kann somewone mir helfen, so dass colorbox macht seine next-und prev-Galerie?

Gruppieren Sie Ihre Bilder für die, die Sie haben, um die gleiche rel Wert.
In dem Beispiel von ColorBox Sie haben die gleiche Klasse, die nicht die rel?

InformationsquelleAutor Maanstraat | 2013-03-28

  1. 1

    Versuchen initialisieren Gruppe vor dem Aufruf colorbox:

    $('.gallery').colorbox({ rel:'gallery' });

    Keinen Erfolg?

    InformationsquelleAutor webdeveloper

  2. 0

    Den "rel" - Eigenschaft der colorbox bezieht sich auf die "rel" - Attribut auf die <a> tag. Versuchen:

    <div id="photo">
<div id="big"><div id="image"><table><tr><td><a href="gfx/detail/1.jpg" class="gallery">    <img src="gfx/detail/1.jpg" alt="" /></a></td></tr></table></div></div>

<ul>
    <li><a href="gfx/detail/1.jpg" rel="gallery" class="thumb gallery"><img src="gfx/detail/1.jpg" alt="" /></a></li>
    <li><a href="gfx/detail/2.jpg" rel="gallery" class="thumb gallery"><img src="gfx/detail/2.jpg" alt="" /></a></li>
    <li><a href="gfx/detail/3.jpg" rel="gallery" class="thumb gallery"><img src="gfx/detail/3.jpg" alt="" /></a></li>
</ul>
</div>

    InformationsquelleAutor Mike K.

Schreibe einen Kommentar