Skip to main content
K
KeelyM
Inspiring
October 15, 2018
Question

Issue with image z-Index from external JS file

  • October 15, 2018
  • 1 reply
  • 327 views

I'm working in Captivate 2017 in a Responsive project and I'm having some issues with the z-Index of images in my project. Thanks to this forum and it's users, I've managed to put together an external JS file with some code that essentially says "any image with an id containing the word 'image', when clicked on, will scale up." I'd like the users to be able to click on image, have it animate smoothly into a larger scale (eventually I'd like to translate it's position to, but that will be the next step), then have the user click the image again to have it animate smoothly back down to it's normal size. I'm using the GSAP library for the tweening/animation.

Check out this thread if you'd like to see more of how I go to where I am now: Accessing images by ID containing a specific word via external javascript

The issue I'm running into now, is that when there are multiple images on a slide, I need their z-Index to animate so the image that is clicked on will appear above all other images. I've animated z-Index via GSAP before, so I thought this would be simple. With using the console log, I am able to tell that my code does in fact animate that z-Index and translate3D z property of my image, but there is another image div appearing that has an id with the suffix "accStr" and a class of "cp-accessibility" and the translate3D z property on that is not changing. I'm wondering if this is what is causing the issue? Because the everything else seems to be animating as far as z-Index, but my images that are 'behind' others still aren't moving to the front when clicked on.

    This topic has been closed for replies.

    1 reply

    K
    KeelyMAuthor
    Inspiring
    October 15, 2018

    I accidentally posted this before finishing typing out my question. But here's a snippet of my code (it's all placed inside a CPAPI_SLIDEENTER) -

    function initializeEventListeners(){
    if(interfaceObj){
    if(eventEmitterObj){
    eventEmitterObj.addEventListener("CPAPI_SLIDEENTER", function(){
    var targets = document.querySelectorAll('[id^="image"]');
    var access = document.querySelectorAll('[id^="image"].cp-accessibility');
    for (var i = 0; i < targets.length; i++) {
    TweenLite.set(targets, {zIndex:2, z:2});
    var tl = new TimelineMax({ paused: true, reversed: true });
    var num = targets.length/2;
    tl.to([targets[i-num], targets],  0.6, {zIndex:10, scaleX:1.6, scaleY:1.6, z:15}, 0);
    targets.anim = tl; // why .anim?
      targets.addEventListener("mousedown", function() {
      this.anim.reversed() ? (this.anim.play(), console.log(this)) : this.anim.reverse();
    });
    console.log(targets, targets[i-num]);
    }
    });
      }
    }
    }

    I tried creating the variable 'access' to reach any images with the class of cp-accessibility, then I added that to my GSAP code as a target for the animation, but it didn't change anything.

    Does anyone know why Captivate is creating this other id/class for each image (they already create like 3 id's and classes per image) and how to access it's translate Z property?

    Thanks.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices