Is there a way to get lightbox to automatically move on to the next image without the need for pressing the arrow buttons to move on?
The view I'm asking about is when one has already clicked on the already moving carousel to get the lightbox(Image attached below).
View of lightbox I want to automatically move to the next image.
Thanks
The Lightbox API doesn't expose this feature but you can programmatically click on the 'next' navigation button with Javascript. This could be done on a timer with setInterval.
// Simplified code
setInterval(() => {
$('.lb-next').trigger('click');
}, 2000)
Related
I also want to when I click on the background and there are other pressable things/buttons on this background, they are not being pressed unless the state is back to when it is un-blurred (basically: only the blurred background can be pressed when the screen is blurred). If you need an example look at twitter mobile: when you click on the post (+) button, it blurs the background but when clicked back it un-blurs it. (Must work for IOS and Android).
I think you need this..
In CSS create 2 classes - First one with the blur and second one without.
In React create 2 functions - 1 onclick for the blur-button and 1 onclick for the close button. These functions should change the class of body.
$('.button').click(function(){
$('body').addClass('blur'); });
I'm using the react-slick library to make a slider, and I would like to change active slides and the slide which is at the top of the slider. For example, if I click on a button in the current page, I want the current slide at the top of the slider to change.
Do you know if is it possible to do this properly with this library?
I found a solution on the react-slick github (https://github.com/akiran/react-slick/issues/738), which consists of creating a ref to the slideshow and setting the focus via this.slider.innerSlider.list.focus(). However, this does not work very well, because the element I want is not at the very top of the slider. For example, if I set the focus on the second to last slide, the first element of my list is not accessible any more via the arrows.
If this.slider is a ref to your Slick component, you can force the slideshow to show a slide by calling the method slickGoTo() with the index of the desired slide. For example, to show the second slide:
this.slider.current.slickGoTo(1);
For details on the methods that you can call using your ref, see: react-slick API: Methods.
In a Codenameone app, I'm trying to develop a carousel with a thumbnail list at the bottom. I've used Tabs control to display files (of diff types like images, video, text, button etc) in carousel style in the center of a form and another Tabs control to display thumbanail images (of the first carousel files) at the bottom of the form. When a user selects a thumbnail image in the bottom carousel, corresponding component should be displayed in the first carousel.
hi.add(BorderLayout.CENTER, mainCarousel);
hi.add(BorderLayout.SOUTH, bottom_tab);
bottom_tab.addSelectionListener((i1, i2) -> {
// bottom_tab.getTabComponentAt(i2).addPointerPressedListener((i) -> {
mainCarousel.getTabComponentAt(i2).setVisible(true);
mainCarousel.getTabComponentAt(i2).repaint();
// });
});
But the component not getting displayed in the central carousel.
Also, I tried to capture the event addPointerPressedListener, but it's not getting fired when I select a thumbnail image.
You can't set tab components to visible/invisible to show/hide them. That won't work. I'm guessing that what you want is a horizontal list for the bottom UI similar to the answer here.
I would suggest using pointer released always. Notice that this will only get delivered to focusable components or the form. To make sure you get the event you can register a pointer release listener on the form.
I'm working on a mapping app using ionic and leaflet. Note that I am not using the leaflet angular directive, I am using straight JS for the leaflet map (I know, I know...).
The initial state in my app loads the leaflet map just fine. If I switch to another state and back to the map everything is also fine. However, if I launch the app, switch to a different state and open a modal window in that state, then return to the original state, the map is broken and displays a number of grey tiles. The map will not update until the browser window resizes or the orientation of the mobile device is changed.
Here's a demo on Plunker: http://plnkr.co/edit/w67K2b?p=preview. To reproduce:
Click the button at the right side of the navbar which will take you to a different state.
Click the 'Back to map' button to go back to the original state. The map looks just fine.
Click the button in the navbar again.
Click the 'Open modal' button and then close the modal.
Click the 'Back to map' button and you will see that the map is now broken.
I've seen other people report issues with grey tiles, which typically can be resolved with a call to:
map.invalidateSize()
Unfortunately this does not resolve my issue. I'm pretty much a newb, but I think the problem is that when the modal opens, the invalidateSize() method in the leaflet source code is run, since the map div is not visible, the 'size' gets set to x:0, y:0 which ends up breaking the map when I transition back to the original state.
I'm not really sure where to go from here. Perhaps I can use JS to dynamically resize the div and trick leaflet into thinking a resize event has occurred? How would I do this? Any other thoughts?
Thanks!
I have a big image with coordinate points.
I need to navigate through these points by pressing onscreen buttons.
Only a part of image is seen on the screen at once (shows your location).
By pressing arrow button the view moves to the next part of the same image.
This example looks good.
Please, suggest any way to implement this functionality in Codename One App
Thank You.
You can use the Map component but you can place any image as a label icon within a scrollable container and just let the user use the touch/keys to scroll.