I have 5 different slides, the first four slides with the same transition, only the last slide should act with a different transition.
I have defined the transitions in the _SlideshowTransitions arrays, shown here:
var _SlideshowTransitions = [
{$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}},
{$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}},
{$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}},
{$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}},
{$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},$Opacity:2}
];
Works great as long as you do not use the navigation arrows or bullets! How can I allocate the one different transition to the one special slide ?
thanks in advance
JD
You can use api $SetSlideshowTransitions to set slideshow transitions dynamically anytime.
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function SetSlideshowTransition() {
switch (jssor_slider1.$CurrentIndex()) {
case 3:
jssor_slider1.$SetSlideshowTransitions([{$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},$Opacity:2}]);
break;
default:
jssor_slider1.$SetSlideshowTransitions([{$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}}]);
break;
}
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, SetSlideshowTransition);
Related
I'm trying to create a slider that will update every time a slide is altered. I've got it set to observe, observeParents, and observeChildren, and it works the first time I show or hide slides, but it's only working once. Is there a good workaround for this?
Here's a link to the page with the slider on it. Click the color swatches to see what I'm talking about. Thanks in advance!
I figured out a workaround! I added a data-element called data-slides that updates on the container when you click to make the slideshow change, like so.
thumbnails.each(function() {
var wrapper = $(this);
container = $('.swiper-container');
color = colorLabel.val();
while (wrapper.parent().children().length === 1) {
wrapper = wrapper.parent();
}
if (jQuery(this).attr('alt') === optionValue) {
wrapper.fadeIn('500').show();
container.attr('data-slides', color);
} else {
wrapper.fadeOut('500').hide();
}
});
It triggers the observe function and allows it to update as necessary.
i'm having some troubles solving this.
I need to keep navigator series always visible.
The problem is when i click in one legend item, the serie linked to this legend dissappears. Thats fine.
But the serie in the navigator dissappears to, and i don't want this.
I tried with the "adaptToUpdatedData" parameter, not working.
I tried handling the events in "legendItemClick" and hide show the series manually, but this hides the navigator series also.
Please help! I tried almost everything.
The only i managed to achieve it is keeping all the series with the parameter "showInNavigator" false, and then add the series in navigator.series.
But i think is not a good solution.
Thanks.
I add hide events to series with showInNavigator: true. These call a function which does:
var chart = this.$refs.highcharts.chart
for (var series of chart.navigator.series) {
series.setVisible(true, false)
}
chart.redraw()
You can use Highcharts removeEvent method to remove the connection when changing visibility between the chart series and the navigator series:
chart: {
events: {
load() {
this.series.forEach(function(s) {
if (!s.baseSeries) {
H.removeEvent(s, 'show');
H.removeEvent(s, 'hide');
}
});
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/69rwjsce/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.removeEvent%3CT%3E
Is it possible to have manual trigger for transitions from one slide to another.
If I use $JssorArrowNavigator$, it does slide to next/previous, but without transitions.
Adding custom actions $PlayTo, $GoTo, $Next also just slides to next, but without transition.
$Play starts the slideshow with the transitions but there is some initial lag of ~10s.
Slideshow transition plays only for 'auto play'.
While auto play, you can assign transition for specific slide.
function SlideParkEventHandler(slideIndex, fromIndex)
{
if(slideIndex == 0)
{
jssor_slider1.$SetSlideshowTransitions([{transition_code1}]);
}
else if(slideIndex == 1)
{
jssor_slider1.$SetSlideshowTransitions([{transition_code2}]);
}
else
{
jssor_slider1.$SetSlideshowTransitions([{transition_code3}, {transition_code4}, ...]);
}
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
I have an MVC multi item & paged image carousel in Sencha Touch 2, which works perfectly on it's own when added to the Viewport on init.
However, the problem I am having now is how to adapt it to my tab panel style app. I am a little unclear where I should put the code, at init or (I'm guessing) in the controller which fires on click of the specific tab. My tabpanel style app was downloaded from Github (Sencha touch 2 boilerplate template).
My working MVC carousel calls the following in the app.js:
controllers: ['Main'],
views: ['Carousel', 'Page'],
stores: ['Thumbnails'],
models: ['Thumbnail'],
launch: function () {
var carousel = Ext.create('Ext.Carousel');
Ext.Viewport.add(carousel);
Ext.getStore('Thumbnails').load(function (apps) {
var cols = 4, rows = 4; // todo: change for tablets
var page;
var btn;
var iPage = 0;
var iApp = 0;
var x = 1, y = 1, z = 0;
var row, grid, bottomrow;
var firstpage = 0;
etc....code cut for readbility.
Basically I want this carousel to appear on the second tab of the tabpanel, not initially on the viewport how it works now. Perhaps I should have the working launch code in a controller that fires when I'm on that tab of the tabpanel? I'm not sure of the best way to approach this.
Here is the launch function of my tabpanel app, with the
launch: function() {
Ext.create('TCApp.view.Viewport', {fullscreen: true});
// I have tried adding this working launch code after creating the Viewport, but maybe it should be in the controller? But I'm not sure how to go about it...
var carousel = Ext.create('Ext.Carousel');
Ext.Viewport.add(carousel);
Ext.getStore('Thumbnails').load(function (apps) {
var cols = 4, rows = 4; // todo: change for tablets
var page;
var btn;
var iPage = 0;
var iApp = 0;
var x = 1, y = 1, z = 0;
var row, grid, bottomrow;
var firstpage = 0;
Any help would be much appreciated!
You are adding your carousel to Ext.Viewport, which is the component that gets instantiated by default on application bootstrap. So, instead of using Ext.Viewport.add(carousel);, and adding it to the Viewport itself, try with
tabpanel.add(carousel);
Where tabpanel is the reference to your tab panel instance. This way you'll be adding the carousel to the first available card in Ext.tab.Panel
Thanks Grgur, it helped. I eventually solved it this way, making sure to have a title and iconCls otherwise I get an error in the console when adding the carousel item to the tabpanel:
var carousel = Ext.create('Ext.Carousel', {
title: 'Carousel',
iconCls: 'info'
});
var MyTabPanel = Ext.getCmp('mytabpanel');
MyTabPanel.add(carousel);
I have a nestedList with a few levels that appears when the user presses a button on the screen. When the nestedList appears, there is no back button (because we're at the top of the tree, so understandably there is nowhere to go back to), whereas tapping on items in the list takes you to screens with a back button.
I'd like to add a back button to the first screen. I have managed to do this, but not without adding the same back button to every sublist in the nestedList - this has the effect of 1 back button at the top level, and 2 back buttons (one to take you out of the nestledList completely, and one to take you up a level) at every subsequent level.
Can anyone help me figure out how to have 1 back button on each screen, including the top level to close the list?
Many thanks
PS a nasty workaround that I'm using at the moment is to have a "close" button in the top right of every screen instead.
I don't know how comfortable you are with the inner workings of Sencha Touch so how you go about doing this is up to you--
The back button is there, hidden, when the nested list is shown (created in the initComponent function with hidden: true), and then onBackTap, onItemTap and setActivePath will all call syncToolbar near the end of their functions which is where the back button is hidden when you are at a depth of 0.
So there are 2 places you need to do something about, first is initComponent which is easy-- just implement initComponent in your nestedList, call the superclass' initComponent and then set the backButton visible
var myNestedList = new Ext.NestedList({
...,
initComponent: function() {
myNestedList.superclass.initComponent.call(this);
this.backButton.setVisible(true);
},
...
});
That takes care of showing it intially.. how you care to deal with fixing syncToolbar is up to you. You can use Ext.override, you can straight up copy and paste the whole syncToolbar function into your nestedList object which would also override it or you could do what you're told never to do and just edit the sencha-touch.js file directly. However you decide to do it, what you're looking to change is
syncToolbar: function(card) {
...
backToggleMth = (depth !== 0) ? 'show' : 'hide';
if (backBtn) {
backBtn[backToggleMth]();
if (parentNode) {
backBtn.setText(backBtnText);
}
}
... };
You can either change backToggleMth to = 'show' or just delete the if (backBtn {...} all together.
In the Sencha Touch 2.2 I had to use a different code:
Ext.create('Ext.NestedList', {
...,
listeners: {
initialize: function(obj) {
obj.getBackButton().show();
},
back: function(obj, node, lastActiveList, detailCardActive) {
switch(node.getDepth()) {
case 1:
obj.getBackButton().show();
break;
case 0:
alert("wohooooooo!");
break;
}
}
}
}