jQuery Zoom innerhalb einer colorbox

Ist es möglich mit dem jQuery Zoom-plugin von Jack Moore im inneren eine colorbox?

$(document).ready(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});
  • ich denke ja, wenn Sie Ihre colorbox, um eine html-Datei als iframe
InformationsquelleAutor neralex | 2013-03-21
  1. 16

    Ich bin mir ziemlich sicher, dass Sie können dies tun auf diese Weise : 

    $('a.colorbox').colorbox({
    'onComplete': function(){ 
        $('#cboxLoadedContent img').wrap('<span style="display:inline-block"></span>')
            .css('display', 'block')
            .parent()
            .zoom();
    }
});

    Aus : http://www.jacklmoore.com/zoom/

    EDIT : Es scheint zu arbeiten, ohne die zusätzlichen wrap

    Aus : @Peter

    $('a.colorbox').colorbox({
    'onComplete': function(){ 
        $('#cboxLoadedContent').zoom();
    }
});
    InformationsquelleAutor Philippe Boissonneault
  2. 0
    $mouseTrap.bind('click',this,function(event){
     $("#zoom").trigger("click");
});

    hinzufügen zoom.js

    $('#zoom').colorbox();
    InformationsquelleAutor user3516918
  3. 0
        $(document).ready(function(){
    function callPreviewLightbox(urlPath) {
        $(document).ready(function () {
                $.colorbox({
                    href: urlPath,
                    width: '100%',
                    top: '0%',
                    height: '100%',
                    onClosed: function () {
                        alert('on close');
                    },
                    onOpen: function () {

                    },
                    onComplete: function () {
                        $('#cboxLoadedContent').zoom();
                    }
                });
        });
    }
    });
    • Während es immer gut ist eine code in einer Antwort, es ist viel mehr nützlich für andere, wenn Sie können, fügen Sie einige Erklärungen über das, was der code tut, wie es beantwortet die Frage und wie unterscheidet es sich von anderen Antworten.
    InformationsquelleAutor Furqan Idrees
  4. 0

    Dies ist sehr hilfreich für mich:

    .zoomImg {
    height: 150% !important;
    width: 150% !important;
}
    InformationsquelleAutor Hardik Kothiya
  5. 0

    Eröffnung der colorbox und rufen dann den zoom in onComplete funktioniert bei mir nicht, weil es nicht starten Sie den zoom automatisch, wenn Sie nicht lassen Sie das Bild und geben dann auf. Ich habe zum auslösen eines "mouseover" - Ereignis.

    Beim vergrößern in der Regel haben Sie eine wirklich große Bild, und Sie müssen auch zur Begrenzung der colorbox Größe, um die Größe des Fensters, in diesem Fall habe ich einen 100% x 100% colorbox.

    Je größer die Fläche der colorbox ist, umso größer ist die chance, dass Sie Ihre Maus und der mouseover-Effekt nicht ausgelöst wird, da das Bild erscheint unter der Maus und die Maus ist nicht in (über) das Bild.

    JS:

    $('a.colorzoom').colorbox({ width:"100%", height:"100%", returnFocus: false, trapFocus:false, 
    'onComplete': function() { 
        $('#cboxLoadedContent').zoom({
            callback: function() {
                $(this).trigger('mouseover');
            }
        });
        
    }
});

    InformationsquelleAutor inalto
Schreibe einen Kommentar