Question

I have sample application where i have added few images to carousel , and trying to zoomin and zoom out the image , the problem i am facing is only the first image in the carousel is responding for zoom in and out , am not able zoom the rest of the images in the carousel

This the sample code:

Ext.define("PinchTest.view.Main", {
    //extend: 'Ext.List',
    extend: 'Ext.Carousel',
    xtype: 'stcrop',
    require: [
      'Ext.Img',
        'Ext.Loader'
    ],
    config: {
        layout: {
            type: 'fit',
            pack: 'center'
        },

        scrollable: false,
        image: null,
        imageWidth: 140,
        imageHeight: 180,
        imageAdded: false
    },

    initialize: function () {
        var me = this;
        me.callParent();

        //                // me.setImage(me.config.image);
        //               me.setImage("resources/images/CAK_SCA6REDVELV_RedVelvet_GEN_11_OU_SQ.jpg");
        //                me.addImage();
        var carouse = Ext.create('Ext.Carousel', {
            id: 'carose',
            scope: this
        });

        var imgArray = [];
        var images = ["resources/images/CAK_SCA6REDVELV_RedVelvet_GEN_11_OU_SQ.jpg", "resources/images/Home_Blue_Icon.png", "resources/images/twitter.png"];
        Ext.each(images, function (picture) {
            //var i = 0;
            imgArray.push({
                xtype: 'image',
                cls: 'br0',
                src: picture

            });
            console.log(picture);
            me.setImage(picture);
            me.addImage(picture);

        });
        carouse.setItems(imgArray);
        carouse.setActiveItem(0);
        this.add(carouse);

    },
    addImage: function (picture) {
        console.log(this.getImage());
        //console.log(this.getImageAdded());
        // if (!this.getImageAdded(picture)) {
        //if()
        var c = Ext.create('Ext.Container', {
            cls: 'stcrop-picture',
            width: '100%',
            height: '100%',
            cls: 'stcrop-image-container',
            style: 'margin:auto;background-size:100%;background-image:url(' + this.getImage() + ');background-position:center center;background-repeat:no-repeat;',
            draggable: {
                constraint: {
                    min: { x: 0, y: 0 },
                    max: { x: 0, y: 0 }
                },
                listeners: {
                    dragstart: {
                        fn: this.dragStart,
                        order: 'before',
                        scope: this
                    },
                    drag: this.drag,
                    dragend: this.dragEnd,
                    scope: this
                }
            }
        });

        c.element.on('tap', this.tap, this);
        c.element.on('pinchstart', function (e) {
            var xa = e.touches[0].pageX,
            xb = e.touches[1].pageX,
            ya = e.touches[0].pageY,
            yb = e.touches[1].pageY,
            x = Math.abs(xa - xb),
            y = Math.abs(ya - yb),
            h = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
            this.h = h;
        }, this);

        c.element.on('pinch', function (e) {
            var xa = e.touches[0].pageX,
            xb = e.touches[1].pageX,
            ya = e.touches[0].pageY,
            yb = e.touches[1].pageY,
            x = Math.abs(xa - xb),
            y = Math.abs(ya - yb),
            h = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));

            var p = parseInt(e.target.parentNode.style.backgroundSize);
            ((this.h - h) > 0) ? p-- : p++;
            e.target.parentNode.style.backgroundSize = p + '%';

            this.h = h;

        }, this);

        c.element.on('pinchend', function () { console.log('pinchend') });

        this.add(c);
        //this.setImageAdded(true);
        //}

        return c;
    },

    tap: function (e) {
        if (typeof this.cropper !== 'undefined') { this.cropper.destroy(); }
    },

    dragStart: function (d, e, x, y) {
        console.log(e.getTarget().className);
        var x = e.startX,
        y = e.startY;

        if (e.getTarget().className.indexOf('stcrop-image-container') === -1) { return false; }

        this.tap();

        this.cropper = Ext.create('Ext.Container', {
            height: 1,
            width: 1,
            top: y,
            left: x,
            style: 'position:absolute;z-index:10;border:1px dashed #333;background-color:rgba(0,0,0,0.3);'
        });

        Ext.Viewport.add(this.cropper);
        this.cropper.show();
    },

    drag: function (d, e, x, y) {
        var c = this.cropper,
        w = Math.max(e.startX, e.pageX) - Math.min(e.startX, e.pageX),
        h = Math.max(e.startY, e.pageY) - Math.min(e.startY, e.pageY);

        if (e.startX > e.pageX) { c.setLeft(e.startX - w); }
        if (e.startY > e.pageY) { c.setTop(e.startY - h); }

        c.setHeight(h);
        c.setWidth(w);
    },

    dragEnd: function (d, e, x, y) {
        var c = this.cropper;

        c.setHtml('<div class="stcrop-tab tab-top-left"></div>' +
    '<div class="stcrop-tab tab-top"></div>' +
    '<div class="stcrop-tab tab-top-right"></div>' +
    '<div class="stcrop-tab tab-left"></div>' +
    '<div class="stcrop-tab tab-right"></div>' +
    '<div class="stcrop-tab tab-bottom-left"></div>' +
    '<div class="stcrop-tab tab-bottom"></div>' +
    '<div class="stcrop-tab tab-bottom-right"></div>');

        c.setDraggable({
            constraint: {
                min: { x: parseInt(-c.getLeft()), y: parseInt(-(c.getTop() - this.element.dom.parentNode.offsetTop)) },
                max: { x: parseInt(this.getImageWidth() - (c.getLeft() + c.getWidth())), y: parseInt(this.getImageHeight() - (c.getTop() + c.getHeight() - this.element.dom.parentNode.offsetTop)) }
            }
        });

        console.log('top : ' + parseInt(c.getTop() - this.element.dom.parentNode.offsetTop));
        console.log('left : ' + c.getLeft());
        console.log('height : ' + c.getHeight());
        console.log('width : ' + c.getWidth());
    }
});

Answer 1

Here are some exiting solution for your problem. I have used Pinch zoom to image inside container earlier – but I do not rememeber I used any of these two or not.

1. https://market.sencha.com/users/134/extensions/159

2. http://www.sencha.com/forum/showthread.php?197903-Pinch-Image-with-carousel-and-working-fine