Question

如何启用捏缩放jquery mobile？我正在尝试在我的移动网站上启用捏缩放。我正在使用iscroll 4我试过锤子js但也没有工作

<!DOCTYPE HTML>
<html>
  <head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">

var myScroll;
function loaded() {
myScroll = new iScroll('gallerycontent', { zoom:true });
}

$(function(){

function gonext() {
    var current = $('a.selectedimg');
    if (current.hasClass('last')) {
        var next = $('a.first')
    } else {
        var next = current.next();
    }

    var src = next.find('img').attr("src");
    var alt = next.find('img').attr("alt");
    next.addClass('selectedimg');
    current.removeClass('selectedimg');
    $('#dialogcontent').empty().append('<a href="#gallerypage"><img src="' + src + '" style="width:100%; height:100%;"/></a>' );
    $('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
} 

function goprev() {
var current = $('a.selectedimg');
    if (current.hasClass('first')) {
        var prev = $('a.last')
    } else {
        var prev = current.prev();
    }
    var src = prev.find('img').attr("src");
    var alt = prev.find('img').attr("alt");
    prev.addClass('selectedimg');
    current.removeClass('selectedimg');
    $('#dialogcontent').empty().append('<a href="#gallerypage"><img src="' + src + '" style="width:100%; height:100%;"/></a>' );
    $('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
}

$('.gallerycontent img').bind('tap',function(event, ui){
    var src = $(this).attr("src");
    var alt = $(this).attr("alt");
    $('#dialogcontent').empty().append('<a href="#gallerypage"><img src="' + src + '" style="width:100%; height:100%;"/></a>' );
    $('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
    $(this).parent().addClass('selectedimg');
});

$('#nextbtn').bind('tap',function(event, ui){
    gonext();
});

$('#imgshow').bind('swipeleft',function(event, ui){
    gonext();
});

$('#prevbtn').bind('tap',function(event, ui){
    goprev();
});

$('#imgshow').bind('swiperight',function(event, ui){
    goprev();
});
    });

 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>jQuery Mobile Dialog-Based Gallery</title>

 <style type="text/css">

 #pagecontent {
text-align:center;
}

.gallerycontent a img {
height:80px;
width:80px;
padding:3px;
background-color:#222;
}

#prevbtn, #nextbtn {
margin:10px 15px;
}

</style>

</head>

<body>
<div data-role="page" id="gallerypage" data-theme="a">

<div data-role="header">
<h1 class="headtitle">Gallery</h1>
</div> <!--header-->

<div data-role="content" id="pagecontent">
<div class="gallerycontent">
<a href="#imgshow" data-transition="pop" data-rel="dialog" class="first">
  <img src="images/1.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/2.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/3.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/4.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/5.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/6.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/7.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/8.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/9.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/10.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog">
  <img src="images/11.jpg"/>
</a>
<a href="#imgshow" data-transition="pop" data-rel="dialog" class="last">
   <img src="images/12.jpg"/>
</a>
</div>
</div> <!--/content-->

<div data-role="footer" style="height:40px;line-height:40px;">
<center>jQuery Mobile Galeery</center>
</div> <!--/footer-->

</div> <!--/page-->

<div data-role="dialog"  id="imgshow"  data-theme="a">
<div data-role="header" data-theme="a">
 <div id="dialoghead"></div>
</div><!-- /header -->

<div data-role="content" data-theme="a">
<center><div id="dialogcontent"></div></center>
</div>

<div data-role="footer">
<center>
<a href="#" id="prevbtn" data-role="button" data-iconpos="notext" data-icon="arrow-     l">Previous</a>
<a href="#" id="nextbtn" data-role="button" data-iconpos="notext" data-icon="arrow-r">Next</a>
</center>
</div>
</div>

</body>
</html>

为什么我无法缩放图片？

如何启用pinch来放大jquery mobile？

0 个答案: