Hello I am trying to create a webpage that has two image sections. I would like to use you slider for each image section. The first one loads ok but the second one doesn't. i keep getting this error:
JSSOR Uncaught Error: prototype of 'thumbnavigator' not defined
I know from a similar post that you cant have a 2nd container with the same name.
I tried changing the 2nd slider id to "slider2_container" but that didn't work.
Is there any way for me put two sliders on a single page?
any help would be appreciated as I don't really want to start all over again with a different slider.
the slider Im using is the one on the top of this page
http://www.jssor.com/demos/image-gallery.html
Related
I'm developing a webpage for that contains Jssor slider. I'm using jssor.slider-27.5.0.min.js. The webpage also have daterange picker. I have button that generate Jssor slider based on selected dates.
At default, the webpage brings images for the past 30 days and show them as Jssor slider. At this point, the slider works fine. When the Jssor slider generator is clicked, the existing Jssor slider is removed using $("#jssor_1").html(""). Then another Jssor slider is created and correct image is shown on the webpage. However, I cannot change/drag pictures.
Can you please help me to resolve my issue?
thanks.
Simply clear inner html will break the dom hierarchy of elements, it doesn't work.
You can use $AppendSlides(slidesHtml[, slideIndex]), $RemoveSlides(slideIndices), $ReloadSlides(slidesHtml) to manage slides.
See https://www.jssor.com/development/api-methods-properties-events.html
I have tried to create custom components which are subsets of slides. I'm trying to create a custom Ionic component which is a subset of slides. Then I can mix and match subsets of slides in one to make a complete slide show. Like building a master process from sub-processes. You should be able to swipe back and forth between all slides as expected, no matter an directly in the component, or slides within custom components.
I've tried various methods to no avail. Any ideas?
PLEASE SEE THIS SAMPLE PROJECT WITH 2 METHODS I HAVE TRIED TO ACCOMPLISH THIS.
No. You can't do this. You can put a into another if one scrolls vertically and one horizontally. You can insert a custom component into an which just has a couple slides in it, put the inserted slides show one over the other vertically with no way to swipe back and forth. So, no. You can't do this. Perhaps with dynamic templates you can build the from code dynamically. That's the only work around I can see.
I want to use multiple jssor slider on a single page. However, it is working only with div id = "jssor_1".
Can you please suggest on how to use multiple jsson slider on a single page?
Thank you in advance,
Rajesh
Each slider should have an unique id.
If the first is jssor_1, you can set the id of the second slider to jssor_2.
And make sure to replace all 'jssor_1' with 'jssor_2'.
Here is an option ID to make slider with different id easily.
See Options
I have just started using a library called JSSOR (for sliding elements) http://www.jssor.com/ and I'm wondering if there can be more than one element sliding on the same page.
I couldn't get it to work using a javascript library called marquee (not marquee the tag).
Yes, you can place multiple jssor sliders on one page.
Note that different slider uses different name. If the name of the first slider is slider1, you can name the second slider as slider2 then.
Btw, you can search jssor multiple on stackoverflow.
Chat portlet is displayed as a long bar at the bottom of the screen. I want to write a similiar portlet.
I can draw my bar anyway on the screen with CSS styles and also I have learned how to make static portlet visible always for all users with portal-ext.propeties.
But along with my bar, Liferay draws standard portlet frame with a title and controls on it. I found that it is named "topper" in HTML code.
So how to disable topper and border for one specific portlet in the way chat-portlet did it? I failed to figure this out from chat-portlet sources.
I found two options which can be relevant to this
<use-default-template>false</use-default-template>
<system>true</system>
but they weren't work.
First one causes ClassNotFoundException and second one causes portlet content not reaching page source.
Thanks.
I was to use
<use-default-template>false</use-default-template>
correctly. It does not work if placed in incorrect order.