I have two JSSOR sliders working except the responsive part only works for one slider.
Even duplicating the responsive code does nothing. Anyone have any ideas?
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
var jssor_slider2 = new $JssorSlider$("slider2_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
For all the code the website is http://garyedwardrotter.com and the portions with the sliders are in the photography section. Just the first two are setup right now and I have used the same exact code/slider setup for both.
Any help is very appreciated, thank you.
Please replace
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
with
if (parentWidth) {
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
jssor_slider2.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
}
The answer I found was to repeat this code for the amount of sliders you will be using:
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
else
window.setTimeout(ScaleSlider, 30);
var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider2.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
Related
I made an automatic scrolling bar in flutter, the way I made it scroll automatically by using a combination of a timer and scroll controller, and then I linked the scroll controller to a regular ListView.builder, blew is the implementation of my way to do it
#override
void initState() {
super.initState();
int _length = widget.items.length;
currentItems = widget.items;
// scroll smothly to the end of the list then reverse the scroll
bool isAscending = true;
_timer = Timer.periodic(const Duration(milliseconds: 3000), (timer) {
if (isAscending) {
_currentIndex++;
if (_currentIndex == currentItems.length) {
isAscending = !isAscending;
}
}
if (!isAscending) {
_currentIndex--;
if (_currentIndex == 0) {
isAscending = !isAscending;
}
}
_scrollController.animateTo(_currentIndex * 304.0,
duration: const Duration(milliseconds: 3000), curve: Curves.linear);
});
}
my problem here is when I navigate to another screen or press the phone's home button and stay away from this widget for a while and then come back, I'd find it scrolling so fast to catch the currentIndex ( which is far away from where I left it ) in a period of time that I specified for the .animateTo method, I'm guessing the solution is to somehow pause the timer when I'm not in the same route, but I didn't find any reference of how to implement that
I'm using the following code, yes its incomplete and pretty little sphagetti as:
WidgetsBinding.instance!.handlePointerEvent(PointerDownEvent(pointer: 0, position: Offset(Get.width/2,Get.height/2)));
WidgetsBinding.instance!.handlePointerEvent(PointerMoveEvent(
pointer: 0,
//timeStamp: Duration(seconds:10),
position: Offset(Get.width/2+10,Get.height/2),
// delta: Offset(-10,Get.height/2),
// distanceMax: 0.05,
));
WidgetsBinding.instance!.handlePointerEvent(PointerUpEvent(pointer: 0),);
I'm trying to simulate a pointer drag on the screen, considering the screen is in landscape mode, from the middle of screen, to probably 10pixels+, to scroll the content a bit on a button-press. But the scroll is happening very fast, and sometimes scrolls with variable speed.
Could anyone recommend something?
Thanks to #pskink, the code he provided has been very helpful, and does answer the question too
late Animation<Offset> animation;
#override
void initState() {
super.initState();
final controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
controller.addListener(_listener);
animation = Tween(begin: Offset(100, 100), end: Offset(200, 150)).animate(controller);
print('handle down event');
controller.forward().then((value) => print('handle up event'));
}
_listener() {
print('handle move event ${animation.value}');
}
Let's say I have an image under file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1542035689920.jpg path. Is it possible to display this image in <image> tag just by assigning .url property? Probably not, if so are there any good solutions to do it? I'm trying to do a thumbnail of an image in the list, the way I've done it is to read an image as base64, convert it with the usage of canvas then display it. Problem is it takes too much time to render all the images.
ionViewDidLoad() {
this.defectImages.forEach(defectImage => this.loadThumbnail(defectImage.url))
}
loadThumbnail(url) {
return this.fileProvider.getDefectCachedImage(url)
.then(data => {
return this.generateFromImage(data, 400, 400, 0.5, thumbnail => {
let image = document.getElementById(url) as any;
image.src = thumbnail;
})
});
}
showImage(url: string) {
this.photoViewer.show(this.fileProvider.getCacheFolderPath() + url, '', {share: true})
}
generateFromImage(img, MAX_WIDTH: number = 700, MAX_HEIGHT: number = 700, quality: number = 0.5, callback) {
var canvas: any = document.createElement("canvas");
var image = new Image();
image.onload = () => {
var width = image.width;
var height = image.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, width, height);
// IMPORTANT: 'jpeg' NOT 'jpg'
var dataUrl = canvas.toDataURL('image/jpeg', quality);
callback(dataUrl)
};
image.src = img;
}
It is working but working too slow. I have noticed PhotoLibrary package but as far I know it access to the shared memory and my pictures are being held in app only space.
This is the issue with the latest webview. The latest webview is not allowing the local resources to load. It was working fine on Ionic 2. Though not an optimal solution, I'm pasting the solution that worked for me.
ionic cordova plugins rm cordova-plugin-ionic-webview
ionic cordova plugins add cordova-plugin-ionic-webview#1.2.1
cordova clean android
And you can build(ionic cordova build android) the app and test it.
The code I am using below only re-sizes the image slider upon page load, but doesn't re-size if the window size has changed, neither if the orientation of a mobile device changes.
<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('imageslider', options);
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(parentWidth);
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
});
</script>
Thanks in advance jssor
For jquery version,
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
For no jQuery version,
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
else
$Jssor$.$Delay(ScaleSlider, 30);
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
I used this to cover both re-size and orientation change.:
window.addEventListener("orientationchange", function() {ScaleSlider();}, false);
window.addEventListener("resize", function() {ScaleSlider();}, false);
jssor is very nice slider! It is working well for a dynamically generated images. Thank you for the great tool. There is only one problem that remains.
The width of the slider container is 640px and I wanted the container to resize when the external container div becomes small. I does it well to diminish the image as desired. However,
1. when I resize the browser again and make a new image search. The slider occupy the entire external div width. So it only appear filling the entire area more than 640px width.
2. The responsiveness doesn't work on mobile devices. I tested in chrome and android browser both in android devices.
The codes I was using
Code 1:
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $("#slider1_container").parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
}
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
Code 2:
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
if ( $(window).width() > 900 ) {
function ScaleSlider() {
var parentWidth = $("#slider1_container").parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
}
}
//Scale slider after document ready
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
//Capture window resize event
$(window).bind("resize", ScaleSlider);
}
Please scale the slider no more than 640 in width.
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $("#slider1_container").parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 640));
}
}
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);