Search the Community

Removed due to my space size quota. See at https://www.uniguiexpress.com It is just a simple example using uniURLFrame but with a nice carousel menu. Where in JavaScript says "Place your ajaxRequest..." you should provide your callback code to trigger the menu. You can change the CSS to remove de number. It is just for reference.

Hi all, I am trying to test having a carousel in mobile app with pinch to zoom functionality. I found this amazing example: https://github.com/SunboX/ST2_ImageViewer https://www.sencha.com/forum/showthread.php?197903-Pinch-Image-with-carousel-and-working-fine But I can't get it to work with unigui mobile or desktop I changed files paths in .js or html to correct "files/..." to work correctly with unigui, also added this code to BeforeScript property in UnimHTMLFrame1: Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'files/ux' } }); Ext.define('Demo.Viewport', { extend: 'Ext.Carousel', xtype : 'my-viewport', config: { items: [ { xtype: 'imageviewer', style: { backgroundColor: '#333' }, imageSrc: 'files/images/Desert.jpg' }, { xtype: 'imageviewer', style: { backgroundColor: '#333' }, imageSrc : 'files/images/Hydrangeas.jpg' }, { xtype: 'imageviewer', style: { backgroundColor: '#333' }, imageSrc: 'files/images/Chrysanthemum.jpg' } ], listeners: { activeitemchange: function(container, value, oldValue, eOpts) { if (oldValue) { oldValue.resetZoom(); this.getActiveItem().resize(); } }, resize: function(component, eOpts) { this.getActiveItem().resize(); } } }, 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); } }); Ext.define('Demo.ViewportPanel', { extend: 'Ext.Panel', xtype : 'my-viewport-panel', config: { fullscreen: true, layout: 'fit', items: [{ xtype: 'titlebar', docked: 'top', items: [ { text: 'ZoomIn', listeners: { tap: function() { Ext.getCmp('myCarousel').getActiveItem().onZoomIn(); } } }, { text: 'ZoomOut', align: 'right', listeners: { tap: function() { Ext.getCmp('myCarousel').getActiveItem().onZoomOut(); } } } ] }, { xtype: 'my-viewport', id: 'myCarousel' }] } }); Ext.application({ name : 'ImageViewer Carousel Demo', views : [ 'Ext.ux.ImageViewer' ], launch: function() { Ext.Viewport.add({ xtype: 'my-viewport-panel' }); } }); or this for single image viewer Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'files/ux' } }); Ext.application({ name : 'Simple ImageViewer Demo', views : [ 'Ext.ux.ImageViewer' ], launch: function() { Ext.Viewport.add({ xtype: 'imageviewer', style: { backgroundColor: '#333' }, imageSrc: 'files/desert.jpg' }); } }); All I get is the "loading..." the carousel radio buttons are working but images are not sliding and the two buttons on the top panel (zoomin/zoomout) are working too. Sorry to bother you guys but I am not good with html/css or js so i can fix this on my own Any help will be appreciated Thanks in advance

Uygulamanın run time ında formumda bulunan UnimCarousel nesnesine UnimCarouselPage ekliyorum ama eklediğim UnimCarouselPage ler arasında kodlarla geçiş yapamıyorum. Örnek olarak; UnimCarousel.SelectNextPage(True); UnimCarousel.SelectNextPage(False); veya UnimCarousel'in PageIndex değerini UnimCarousel.PageIndex := UnimCarousel.PageIndex+1 artırıp azaltarak Pageleri değiştiremiyorum. UnimCarousel'in PageCount'unda da run time da eklediğim UnimCarouselPage sayısı gelmiyor. Bu yazdığım kodlar eğer UnimCarouselPage'leri Formun tasarım ekranında eklersem sıkıntısız çalışmakta. Yardımcı olursanız sevinirim.