Responsive design 尝试使Elavate zoom具有自适应性
我正在为我的女朋友制作一个网站，她是销售包的 ，我使用ElevateToom制作产品，但无法使其适应屏幕大小 $zoom_01.ElevateToom{gallery:'cartera'，zoomType:'inner'，cursor:'pointer'，responsive:true，ContainerInnerZoom:true，galleryActiveClass:'active'，imageCrossfade:true，ZoomizeMode:'image'，loadingIcon:'http://www.elevateweb.co.uk/spinner.gif'}; 索洛格兰德{ 宽度：50%； 边际上限：0px； 右边距：自动； 边缘底部：0px； 左边距：自动； 浮动：左； 最大宽度：500px； } .包装纸{ 最大宽度：1000px； 宽度：80%； 背景色：FFF； 保证金：0自动； }Responsive design 尝试使Elavate zoom具有自适应性,responsive-design,zooming,Responsive Design,Zooming,我正在为我的女朋友制作一个网站，她是销售包的 ，我使用ElevateToom制作产品，但无法使其适应屏幕大小 $zoom_01.ElevateToom{gallery:'cartera'，zoomType:'inner'，cursor:'pointer'，responsive:true，ContainerInnerZoom:true，galleryActiveClass:'active'，imageCrossfade:true，ZoomizeMode:'image'，loadingIcon:'
我成功地复制了这个错误并记录了下来 此链接下的错误版本： 智能手机上记录的错误，请在此链接下观看： 固定示例 解决方案： 要解决此问题，您需要在每次CSS@media查询更改图像宽度时刷新提升 为了解决这个问题，我使用jQuery移动库处理方向更改事件，并使用jQuery处理调整大小。我举了一个简单的例子 首先，我为240px-320px和321px-640px之间的屏幕大小添加了两个CSS断点。这将使图像宽度适应屏幕大小。要针对具有不同分辨率和屏幕大小的其他智能手机，建议添加更多@media查询。但这只是一个简短的例子
/*Target devices 240px - 320px width*/
@media only screen and (min-width: 240px) and (max-width: 320px) {
#zoom_01 {
width:200px;
}
}
/*Target devices 321px - 640px*/
@media only screen and (min-width: 321px) and (max-width: 640px) {
#zoom_01 {
width:300px ;
}
}
$( window ).on( "orientationchange", function() {
});
$( window ).on( "resize", function() {
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src="http://mikemoney.nazwa.pl/elevate/jquery-1.8.3.min.js"></script>
<script src="http://mikemoney.nazwa.pl/elevate/jquery.elevatezoom.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
#sologrande {
width: 50%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: left;
max-width:500px;
}
h1 {
font-size: 14px;
color:royalblue;
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
margin:0;
padding:0;
font-weight: bold;
color:#222222;
}
p.mobile, p.landscape {
display: none;
}
p#status {
color:goldenrod;
font-weight: bold;
}
.wrapper{
max-width: 1000px;
margin:0 auto;
background:#dcdcdc;
}
#zoom_01 {
width:411px;
}
/*Target devices 240px - 320px width*/
@media only screen and (min-width: 240px) and (max-width: 320px) {
p.mobile
{
display: block;
color:red;
}
#zoom_01 {
width:200px;
}
}
/*Target devices 321px - 640px*/
@media only screen and (min-width: 321px) and (max-width: 640px) {
p.landscape
{
display: block;
color:red;
}
#zoom_01 {
width:300px ;
}
}
</style>
</head>
<body>
<h1>[FIXED VERSION]</h1>
<p class="mobile">Mode: <strong>Portrait</strong> (max-width: 320px)</p>
<p class="landscape">Mode: <strong>Landscape</strong> (min-width: 321, max-width: 720px)</p>
<p id="imgWidth">Image width</p>
<p id="status">Status: Just loaded...</p>
<div class="wrapper">
<div id="sologrande">
<img src="http://mikemoney.nazwa.pl/elevate/images/small/image1.png" name="zoom_01" id="zoom_01" data-zoom-image="http://mikemoney.nazwa.pl/elevate/images/large/image1.jpg">
</div>
</div>
<div style="clear:both"></div>
<script>
$("#zoom_01").elevateZoom({gallery:'cartera',zoomType:'inner', cursor: 'pointer',responsive: true, containInnerZoom: true, galleryActiveClass: 'active', imageCrossfade: true,zoomSizeMode:'image', loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//Triggered when orientation is changed.
$( window ).on( "orientationchange", function() {
var windowWidth = $( window ).width(), // get window width
imgWidth = $( "#zoom_01").width(); // get image width
//Init elevateZoom
$("#zoom_01").elevateZoom({gallery:'cartera',zoomType:'inner', cursor: 'pointer',responsive: true, containInnerZoom: true, galleryActiveClass: 'active', imageCrossfade: true,zoomSizeMode:'image', loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//display status
$( "#status" ).html("Status: Orientation changed!.");
//display image and window width
$( "#imgWidth" ).html("Image width: " + imgWidth + "px" + "<br />" + "Window width: " + windowWidth + "px");
});
//Triggered when window width is changed.
$( window ).on( "resize", function() {
var windowWidth = $( window ).width(), // get window width
imgWidth = $( "#zoom_01").width(); // get image width
//Init elevateZoom
$("#zoom_01").elevateZoom({gallery:'cartera',zoomType:'inner', cursor: 'pointer',responsive: true, containInnerZoom: true, galleryActiveClass: 'active', imageCrossfade: true,zoomSizeMode:'image', loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//display status
$( "#status" ).html("Status: Window resized!.");
//display image and window width
$( "#imgWidth" ).html("Image width: " + imgWidth + "px" + "<br />" + "Window width: " + windowWidth + "px");
});
//Triggered on document ready
$( document ).ready(function() {
var windowWidth = $( window ).width(), // get window width
imgWidth = $( "#zoom_01").width(); // get image width
//Init elevateZoom
$("#zoom_01").elevateZoom({gallery:'cartera',zoomType:'inner', cursor: 'pointer',responsive: true, containInnerZoom: true, galleryActiveClass: 'active', imageCrossfade: true,zoomSizeMode:'image', loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//display status
$( "#status" ).html("Status: Just loaded!");
//display image and window width
$( "#imgWidth" ).html("Image width: " + imgWidth + "px" + "<br />" + "Window width: " + windowWidth + "px");
});
</script>
</body>
</html>
你能说得更具体些吗？如果我理解正确，您希望缩放窗口与屏幕宽度相适应，例如，在智能手机上？是的，我希望缩放云像图像一样进行调整，如果我放置例如50%，云缩放图像始终保持相同大小eve认为包装器solo grande调整为50%的宽度感谢您的回答，问题是当你将鼠标悬停在图像上时，你可以看到te zoom溢出了包装器，你可以在你的演示中查看它。为了清楚起见。问题只发生在移动设备上，对吗？你能截图给我看看你的移动设备上出现的这种负面溢出效应吗？事实上，这款手机的尺寸为400x400px，而图像的尺寸为411x274px，但在我的手机上看起来还不错。它的行为与桌面上的完全相同。唯一的区别是光标。当我回到家里时，我会从我的iPhone上抓取视频并与你分享，这样也许会帮助我重现这个bug。我在回答中添加了截图。更新了。如果有用的话，请告诉我。我仍然可以录制视频，但也许现在你可以展示你想要的。再次感谢你的回答，当窗口小于500px时，变焦会溢出原始图像，你可以在你制作的演示上查看，我认为它在你的iphone上运行良好的原因是分辨率大于500px，所以在我的解决方案中，当浏览器宽度小于500px时，它会触发CSS样式，将宽度设置为300px。因此，这张图片被改编成320像素宽的iPhone。就这样。检查我的视频并给我你的反馈。我仍然不知道你在什么智能手机上测试我的演示。你还没有提供任何截图。我只知道这对你不起作用。没有你提供更多的细节，我帮不了你。你能投票赞成我对你有帮助的答案吗？