我正在尝试做一个图片库，它也使用 Paver jQuery 插件并让它工作，除了它使用相同的图像而不是模态中每个图像的数据图像。
我正在尝试从 href 标记中的数据图像更新模态窗口中的源属性。
你可以在这里看到一个例子
http://codepen.io/abennington/pen/zBwzVO
<a class="panos" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://placehold.it/1600x450" data-target="#pano-modal">
<img class="img-responsive" src="http://placehold.it/1600x450" alt="Short alt text" width="200">
</a>
<a class="panos" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://placehold.it/1400x450" data-target="#pano-modal">
<img class="img-responsive" src="http://placehold.it/1400x450" alt="Short alt text" width="200">
</a>
<div class="modal fade" id="pano-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="panorama" data-paver data-start-position="0"><img id="image-gallery-image" src=""></div>
</div>
</div>
</div>
</div>
@media (min-width: 768px) {
.modal-dialog {
/* width: 740px; */
max-width: 700px;
/* min-width: 90%; */
margin: 30px auto;
}
}
.modal-body {
position: relative;
padding: 0px;
}
.modal-content {
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 0px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
*{box-sizing:border-box}.paver--initialized{position:relative}.paver--ready{overflow:hidden}.paver--ready .paver__meta{background-color:rgba(0,0,0,.6);color:#eee;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;opacity:0;padding:.5rem;pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;z-index:3;-webkit-transition:opacity .125s ease-in-out;transition:opacity .125s ease-in-out;text-shadow:1px 1px 5px rgba(0,0,0,.125)}.paver--ready .paver__meta span{padding:0 10%}.paver--ready .paver__meta span.paver__title{font-size:2em;font-weight:700;line-height:1.5em;margin-bottom:.25em}.paver--ready .paver__meta span.paver__title:after{content:' ';display:block;border-bottom:1px solid #fff;width:33%;margin:0 auto}.paver--ready.paver--metaActive div[class^=paver__meta]{opacity:1}.paver--ready.paver--metaActive:hover div[class^=paver__meta]{opacity:0}.paver--ready div.paver__pano{background-size:cover;position:relative;z-index:1}.paver--ready div.paver__scroller{background-color:hsla(0,0%,100%,.33);border-radius:2px;height:4px;opacity:0;position:absolute;bottom:16px;left:32px;right:32px;z-index:2;-webkit-transition:opacity .25s ease-in-out;transition:opacity .25s ease-in-out}.paver--ready div.paver__scroller span{background-color:hsla(0,0%,100%,.75);border-radius:2px;display:block;width:12.5%;height:4px}.paver--ready.paver--on:hover div.paver__scroller,.paver--ready.paver--tilting div.paver__scroller{opacity:1}@media only screen and (max-width:768px){.paver--ready.paver--metaActive div.paver__meta,.paver--ready.paver--on:hover div.paver__scroller{opacity:0}}.paver__meta1{background-color:rgba(0,0,0,.6);color:#eee;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;padding:.5rem;position:absolute;top:0;bottom:0;left:0;right:0;z-index:3;-webkit-transition:opacity .125s ease-in-out;transition:opacity .125s ease-in-out;text-shadow:1px 1px 5px rgba(0,0,0,.125)}.paver__meta1 span{padding:0 10%}.paver__meta1 span.paver__title{font-size:2em;font-weight:700;line-height:1.5em;margin-bottom:.25em}.paver__meta1 span.paver__title:after{content:' ';display:block;border-bottom:1px solid #fff;width:33%;margin:0 auto}.paver__meta2{background-color:rgba(0,0,0,.6);color:#eee;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;padding:.5rem;pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;z-index:3;-webkit-transition:opacity .125s ease-in-out;transition:opacity .125s ease-in-out;text-shadow:1px 1px 5px rgba(0,0,0,.125)}.paver__meta2 span{padding:0 10%;width:100%}.paver__meta2 span.paver__title{font-size:2em;font-weight:700;line-height:1.5em;margin-bottom:.25em}.paver__meta3{background-color:rgba(0,0,0,.6);color:#eee;padding:.5rem 16.667%;position:absolute;pointer-events:none;bottom:0;left:0;right:0;z-index:3;-webkit-transition:opacity .125s ease-in-out;transition:opacity .125s ease-in-out;text-shadow:1px 1px 5px rgba(0,0,0,.125)}.paver__meta3 span{display:inline}.paver__meta3 span.paver__title{font-weight:700}.paver__meta3 span.paver__title:after{content:':';margin-right:.25em}.paver__meta3 span.paver__desc{font-style:italic}
/*# sourceMappingURL=paver.min.css.map */
/* Panorama container */
*[data-paver] {
margin-bottom: 1.5rem;
position: relative;
height: 80vh;
left: -25%;
width: 150%;
overflow-x: scroll;
overflow-y: hidden; }
*[data-paver] img {
height: 100%; }
.panorama {
height: 450px;
margin-bottom: 0px;
overflow-x: hidden;
overflow-y: hidden;
left: 0;
width: 100%;
}
.panorama img {
height: 100%; }
/* Fallback message */
.paver--fallback {
margin-bottom: 0; }
.paver--fallback + .paver__fallbackMessage {
font-size: .8rem;
margin-bottom: 1.5rem;
padding: .25rem 1rem;
text-align: center; }
这是我的 javascript，包括插件脚本
!function(a,b,c,d){"use strict";var e=a(b),f=a(c),g="paver",h={failureMessage:"Scroll left/right to pan through panorama.",failureMessageInsert:"after",gracefulFailure:!0,meta:!1,responsive:!0,startPosition:.5,minimumOverflow:200,grain:3,cursorThrottle:1e3/60,gyroscopeThrottle:1e3/60,resizeThrottle:500,mouseSmoothingFunction:"linear",tilt:!0,tiltSensitivity:.1,tiltScrollerPersistence:500,tiltSmoothingFunction:"gaussian",tiltThresholdPortrait:12,tiltThresholdLandscape:24},i={};"undefined"!=typeof console&&"undefined"!==console.warn||(console={},console.warn=function(){});var j=function(b,c){this.element=b,this.settings=a.extend({},h,c,a(this.element).data()),parseInt(this.settings.grain<=0)&&(this.settings.grain=1),this.settings.startPosition=Math.max(Math.min(this.settings.startPosition,1),0),this.settings.tiltThresholdPortrait=Math.max(Math.min(this.settings.tiltThresholdPortrait,180),0),this.settings.tiltThresholdLandscape=Math.max(Math.min(this.settings.tiltThresholdLandscape,180),0),this._name=g,this.mousemove={},i.features.hasGyroscope===!0?this.init():i.features.isTouch?this.fallback():this.init()};a.extend(j.prototype,{init:function(){f.trigger("enabled.paver"),k.defineElements(this);var c=this;if(!c.instanceData||!c.instanceData.initialized){c.instanceData={},c.instanceData.initialized=!0,c.instanceData.originalNode=c.$t.html(),k.domReplacement(this),k.getContainerDimensions(this),k.getCenter(this);var d=new Image,g=function(){return c.$t.trigger("imageLoadDone.paver"),c.instanceData.naturalWidth=c.$p[0].naturalWidth,c.instanceData.naturalHeight=c.$p[0].naturalHeight,c.instanceData.panoAspectRatio=c.instanceData.naturalWidth/c.instanceData.naturalHeight,c.instanceData.containerAspectRatio=c.instanceData.outerWidth/c.instanceData.outerHeight,k.checkURL(c.$p.attr("src"))?!1:(k.replacePanorama(c),k.compute(c),k.checkOverflow(c)?(c.instanceData.panCounter=0,c.pan({xPos:c.settings.startPosition,yPos:c.settings.startPosition}),k.paverOn(c)):k.paverOff(c),e.on("resize",a.throttle(c.settings.resizeThrottle,function(){c.recompute()})),c.$t.on("recompute.paver",function(){c.recompute()}),c.$t.on("destroy.paver",function(){c.destroy()}),void c.$t.on("pan.paver",function(a,b){c.pan(b)}))},h=!1,i=setInterval(function(){d.naturalWidth&&d.naturalHeight&&(g(),h=!0,b.clearInterval(i))},100);d.onload=function(){h||g(),b.clearInterval(i)},d.src=c.$p.attr("src")}},fallback:function(){if(f.trigger("disabled.paver"),this.settings.gracefulFailure){var b=a(this.element),c=a("<div />",{"class":"paver__fallbackMessage"});switch(b.addClass("paver--fallback"),this.settings.failureMessageInsert.toLowerCase()){case"after":b.after(c.html(this.settings.failureMessage));break;case"before":b.before(c.html(this.settings.failureMessage));break;case"prepend":b.prepend(c.html(this.settings.failureMessage));break;case"append":b.append(c.html(this.settings.failureMessage));break;default:b.after(c.html(this.settings.failureMessage))}b.trigger("fallbackend.paver")}},unbindEvents:function(){a(this.element).off("mousemove.paver devicetilt.paver").removeClass("paver--on").addClass("paver--off")},destroy:function(){var b=a(this.element).data("plugin_paver");b&&(this.unbindEvents(),a(this.element).trigger("destroyed.paver").removeClass("paver--initialized paver--ready").empty().html(b.instanceData.originalNode),a(this.element).data("plugin_paver",null))},recompute:function(){var b=a(this.element),c=b.data("plugin_paver");b.off("mousemove.paver devicetilt.paver"),k.getContainerDimensions(this),c.instanceData.containerAspectRatio=c.instanceData.outerWidth/c.instanceData.outerHeight,b.trigger("recomputeStart.paver"),k.compute(this),k.checkOverflow(this)?(c.pan({xPos:Math.min(c.instanceData.lastPanX,1),yPos:Math.min(c.instanceData.lastPanY,1)}),k.paverOn(this)):k.paverOff(this)},pan:function(b){var c=a(this.element),f=c.find("div.paver__scroller"),g=f.find("span"),h=parseInt(this.settings.grain),i=c.data("plugin_paver");b?(b.xPos===d&&(b.xPos=i.settings.startPosition),b.yPos===d&&(b.yPos=i.settings.startPosition)):b={xPos:i.settings.startPosition,yPos:i.settings.startPosition},b.xPos>1?b.xPos=1:b.xPos<0&&(b.xPos=0),b.yPos>1?b.yPos=1:b.yPos<0&&(b.yPos=0);var j=b.xPos.toFixed(h),l=b.yPos.toFixed(h);i.instanceData.panCounter&&0!==i.instanceData.panCounter?c.trigger("panStart.paver"):c.trigger("initialPanStart.paver"),c.find("div.paver__pano").css("transform","translate("+-j*(i.instanceData.computedWidth-i.instanceData.outerWidth)+"px, "+-l*(i.instanceData.computedHeight-i.instanceData.outerHeight)+"px)").end().find("div.paver__scroller span").css("transform","translateX("+j*(f.width()-g.width())+"px)").end(),e.one(k.whichTransitionEnd(),function(){i.instanceData.panCounter&&0!==i.instanceData.panCounter?c.trigger("panEnd.paver"):c.trigger("initialPanEnd.paver")}),i.instanceData.panCounter+=1,i.instanceData.lastPanX=j,i.instanceData.lastPanY=l}});var k={whichTransitionEnd:function(){var a,b=c.createElement("div"),e={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",transition:"transitionend"};for(a in e)if(b.style[a]!==d)return e[a]},normalcdf:function(a,b,c){var d=(c-a)/Math.sqrt(2*b*b),e=1/(1+.3275911*Math.abs(d)),f=.254829592,g=-.284496736,h=1.421413741,i=-1.453152027,j=1.061405429,k=1-((((j*e+i)*e+h)*e+g)*e+f)*e*Math.exp(-d*d),l=1;return 0>d&&(l=-1),.5*(1+l*k)},smoothingFunction:{linear:function(a,b){return a>=b?1:-b>=a?0:.5*(a/b+1)},tangent:function(a,b){return a>=b?1:-b>=a?0:.5*(.5*Math.tan(a/b*(.351*Math.PI))+1)},cosine:function(a,b){return a>=b?1:-b>=a?0:.5*(Math.sin(a/b*(Math.PI/2))+1)},gaussian:function(a,b){return a>=b?1:-b>=a?0:k.normalcdf(0,.375,a/b)}},defineElements:function(b){b.t=b.element,b.$t=a(b.element),b.$p=b.$t.find("img").first(),b.instanceData=b.$t.data("instance-data")},domReplacement:function(b){b.$t.addClass("paver--initialized").append(a("<div />",{"class":"paver__meta"})),!b.settings.meta||b.$p.attr("title")===d&&b.$p.attr("alt")===d||!b.$p.attr("title").length&&!b.$p.attr("alt").length||b.$t.addClass("paver--metaActive").find(".paver__meta").html('<span class="paver__title">'+b.$p.attr("title")+'</span><span class="paver__desc">'+b.$p.attr("alt")+"</span>"),b.$t.trigger("init.paver")},getContainerDimensions:function(a){a.instanceData.outerWidth=a.$t.width(),a.instanceData.outerHeight=a.$t.height(),a.instanceData.offsetX=a.$t.offset().left,a.instanceData.offsetY=a.$t.offset().top},getCenter:function(a){a.instanceData.centerX=.5*a.instanceData.outerWidth,a.instanceData.centerY=.5*a.instanceData.outerHeight},replacePanorama:function(b){var c=a("<div />",{"class":"paver__pano"}).css("background-image","url("+k.formatURL(b.$p.attr("src"))+")"),d=a("<div />",{"class":"paver__scroller"}).append(a("<span />"));b.$t.addClass("paver--ready").append(c).append(d),b.$p.remove(),b.$t.trigger("ready.paver"),b.instanceData.ready=!0},checkOverflow:function(a){return a.instanceData.containerAspectRatio<=a.instanceData.panoAspectRatio&&a.instanceData.outerWidth<=a.instanceData.computedWidth-a.settings.minimumOverflow},paverOn:function(a){a.$t.removeClass("paver--off").addClass("paver--on").find("div.paver__pano").css("left",0),k.bindEvents(a)},paverOff:function(a){a.unbindEvents(a),a.settings.responsive===!0&&a.instanceData.naturalWidth>a.instanceData.outerWidth&&a.$t.css("min-height",a.instanceData.outerWidth/a.instanceData.panoAspectRatio).find("div.paver__pano").css({width:a.instanceData.outerWidth,height:"100%",left:"50%",transform:"translateX(-50%)"})},compute:function(a){a.instanceData.computedWidth=a.instanceData.outerHeight*a.instanceData.panoAspectRatio,a.instanceData.computedHeight=a.instanceData.computedWidth/a.instanceData.panoAspectRatio,k.getCenter(a),a.$t.find("div.paver__pano").css({width:a.instanceData.computedWidth,height:a.instanceData.outerHeight}),a.$t.trigger("computeEnd.paver")},bindEvents:function(a){i.features.isTouch?i.features.hasGyroscope&&a.settings.tilt&&k.bindOrientationEvents(a):k.bindMouseEvents(a),a.$t.trigger("eventsBound.paver")},bindMouseEvents:function(b){b.$t.on("mousemove.paver",a.throttle(b.settings.cursorThrottle,function(a){b.mousemove.dX=a.pageX-b.instanceData.offsetX-b.instanceData.centerX,b.mousemove.dY=a.pageY-b.instanceData.offsetY-b.instanceData.centerY;if("string"==typeof b.settings.mouseSmoothingFunction)k.defaultSmooth(b,b.settings.mouseSmoothingFunction,b.mousemove.dX,b.instanceData.centerX,b.mousemove.dY,b.instanceData.centerY);else if("function"==typeof b.settings.mouseSmoothingFunction){var c=b.settings.mouseSmoothingFunction.call(b,b.mousemove.dX,b.instanceData.centerX,b.mousemove.dY,b.instanceData.centerY);c!==d?b.pan({xPos:c.x,yPos:c.y}):k.defaultSmooth(b,h.settings.mouseSmoothingFunction,b.mousemove.dX,b.instanceData.centerX,b.mousemove.dY,b.instanceData.centerY)}}))},bindOrientationEvents:function(c){c.instanceData.prevTilt={};var e=null;c.$t.on("devicetilt.paver",a.throttle(c.settings.gyroscopeThrottle,function(f,g){if(0===c.settings.tiltScrollerPersistence)c.$t.addClass("paver--tilting");else if(!a.isEmptyObject(c.instanceData.prevTilt)&&(Math.abs(c.instanceData.prevTilt.b-g.b)>c.settings.tiltSensitivity||Math.abs(c.instanceData.prevTilt.g-g.g)>c.settings.tiltSensitivity)||a.isEmptyObject(c.instanceData.prevTilt)){c.$t.addClass("paver--tilting"),null!==e&&clearTimeout(e),e=b.setTimeout(function(){c.$t.removeClass("paver--tilting")},c.settings.tiltScrollerPersistence);var h,j={};switch(i.screenOrientationAngle){case 0:j={beta:g.b,gamma:g.g},h=c.settings.tiltThresholdPortrait;break;case 180:case-180:j={beta:-g.b,gamma:-g.g},h=c.settings.tiltThresholdPortrait;break;case 90:case-270:j={beta:-g.g,gamma:g.b},h=c.settings.tiltThresholdLandscape;break;case 270:case-90:j={beta:g.g,gamma:-g.b},h=c.settings.tiltThresholdLandscape;break;default:j={beta:g.b,gamma:g.g},h=c.settings.tiltThresholdPortrait}if("string"==typeof c.settings.tiltSmoothingFunction)k.defaultSmooth(c,c.settings.tiltSmoothingFunction,j.gamma,h,j.beta,h);else if("function"==typeof c.settings.tiltSmoothingFunction){var l=c.settings.mouseSmoothingFunction.call(c,j.gamma,h,j.beta,h);l!==d?c.pan({xPos:l.x,yPos:l.y}):k.defaultSmooth(c,c.settings.tiltSmoothingFunction,j.gamma,h,j.beta,h)}c.instanceData.prevTilt={a:g.a,b:g.b,g:g.g}}}))},defaultSmooth:function(a,b,c,d,e,f){var g=k.smoothingFunction[b];a.pan({xPos:g(c,d),yPos:g(e,f)})},checkURL:function(a){var b=0;return/[\s+]/g.test(a)?(console.warn("Paver: Paver has detected characters in your URL string ("+a+") that need to be properly encoded/escaped. Whitespace(s) have to be escaped manually. See RFC3986 documentation."),b=1):/[\"\'\(\)]/g.test(a)&&(console.warn("Paver: Plugin will proceed, but it has detected characters in your URL string ("+a+") that need to be properly encoded/escaped. These will be escaped for you. See RFC3986 documentation."),b=0),b},formatURL:function(a){return a.replace(/"/g,"%22").replace(/'/g,"%27").replace(/\(/g,"%28").replace(/\)/g,"%29")}};a.fn.paver=function(e){var h=this,k=arguments;i={features:{isTouch:!1,hasGyroscope:!1,hasScreenOrientationAPI:!(!b.screen||!b.screen.orientation||b.screen.orientation.angle===d||null===b.screen.orientation.angle)},screenOrientationAngle:null,startTilt:{}};var l={isTouch:function(){try{c.createEvent("TouchEvent"),i.features.isTouch=!0}catch(a){i.features.isTouch=!1}},hasGyroscope:function(){var c=new a.Deferred,d=!1,e=function(a){return null!==a.alpha&&null!==a.beta&&null!==a.gamma?c.resolve({orientation:{alpha:a.alpha,beta:a.beta,gamma:a.gamma},status:{deviceOrientationEventSupport:!0,deviceOrientationData:!0}}):c.reject({status:{deviceOrientationEventSupport:!0,deviceOrientationData:!1}}),b.removeEventListener("deviceorientation",e,!1),d=!0,c.promise()};return b.DeviceOrientationEvent?(b.addEventListener("deviceorientation",e,!1),b.setTimeout(function(){return c.reject({status:{deviceOrientationEventSupport:!0,deviceOrientationData:!1}}),c.promise()},250)):c.reject({status:{deviceOrientationEventSupport:!1,deviceOrientationData:!1}}),c.promise()},hasOrientation:function(){i.screenOrientationAngle=i.features.hasScreenOrientationAPI?b.screen.orientation.angle:b.orientation||0}};l.isTouch(),l.hasOrientation(),b.addEventListener("orientationchange",function(){l.hasOrientation(),l.hasGyroscope()},!1);var m=function(){var c=a(this),f=function(a){var b={a:a.alpha-i.startTilt.alpha,b:a.beta-i.startTilt.beta,g:a.gamma-i.startTilt.gamma};c.trigger("devicetilt.paver",[b])};if(i.features.hasGyroscope&&b.addEventListener("deviceorientation",f,!1),e===d||"object"==typeof e)return c.each(function(){a.data(this,"plugin_"+g)||a.data(this,"plugin_"+g,new j(this,e))});if("string"==typeof e&&"_"!==e[0]&&"init"!==e){var h;return c.each(function(){var b=a.data(this,"plugin_"+g);b instanceof j&&"function"==typeof b[e]&&(h=b[e].apply(b,Array.prototype.slice.call(k,1)))}),typeof h!=typeof d?h:c}},n={yes:function(a){i.features.hasGyroscope=!0,i.startTilt.alpha=a.orientation.alpha,i.startTilt.beta=a.orientation.beta,i.startTilt.gamma=a.orientation.gamma,f.trigger("hasGyroscopeData.paver",[a]),m.call(h)},no:function(){console.warn("Gyroscopic data unavailable. Falling back to cursor-based panning."),i.features.hasGyroscope=!1;var a={status:{deviceOrientationEventSupport:!1,deviceOrientationData:!1}};f.trigger("hasNoGyroscopeData.paver",[a]),m.call(h)}};return a.when(l.hasGyroscope()).then(function(a){typeof a!=typeof d&&e.tilt?n.yes(a):n.no()},function(a){n.no()}),h}}(jQuery,window,document);
$(document).ready(function(){
loadGallery(true, 'a.panos');
function loadGallery(setIDs, setClickAttr){
var current_image,
selector,
counter = 0;
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
}
if(setIDs == true){
$('[data-image-id]').each(function(){
counter++;
$(this).attr('data-image-id',counter);
});
}
$(setClickAttr).on('click',function(){
updateGallery($(this));
$('div[data-paver]').paver('recompute');
});
}
});
$(function () {
// Paver
});
$('#pano-modal').on('shown.bs.modal', function () {
$('#pano-modal div[data-paver]').paver();
$('.panorama').paver('recompute');
})
如果您单击，您会看到它显示的是相同的图像，而不是 1600 和 1400 图像。
如有任何帮助，我们将不胜感激。
最佳答案
问题是当 paver 被初始化时，它破坏了 img里面的元素<div class="panorama" data-paver></div> .因此，稍后当您尝试更改 src 时它的属性...该元素不再存在。
您需要调用摊铺机的 destroy首先函数(为了恢复原始 DOM 元素)，更改 src并重新初始化摊铺机。
更新
我尝试使用 destroy方法，所以我用硬编码的原始元素替换了 paver 元素。
$(document).ready(function(){
$('a.panos').click(function(){
$modal = $('#pano-modal');
$pano_image = $('<div class="panorama" data-paver data-start-position="0"></div>');
$pano_image.append('<img id="pano-image" src="'+$(this).data('image')+'">');
$modal.find(".modal-body").html($pano_image);
$modal.modal("show");
});
$('#pano-modal').on('shown.bs.modal', function () {
$('.panorama').paver();
})
});
关于javascript - Bootstrap Modal 使用数据图像作为源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38226126/