I'm using cropper, it's a jquery plugin I found at cropper web site.
I have an image size full hd 1920w on 1080h, and I need to give the user ability to crop in fixed box size 675*1080, my question is how do I set the options of this plugin ?
I've tried to do the follow with no success:
var c1 = $('.cropper-example-1 img').cropper({
//aspectRatio: 10 / 16,
strict: true,
background:false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
mouseWheelZoom: false,
touchDragZomm:false,
built: function () {
//alert(1);
// $(this).cropper('setData', 0, 0, 675, 1080,90);
// $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
}
});
After soo many trials this worked for me... i needed to set the initial width and height to 240px by 607px and this is my code.
var cropper;
var imgx;
$(function(){
var imgx = $('#cpdiv').find('img');
cropper = new Cropper(imgx[0], {
//aspectRatio: 1/2,
autoCropArea: 0,
strict: false,
guides: false,
highlight: true,
dragCrop: false,
//cropBoxMovable: false,
cropBoxResizable: false,
data:{
width: 240,
height: 607,
},
crop(event) {
console.log(event.detail.width);
console.log(event.detail.height);
},
});
});
i tried using the setCropBoxData({}) function which didnt work.. but this approach worked for me.
Try like this add autoCropArea: 0.5, and changes the built method
var $image=$('.cropper-example-1 img');
$image.cropper({
//aspectRatio: 10 / 16,
strict: true,
background:false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
mouseWheelZoom: false,
touchDragZomm:false,
autoCropArea: 0.5,
built: function () {
//alert(1);
// $(this).cropper('setData', 0, 0, 675, 1080,90);
// $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
$image.cropper('setCanvasData', 0, 0, 1920, 1080));
$image.cropper('setCropBoxData', 0, 0, 675, 1080);
}
});
built: function () {
//$image.cropper('setCropBoxData', 0, 0, 675, 1080);
$image.cropper("setCropBoxData", { width: 160, height: 80 });
or
$image.cropper("setCropBoxData", { left: 0, top: 0, width: 160, height: 80 });
}
If you want to make CropBox selection fit to Canvas use this
autoCropArea: 1,
To make CropBox selection has margin 50% from the Canvas
autoCropArea: 0.5,
try to limit its height and width on cropper.js.. not the best option but it fixed my problem. When user try to minimize the cropbox, it will stop at the set size creating a not so bad solution for now..:')
minCropBoxWidth: 350,
minCropBoxHeight: 350
Working code to set crop box. I am using jQuery Cropper v1.0.0
var $image = $(".image-crop > img");
var init_data = { x: parseFloat($("#event_crop_x").val()), y: parseFloat($("#event_crop_y").val()), width: parseFloat($("#event_crop_w").val()), height: parseFloat($("#event_crop_h").val()) };
$($image).cropper({
zoomable: false,
aspectRatio: 2 / 1,
preview: ".img-preview",
crop: function(event) {
$("#event_crop_x").val(event.detail.x);
$("#event_crop_y").val(event.detail.y);
$("#event_crop_w").val(event.detail.width);
$("#event_crop_h").val(event.detail.height);
},
data: init_data
});
Related
NET MVC Core and I am trying to use Particles.js. I have already tried referencing a few tutorials, but am unable to solve this issue. This is how it normally looks like. https://vincentgarreau.com/particles.js/#default
I got this however, with big and super laggy buttons and also it does not occupy full screen nor does it have the hover action (whereby the circle moves away as the mouse approaches). The onclick circle works though. And the configuration shouldn't be wrong, as I downloaded the default one.
Update: Just before posting I managed to make it full screen. However, the big buttons and lagginess remains.
The following is my codes so far. I tried to search the id or class but due to the lack of documentation it is quite hard to find. Hope someone who knows it can help! Thank you very much :)
#{
ViewData["Title"] = "Home Page";
}
<div id="particles-js" style="background-color: rgb(0, 0, 0); background-image: url(""); background-size: cover; background-repeat: no-repeat; ba">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<script src="~/js/particles.js" data-turbolinks-track="reload" asp-append-version="true"></script>
<script>
particlesJS("particles-js", {
particles: {
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#fff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#ff0000'
},
polygon: {
nb_sides: 5
},
image: {
src: '',
width: 100,
height: 100
}
},
opacity: {
value: 1,
random: false,
anim: {
enable: false,
speed: 2,
opacity_min: 0,
sync: false
}
},
size: {
value: 20,
random: false,
anim: {
enable: false,
speed: 20,
size_min: 0,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 3000,
rotateY: 3000
}
},
array: []
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 100,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 200,
size: 80,
duration: 0.4
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
},
mouse: {}
},
retina_detect: false,
});
//var count_particles, stats, update;
//stats = new Stats;
//stats.setMode(0);
//stats.domElement.style.position = 'absolute';
//stats.domElement.style.left = '0px';
//stats.domElement.style.top = '0px';
//document.body.appendChild(stats.domElement);
//count_particles = document.querySelector('.js-count-particles');
//update = function () {
// stats.begin();
// stats.end();
// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
// }
// requestAnimationFrame(update);
//};
//requestAnimationFrame(update);;
</script>
Update: I finally found the answer. To facilitate people who working on this in the future, make sure to use the download from the sidebar and not the one in the center.
Not this (the download in the center):
But this (the one at the bottom right side, "Download current config(json)"):
I was reading some code today and came across this. This is using the Revolution slider with extensions, link to their site here. I'm not entirely sure what this huge piece of code does, and was wondering if there was anyone that could help me out with this. In the code, it says navigation, so is this how the website makes its navigation bar? I was viewing the actual code and noticed that no-where in the code was there an actual place that made the navigation bar. So I'm assuming they used this or some other JavaScript to insert the nav-bar without coding it directly in HTML.
<script type="text/javascript">
var tpj=jQuery;
var revapi4;
tpj(window).load(function() {
if(tpj("#rev_slider_4_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_4_1");
}else{
revapi4 = tpj("#rev_slider_4_1").show().revolution({
sliderType:"standard",
jsFileLocation:"assets/revolution/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation: "on",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "off",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
style: "gyges",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '',
left: {
h_align: "left",
v_align: "center",
h_offset: 10,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 10,
v_offset: 0
}
},
bullets: {
enable: false,
hide_onmobile: false,
style: "gyges",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "top",
h_offset: 0,
v_offset: 20,
space: 5,
tmp: ''
}
},
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
responsiveLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[868,768,960,720],
lazyType:"none",
shadow:0,
spinner:"off",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"off",
fullScreenAlignForce:"off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar:"on",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
}); /*ready*/
</script>
Thanks a bunch, I appreciate the help!
I am using the excellent Fabric.js to draw some text in a canvas. When I specify a custom size ( let's say a 200x200 rectangle) to my IText Object, it seems that Farbric.js force the width and the height of the object to fit around the text.
var t = new fabric.IText("Hello world !", {
top: 100,
left: 100,
width: 200,
height:200,
backgroundColor: '#FFFFFF',
fill: '#000000',
fontSize: 12,
lockScalingX: true,
lockScalingY: true,
hasRotatingPoint: false,
transparentCorners: false,
cornerSize: 7
});
Here is a Fiddle with my problem : http://jsfiddle.net/K52jG/4/
In this example, I want the "Hello World!" text to be in a 200x200 box. Is it possible to do that, and how ?
OK, so because it is not possible, the best way I found to is to nest the IText box in a Rectangle object, using a Group
var r = new fabric.Rect({
width: 200,
height: 200,
fill: '#FFFFFF',
});
// create a rectangle object
var t = new fabric.IText("Hello world !", {
backgroundColor: '#FFFFFF',
fill: '#000000',
fontSize: 12,
top : 3,
});
var group = new fabric.Group([ r, t ], {
left: 100,
top: 100,
lockScalingX: true,
lockScalingY: true,
hasRotatingPoint: false,
transparentCorners: false,
cornerSize: 7
});
Example in this Fiddle : http://jsfiddle.net/4HE3U/1/
Note : I have to set a "top" value to the text because it goes out of the box. The value seem to be : fontSize / 4
i'm using knob jQuery to create an interactive knob, that, allowing sunstantial to see how much energy is consuming its power grid
this is the code that generate the knob
$(function(){
$(".dial").knob({
'min':0,
'max':5000,
'readOnly': true,
'width': 120,
'height': 120,
'float' : 'left',
'fgColor': '#b9e672',
'dynamicDraw': true,
'thickness': 0.2,
'tickColorizeValues': true,
'skin':'tron'
})
// body...
});
and this is the input:
<input id='knobinput' type='text' value='75' class='dial'>
I would like to make sure that if the knob is less than 1500 is green,
if between 1500 and 3000 yellow and red if above 3000.
how can I do this?
thanks
Try this:
var $dial = $('.dial');
var dialColour = '#C00';
if ($dial.val() < 3000) {
dialColour = '#CC0';
}
else if ($dial.val() < 1500) {
dialColour = '#0C0';
}
$dial.knob({
'min':0,
'max':5000,
'readOnly': true,
'width': 120,
'height': 120,
'float' : 'left',
'fgColor': dialColour,
'dynamicDraw': true,
'thickness': 0.2,
'tickColorizeValues': true,
'skin':'tron'
})
I've implemented the galleriffic gallery in my site. I've started from a demo implementation, and I've added it into my site, and it worked fine.
But when I uploaded everything to the production server, I got a weird error that says:
"missing } after function body
jQuery(document).ready(function($) ...o('fast', 1.0); } }); }); "
This is the galleriffic script:
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Iniciar presentación',
pauseLinkText: 'Detener presentación',
prevLinkText: '‹ Foto Anterior',
nextLinkText: 'Próxima foto ›',
nextPageLinkText: 'Prox ›',
prevPageLinkText: '‹ Ant',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
I've the same files on my local, and in the production server, so I'm really annoyed. I would really appreciate your help.