1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default replace an image on click

    replace an image on click


    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?

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default more info

    more info


    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

  3. #3
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Vote Rating
    10
    arnebech will become famous soon enough

      0  

    Default


    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.
    Attached Files

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default


    thanks I'll look this over

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default simpler

    simpler


    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

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default partially working

    partially working


    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

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default


    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

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default


    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];

  10. #10
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Vote Rating
    10
    arnebech will become famous soon enough

      0  

    Default


    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".

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi