I'm using the Anystretch jQuery plugin to fill the area of a <div> with rotating images. At first an intro image fades in, and then the rotation starts. I'm using the images loaded in to an array, and then chosen at random:
$('body.home div.home-slider').anystretch(sliderImages[0], {speed: 250});
setTimeout(function(){
setInterval(function(){
var chooseNewImage = Math.floor(Math.random() * 4);
$('body.home div.home-slider').anystretch(sliderImages[chooseNewImage]);
}, 2500);
}, 3000);
What I'd like to happen with the rotation is for the images to cross-fade/transition. Is this possible? Can someone lend a hand as to how to achieve this?
Related
I'm currently working on creating pdf files with jspdf and the AutoTable plugin.
My plan is to create a table like this:
I have the images as local urls, and I'm trying to add them to the pdf using the new Image and adding them as .src to the image.
When I directly run the jspdf.addImage function with the image, the images display correctly.
But I'm struggling to get the correct scaling to work. So I wanted to use the width and height properties from the image, but for this to work you need to wait for the image to load.
I tried to use the onload function, but it stops rendering the table in general, because it skips over the function and continues with the next table before the images load.
If you have any suggestions of how to get something like this to work it would be greatly appreciated. The images all have variable resolution and need to be scaled down to properly fit in the table. I'll paste my working code (but without the height and width scaling) below.
doc.autoTable({
head: [{comments: 'Photos'}],
body: body,
styles: {
lineColor: [0, 0, 0],
lineWidth: 0.4,
},
headStyles: {
fillColor: [191, 191, 191],
textColor: [0, 0, 0],
},
didDrawCell: function (data) {
if (data.section === 'body') {
console.log(data);
const image = new Image();
// image.onload = function() {
// console.log(this);
// const width = this.width;
// const height = this.height;
// console.log({width, height})
// doc.addImage(
// this,
// 'JPEG',
// data.cell.x + 5,
// data.cell.y + 2,
// )
// }
image.src = QuestionPhotos.link(photosObject[data.cell.raw])
doc.addImage(
image,
'JPEG',
data.cell.x + 5,
data.cell.y + 2,
)
}
}
The commented out part of this code was my other attempt where I would add the image after it was loaded, but this made the image not appear at all in the pdf.
I have been able to solve most of my question using the following functions:
The scaling I was able to fix by storing the width and height together with my images. I then set my height to be fixed (in my case 80mm) and calculated the width like this: photo.height / photo.width * 80.
I tried the other functions Ihsan mentioned, but without any luck.
The didDrawCell is used for inserting the images after the cell has been drawn. willDrawCell draws the image behind the table. didParseCell will insert the images in the top corner of the page instead of in the table itself.
I also initially used the didParseCell to increase the size of the cells to be the correct size for the images, but later on changed this to adding the style when creating the body of the table.
body.push([{content:'', styles: {minCellHeight: height + 10}}]);
I kept track of the row index to know at what rows to insert the image and so that the sizing is correct.
Here is the problem :
I have a canvas, and four (would be more in future, but 4 for testing...anyway, doesn't matter) images that can be "poped" into the canvas by clicking on it.
Each image can be present multiple times in the canvas.
So far, poping is working fine, images are draggable... But I can't add some resize or zIndex function as I can only select the last image add to the canvas.
In a ideal world, I would like, by clicking/dragging an image, put it on top of the canvas, and kinda "select" it, so that I can connect the resize functions to the image.
But with the array of images, I can't manage to identify properly the item dragged, and can't use (or don't manage to use) the selectors.
Thank you.
EDIT : some code
var imgCpt = 0;
var image = [];
function addDetails(img) {
imgCpt++;
var imageObj = new Image();
imageObj.onload = function() {
image[imgCpt] = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
id:image[imgCpt]
});
image[imgCpt].setX((stage.getWidth()/2) - (image[imgCpt].getWidth()/2));
image[imgCpt].setY((stage.getHeight()/2) - (image[imgCpt].getHeight()/2));
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
layer.add(image[imgCpt]);
stage.add(layer);
};
imageObj.src = 'uploads/'+img;
}
I've already tried different solutions : multiple layer, and acting on it instead of acting on image, working with shapes filled with image instead of image, but it's always the same problem : I can't get the id of the concerned element (instead of the id of the last insert element)
This version works with array, but I tried yersterday to build the image id with eval(); without more success.
Thank you for your help
EDIT² : sorry to insist, but I would really be glad to have some assistance on this point, even if I think it's more JS related than pure KineticJS related.
Thank you.
Ok Guys, just solved the problem :
eval("image["+imgCpt+"].on('click', function() {alert("+imgCpt+");});");
Instead of :
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
Now time to set a true action behind the click.
Thank you for helping ;)
I am trying to allow users upload their own images to the kineticJS stage through an input in the html. I prefer to keep all my code in a separate js file, here is what i have so far:
$(document).ready(function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 900,
height: 500
});
var layer = new Kinetic.Layer();
});
function addImage(){
var imageObj = new Image();
imageObj.onload = function() {
var myImage = new Kinetic.Image({
x: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
layer.add(myImage);
stage.add(layer);
}
var f = document.getElementById('uploadimage').files[0];
var name = f.name;
var url = window.URL;
var src = url.createObjectURL(f);
imageObj.src = src;
}
How do I expose the stage to the addImage() method? It is out of its scope at the moment and I havent been able to figure out how to solve the problem as the canvas doesn't show in the html until something is added to it. I need these images to be added as layers for future manipulation so want to use kineticJS. Any suggestions would be much appreciated!
http://jsfiddle.net/8XKBM/12/
I managed to get your addImage function working by attaching an event to it. If you use the Firebug console in Firefox or just press Ctrl+Shift+J you can get javascript errors. It turns out your function was being read as undefined, so now the alert is working, but your image isn't added because they aren't stored anywhere yet, like on a server (must be uploaded somewhere first)
I used jQuery to attach the event as you should use that instead of onclick='function()'
$('#addImg').on('click', function() {
addImage();
});
and changed
<div>
<input type="file" name="img" size="5" id="uploadimage" />
<button id='addImg' value="Upload" >Upload</button>
</div>
What you would really want to do is have the user upload the photos (to the server) on the fly using AJAX, (available with jQuery, doesn't interfere with KineticJS). Then, on success, you can draw the photo onto the canvas using your function. Make sure to use:
layer.draw()
or
stage.draw()
at the end of the addImage() function so that the photo is drawn on your canvas, as the browser does not draw the image until after the page loads and img.src is defined at the end. So, this will basically just require things to be in correct order rather than being difficult.
So, step 1: upload using AJAX (to server), step 2: add to stage, step 3: redraw stage
i have a page that shows a div on mouseover i want the page to move to the div on focus....i got help here to do that...
Now i want the onfocus to the div to move with the easing plugin and move it. i dont want to use the 'slow' in the animate e.g
$('html, body').animate({ scrollTop: $('#box0').offset().top }, 1000);
how can i apply easing to the above code
Secondly i want the div that is showing to slide out from left to right on mouseenter and slide right to left before hiding.
this is what i am using for now. I know there is a better or best way to achieve what i am doing right now.
$("#app0").mouseenter(function () {
$("#lSection2").show('slide').delay(3000); //container for div of four
$("#boxContent0").slideDown(2000);$('html, body').animate({ scrollTop: $('#app0').offset().top }, 1000);// one of the divs within #lSection2
});
$('#boxContent0').mouseleave(function() {
$("#boxContent0").fadeOut(1000);
$("#lSection2").fadeOut(1000);
});
Thanks for your help
The easing can be added as follow, see http://api.jquery.com/animate/
.animate( properties [, duration] [, easing] [, complete] )
You can use hover for mouseover and mouseout.
$("#app0").hover(function () {
// Mouseover
$("#lSection2").stop(true, false).width(0).animate({ width: 200}, 1000);
},function(){
// Mouseout
$("#lSection2").stop(true, false).width(0).animate({ width: 0}, 1000);
});
The stop is needed otherwise mouseover, mouseout, will complete the first animation and then the next and the next and the next, this way you can stop the animation and continue with the next.
I have a page with lots of images on it, and only want to load extra images on demand. IE if the user clicks on it or mouses over, whatever. Most if not all of the sliders i've seen use the hidden attribute with all the elements getting loaded at once, which would cause undue burden in my case.
I liked: http://nivo.dev7studios.com/ but it has no such feature.
Anyone know of an ajax slider preferably using jquery?
Thanks
I think you can do that with jcarousel:
http://sorgalla.com/jcarousel/
The trick is to pass the images one by one in javascript, not in html, if not, there are always loaded beforehand.
The code would be:
var mycarousel_itemList = [
{url:"/im/a.jpg", title: ""},{url:"/im/b.jpg", title: ""}];
listaimg=document.createElement('ul');
jQuery(listaimg).attr('id','mycarousel');
jQuery(listaimg).addClass('jcarousel-skin-tango');
jQuery('#containercarousel').append(listaimg);
jQuery('#mycarousel').jcarousel({ auto: 9,wrap: 'last', visible: 1,scroll:1, size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
function mycarousel_itemLoadCallback(carousel,state){for(var i=carousel.first;i<=carousel.last;i++){if(carousel.has(i)){continue}if(i>mycarousel_itemList.length){break};
carousel.add(i,mycarousel_getItemHTML(mycarousel_itemList[i-1]));
}
};
function mycarousel_getItemHTML(item)
{
var img = new Image();
$J(img).load(function () {
// whatever you want to do while loading.
}).attr('src', item.url);
return "<li><img src=\"" + item.url + "\" width=\"770\" alt=\"\" /></li>";
}