Pinch Image with carousel and working fine

[pepperseb]

i think that you you can use
me.imgEl.setStyle({ visibility: 'hidden' });
or
me.imgEl.setStyle({ disabled: 'true' });

No it doesn't work. I also tried to get the carousel with getParent() but I coundn't find any methods to stop switching image...

Actually I'm quite surprise that nobody asked for this because the imageviewer doesn't work properly for me when the current image is zoomed in. What's happening? If I try to scroll horizontally a llitle bit too fast, when image is zoomed in, the current image is switched.

bug.jpg

[montymccune]

Is there a trick to just getting an image to load? My simple implementation....

Ext.define("PhoenixTouch.view.Xray", {
    extend: 'Ext.Container',


    requires:['PhoenixTouch.view.PinchZoomContainer',
        'PhoenixTouch.view.XrayThumbnailSlider',
        'Ext.mixin.Observable',
        '
Arkivus
.ImageViewer'],
    xtype: 'xray',


    config: {


        layout: 'fit',


        items: [
        {
            xtype: 'imageviewer',
            imgSrc:'https://192.168.0.99/phoenix/xrays/PAT1000000021/1.2.392.200036.9125.2.691113118120.64559415338.1668133/J1.2.392.200036.9125.9.0.118444256.821560832.1901820022.jpg',
        }
        ]
    }
});

The link is legit - I can navigate to in in Chrome. Also, if I dont set imgSrc in config, and then later try to set the image in the controller via loadImage i get "invalid left-hand assignment"...

   ,loadImage: function(src) {    
        if(this.imgEl){
            this.imgEl.dom.src = src;
            this.imgEl.dom.onload = Ext.Function.bind(this.onLoad, this, this.imgEl, 0);
        }
        else
            this.getImageSrc() = src; <------ right hereUncaught ReferenceError: Invalid left-hand side in assignment



    }

[armode]

Why don't you add the imageviewer component via xtype where you need it?

...
items: [{
    xtype: 'imageviewer',
    imageSrc: 'https://192.168.0.99/phoenix/xrays/PAT1000000021/...',
}]

You can look at the examples from Chris, too, who wrote the component for ST1...

[montymccune]

see above post... I dont see how you're suggestion differs from what I did? Am I missing something?

thanks for the quick reply, monty

Why don't you add the imageviewer component via xtype where you need it?

...
items: [{
    xtype: 'imageviewer',
    imageSrc: 'https://192.168.0.99/phoenix/xrays/PAT1000000021/...',
}]

You can look at the examples from Chris, too, who wrote the component for ST1...

[pepperseb]

I can see that you put imgSrc instead of imageSrc

[montymccune]

I can see that you put imgSrc instead of imageSrc

wow, you really have to pay attention with this language

thanks tons - made my day!

[montymccune]

So I still have one issue - trying to dynamically load images into the imageSrc. All the examples I have seen so far have been statically loaded. I have tried to use the loadImage method but it gives me a "Uncaught ReferenceError: Invalid left-hand side in assignment" error. Is there a way to modify this to load the images from a list of thumbnails? I am not using this as a carousel, just a single image viewer. I DO have the thumbnail list already. Any help would be much appreciated!

monty

[Gaelmart]

Similar Question. How to load images dynamically, but I'm in an override file as I'm using Sencha Architect i.e.


Ext.define('BoilerShop.OverrideDiagramCarousel', {
override: 'BoilerShop.view.DiagramCarousel',
config: {

items: [
{
xtype: 'imageviewer',
style: {
backgroundColor: '#222'
},
imageSrc: 'http://www.ibasis.co.uk/Uploads/SAUNIER DUVAL/1281301.png'
},
{
xtype: 'imageviewer',
style: {
backgroundColor: '#222'
},
imageSrc: 'http://www.ibasis.co.uk/Uploads/SAUNIER DUVAL/1281302.png'
},
{
xtype: 'imageviewer',
style: {
backgroundColor: '#222'
},
imageSrc: 'http://www.ibasis.co.uk/Uploads/SAUNIER DUVAL/1281303.png'
},
{
xtype: 'imageviewer',
style: {
backgroundColor: '#222'
},
imageSrc: 'http://www.ibasis.co.uk/Uploads/SAUNIER DUVAL/1281304.png'
},
{
xtype: 'imageviewer',
style: {
backgroundColor: '#222'
},
imageSrc: 'http://www.ibasis.co.uk/Uploads/SAUNIER DUVAL/1281305.png'
}

]

},
constructor: function (config) {
this.callParent(arguments); // calls Ext.tip.ToolTip's constructor
alert('This gets shown so were ok here');
}

});

[umbro77]

No it doesn't work. I also tried to get the carousel with getParent() but I coundn't find any methods to stop switching image...

Actually I'm quite surprise that nobody asked for this because the imageviewer doesn't work properly for me when the current image is zoomed in. What's happening? If I try to scroll horizontally a llitle bit too fast, when image is zoomed in, the current image is switched.

You have to add the following code to your Carousel component:

onDragStart: function (e) {
                            var scroller = this.getActiveItem().getScrollable().getScroller();
                            if (e.targetTouches.length == 1 && (e.deltaX < 0 && scroller.getMaxPosition().x === scroller.position.x) || (e.deltaX > 0 && scroller.position.x == 0)) {
                                this.callParent(arguments);
                            }
                        },
                        onDrag: function (e) {
                            if (e.targetTouches.length == 1)
                                this.callParent(arguments);
                        },
                        onDragEnd: function (e) {
                            if (e.targetTouches.length < 2)
                                this.callParent(arguments);
                        }

[umbro77]

I've disabled the carousel switch while the image is zoomed because the previous code doesn't work as expected.

My solution:

onDragStart: function (e) {
        if(this.getActiveItem().scale < 1) {    
            this.callParent(arguments);
        }
    },