-1

我们有两个使用 jQuery Reel 插件的 360 查看器。两者使用类在同一页面上旋转得很好。我们使用 jQuery UI 设置了缩放功能和旋转滑块。问题是我们无法让每个滑块或缩放按钮来控制其父图像。任何人都可以帮忙吗？谢谢，网址是http://www.dmns.org/test/jquery-360/index.html。任何帮助表示赞赏。代码如下。

 var zoomAmount = 100;
 var originalHeight = 0;
 var originalWidth = 0;
// Slide Bar for the "Zoom" control
var zoomSlider;
var totalFrames;
var isObjectRotatingViaSlider = false;
var isObjectZoomingViaSlider = false;
var maxZoomAmount = 2;
var image = $('.image');

$(document).ready(function () {
var images = $('.imageSequence').attr('value');
var imgArray = images.split(',');
totalFrames = imgArray.length;
originalHeight = $('.image').height();
originalWidth = $('.image').width();
var image = $('.image');
image.reel(
{
    brake: 1,
    frames: totalFrames,
    images: imgArray,
    //preload: totalFrames,
    cw: true,
    hint: "Click and drag",
    clickfree: false,
    preloader: 20

});

 //  var wrappingDiv = $('.example');
//$(wrappingDiv).each(function () {
    $('.ZoomIn').on('click', function (e) {
        ZoomIn();
        e.preventDefault();
    });
    $('.ZoomOut').on('click', function (e) {
        ZoomOut();
        e.preventDefault();
    });
    $('.DefaultSize').on('click', function (e) {
        e.preventDefault();
        DefaultSize();

    });

//});//End Each


//iPad check to show or hide sliders
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var isiPhoneOriPod = (navigator.userAgent.match(/iPhone/i)) ||  (navigator.userAgent.match(/iPod/i))
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if (!isiPad && !isAndroid && !isiPhoneOriPod) {
    // alert('not iPad');
    $(".viewerSlider, .instructionMessaging, .desktopMessage").show();
    //Rotation sliders
    ReadyRotationSlider();
    ReadyZoomSlider();
    SetUpTimer();
} else if (isiPad || isAndroid || isiPhoneOriPod) {
    $('.viewerSlider').hide();
    $(".viewerSlider, .instructionMessaging, .mobileMessage").show();
    //alert('is an iPad, Android, or iPhone or iPod');
}
else {
    alert('is an something else');
    $('.viewerSlider').show();
}
//maybe get this to play
$('button').on("click", function () {
    image.trigger("play");
});


}); //End doc ready




function ZoomIn() {

// Zoom in Image but keep borders the same
var newWidth = $('.image').width() + zoomAmount;
var newHeight = $('.image').height() + zoomAmount;

//Move and zoom the image
var newX = (originalHeight - newHeight) / 2;
var newY = (originalWidth - newWidth) / 2;

$('.imgHolder').find('img').stop(false, true).animate({ 'width': newWidth, 'height': newHeight, 'top': newX, 'left': newY }, { duration: 200 });
}

function ZoomOut() {
// Zoom in Image but keep borders the same
var newWidth = $('.image').width() - zoomAmount;
var newHeight = $('.image').height() - zoomAmount;

if (newHeight <= originalHeight || newWidth <= originalWidth) {
    newHeight = originalHeight;
    newWidth = originalWidth;
}

var newX = (originalHeight - newHeight) / 2;
var newY = (originalWidth - newWidth) / 2;

$('.imgHolder').find('img').stop(false, true).animate({ 'width': newWidth, 'height':  newHeight, 'top': newX, 'left': newY }, { duration: 200 });
 }

 function DefaultSize() {
$('.imgHolder').find('img').stop(false, true).animate({ 'width': originalWidth,  'height': originalHeight, 'top': 0, 'left': 0 }, { duration: 200 });
 }

 function FreeZoom(amount) {

// Zoom in Image but keep borders the same
var newWidth = originalWidth * ((100 + amount) / 100);
var newHeight = originalHeight * ((100 + amount) / 100);

var newX = (originalHeight - newHeight) / 2;
var newY = (originalWidth - newWidth) / 2;

$('.imgHolder').find('img').stop(false, true).animate({ 'width': newWidth, 'height': newHeight, 'top': newX, 'left': newY }, { duration: 200 });
}

 //Rotation Sliders

 function SetUpTimer() {
setInterval('UpdateImageViaSliders()', 50);
 }

function UpdateImageViaSliders() {
if (isObjectRotatingViaSlider) {
    RotateViaSlider($('.rotationSlider').slider("value"));
} else if (isObjectZoomingViaSlider) {
    FreeZoom($('.zoomSlider').slider("value"));
}
 }

function ReadyRotationSlider() {
$(".rotationSlider").slider({
    slide: function (event, ui) {
        isObjectRotatingViaSlider = true;
    },
    stop: function (event, ui) {
        isObjectRotatingViaSlider = false;
    }
});
}

