jquery - jQuery .each() またはその他のメソッド。これにはどれを使用すればよいですか？

Question

jQuery Reel プラグインを使用する 2 つの 360 ビューアがあります。2つは、クラスを使用して同じページでうまく回転しています。jQuery UI を使用して、ズーム機能と回転スライダーを設定しました。問題は、各スライダーまたはズーム ボタンで親イメージを制御できないことです。誰でも助けることができますか？ありがとう、URL は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 には、これらの 2 つのセットがあります。

<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>