PDA

View Full Version : replace an image on click



piza
20 Mar 2012, 9:56 PM
I'm creating an interactive image that requires certain pngs, to be replaced with alternative images, a small sequence in fact. Going to another scene does not work because I have multiple clickable parts in the initial scene. SO what I really need is a way to just call another image and that becomes the next clickable item/visual.

Any way of doing this within sencha animator, or do I need to call a custom JS. If so do you know of any that might work?

piza
20 Mar 2012, 10:00 PM
in case that was not written well, I essentially need to create a large scene that has multiple images that function as mini gallery's, but the images themselves are the things you click on to move to the next option/image, still retaining the original scene but maintain the current slide for any of the gallery's

arnebech
22 Mar 2012, 9:51 AM
Yeah, you'd have to use some Javascript for that. I am attaching a project/export of a mini gallery that has has clickable images that changes the image.

piza
22 Mar 2012, 10:56 PM
thanks I'll look this over

piza
23 Mar 2012, 9:24 AM
Hey this works fine if I replace all the assets, however I need something even simpler but when I start to break apart the files and script I break it :)

what I'm trying to do is have an image in the scene, not animated and now thumbnails off to one side. When the user clicks on that image it replaces it with another image and so on until the last on the list then return to the first.

I tried to alter your script and remove some of the thumbnail stuff but that then breaks the next click...sorry I'm not that savvy with Java

piza
23 Mar 2012, 11:33 AM
So I managed to drop all the animations, and drop the thumbnails and the script still works. However as soon as I add my own images to the image list in the script, my images don't show even knowing the actual assets are in the assets folder, even if I delete your images form the same folder your images still show. Some how the path to to the assets is staying fixed some how to the older dir? any thoughts

So I even duplicated all your files and assets etc and did and edit to one of your images. I renamed the project and folders. Reloaded animator, with the new renamed animation file and tested it in the browser,and its still loads all the original images, my new edited sun2.png never shows up

piza
23 Mar 2012, 12:38 PM
so I am working around this now by exporting and dropping my own images in to the assets dir for the exported project. All my images load, but the preview in browser from inside animator still does not. I'm not really sure where the paths for the images are coming from in animator

piza
23 Mar 2012, 1:02 PM
One more script question. I'm trying to do multiple images that can each have "on click image swap". When I edit the script for this second script the images load on top of the first set not the new second. I changed the name of the initial object in the script and animator to match. Wondering if theres something else in the script that would want to ref the original image

piza
23 Mar 2012, 1:59 PM
here are the 2 scripts

Script 1
---------------------------


var imageSrcList = [
"assets/2.png",
"assets/3.png",
"assets/4.png"
];


//get image element
var imageElement = document.querySelector('#main-image img');


//get current image index
var imageSrc = imageElement.src;
var currentImageIndex = 0;
for (var i = 0; i < imageSrcList.length; i++) {
if (imageSrc.search(imageSrcList[i]) !== -1 ) {
currentImageIndex = i;
}
}


//get next image
currentImageIndex = currentImageIndex + 1;


//go to first image if we are at end of list
currentImageIndex = currentImageIndex % imageSrcList.length;


//update image src
imageElement.src = imageSrcList[currentImageIndex];




Script 2
---------------------------


var imageSrcList = [
"assets/arrow-blue.png",
"assets/arrow-yellow.png"

];


//get image element
var imageElement = document.querySelector('#arrow img');


//get current image index
var imageSrc = imageElement.src;
var currentImageIndex = 0;
for (var i = 0; i < imageSrcList.length; i++) {
if (imageSrc.search(imageSrcList[i]) !== -1 ) {
currentImageIndex = i;
}
}


//get next image
currentImageIndex = currentImageIndex + 1;


//go to first image if we are at end of list
currentImageIndex = currentImageIndex % imageSrcList.length;


//update image src
imageElement.src = imageSrcList[currentImageIndex];

arnebech
23 Mar 2012, 2:12 PM
Since the images are not actually used within Animator, you'll have to manually add them to your exported folder.

The scrips looks okay, just make sure that you give the second object a CSS ID of "arrow" in the properties panel under "general".