function ReadyZoomSlider() {
$(".zoomSlider").slider({
    slide: function (event, ui) {
        isObjectZoomingViaSlider = true;
    },
    stop: function (event, ui) {
        isObjectZoomingViaSlider = false;
    }
});
 }

 function RotateViaSlider(rotateNumber) {
var newFrame = Math.floor((rotateNumber * totalFrames) / 100);
$('.image').trigger('frameChange', newFrame);
 }

在 HTML 中，我有两组这样的。

<div class="example">
    <div class="block">
        <div class="imgHolder">
            <img class="image" src="images/smooshed150dpi/Kachina0001.png" height="448" width="360" />
        </div>
    </div>
    <div class="instructionMessaging">
        <p class="mobileMessage">
            Swipe to spin image</p>
        <p class="desktopMessage">
            Click and drag left and right to spin image</p>
    </div>
    <div class="controlsWrapper">
        <!--<div id="ZoomIn">
                        Zoom In
                    </div>-->
        <a href="#" class="ZoomIn controlBtn">(+) Zoom In</a>
        <!--<div id="ZoomOut">
                        Zoom Out
                    </div>-->
        <a href="#" class="ZoomOut controlBtn">(-) Zoom Out</a> <a href="#" class="DefaultSize controlBtn">
            Default size</a>
        <div class="viewerSlider">
            <span>Rotate</span>
            <div class="rotationSlider">
            </div>
        </div>
        <div class="viewerSlider">
            <span>Zoom</span><div class="zoomSlider">
            </div>
        </div>
    </div>
    <input type="hidden" class="imageSequence" name="imageSequence" value="images/smooshed150dpi/Kachina0001.png,images/smooshed150dpi/Kachina0002.png,images/smooshed150dpi/Kachina0003.png,images/smooshed150dpi/Kachina0004.png,images/smooshed150dpi/Kachina0005.png,images/smooshed150dpi/Kachina0006.png,images/smooshed150dpi/Kachina0007.png,images/smooshed150dpi/Kachina0008.png,images/smooshed150dpi/Kachina0009.png,images/smooshed150dpi/Kachina0010.png,images/smooshed150dpi/Kachina0011.png,images/smooshed150dpi/Kachina0012.png,images/smooshed150dpi/Kachina0013.png,images/smooshed150dpi/Kachina0014.png,images/smooshed150dpi/Kachina0015.png,images/smooshed150dpi/Kachina0016.png,images/smooshed150dpi/Kachina0017.png,images/smooshed150dpi/Kachina0018.png,images/smooshed150dpi/Kachina0019.png,images/smooshed150dpi/Kachina0020.png,images/smooshed150dpi/Kachina0021.png,images/smooshed150dpi/Kachina0022.png,images/smooshed150dpi/Kachina0023.png,images/smooshed150dpi/Kachina0024.png,images/smooshed150dpi/Kachina0025.png,images/smooshed150dpi/Kachina0026.png,images/smooshed150dpi/Kachina0027.png,images/smooshed150dpi/Kachina0028.png,images/smooshed150dpi/Kachina0029.png,images/smooshed150dpi/Kachina0030.png,images/smooshed150dpi/Kachina0031.png,images/smooshed150dpi/Kachina0032.png,images/smooshed150dpi/Kachina0033.png,images/smooshed150dpi/Kachina0034.png,images/smooshed150dpi/Kachina0035.png,images/smooshed150dpi/Kachina0036.png,images/smooshed150dpi/Kachina0037.png" />
</div>
4

1 回答 1

1

控件只做他们被告知的事情：

$('.element').doStuff();
// doStuff is just a fake generic function

控件正在查找具有“元素”类的所有元素并将更改应用于它们。在某些情况下，元素就是控件本身（例如，具有该类的所有控件.ZoomIn都做同样的事情......我的意思是完全相同的事情；就您要绑定的事件而言，它们充当彼此的副本）和在某些情况下，它是目标（例如，所有具有该类的图像都会.image受到影响）。

因此，要使其单独工作，您需要使用某种方式修改代码以区分它们。最简单的方法是将每组图像和控件包装在某种 Div 中。div 甚至不需要是唯一的，因为我们会将自己限制在其中。

一个通用示例可能如下所示：

$('.someButton').click(function() {
  var $this = $(this);
  var theImage = $this.closest('.parentDiv').find('.image'); // parentDiv is the classname of the mini wrapper
  theImage.doStuff(); // will only affect the image(s) inside the mini wrapper
});

修复整个插件超出了 Stack Overflow 答案的范围，但我希望这能让您了解出了什么问题。请记住，当您查看源代码时，选择器之类的选择器$('.image')将抓取具有该类名的所有节点。

于 2012-04-05T19:37:36.433 回答