I recently saw a post in the Adobe eLearning forums where a user was seeking help selecting specific images with JavaScript.
User keelym35886708 posted this question: “Accessing Image by ID containing a specific word via an external JS file?” What they want to do is quite interesting. They are trying to find particular images and "zoom" them. There are two parts to this so let’s break it down.
First is finding and selected the image(s).
For this, I am using jQuery since it’s already included in Captivate’s published output. To select an element from the DOM we use a jQuery selector like this: $(‘#my_elements_id”) that will find the element by its ID.
But of course, nothing is ever that simple. In Captivate the image will be converted to a CANVAS element and placed inside a DIV element. Both will have a version of the name you give the image as their ID. For example, if you name an image “cat” the published output will have a DIV with the ID of “re-catc” that has a CANVAS inside it with the ID of “catc”. There is also a DIV with the ID of “cat”.
So to get the actual image we need to use the following jQuery selector: $(“#catc”)
In Keely’s case, they want to select multiple images that contain the same word. So let’s say we have three images; “cat_1” , “cat_2”, and “cat_3”. We could select them each by their ID or we could change our jQuery selector to find all elements with “cat” in their ID: $('[id*="cat"]').
Unfortunately, that will find nine elements (the 3 images and 6 DIVs) that have "cat" in them. In our case we only want the images (CANVASes) so we use: $('canvas[id*="cat"]')
Now that we have them selected we want to animate them.
Keely wanted to "zoom" them. They are using a JavaScript animation library called GreenSock; again I am just going to use jQuery because it’s built in, but the principle is the same. We will use jQuery’s animate() to alter the settings of those elements:
$('canvas[id*="cat"]').animate({
width: '+=16px',
height: '+=16px',
left: '-=8px',
top: '-=8px'
})
That will select each CANVAS element with “cat” in its ID and animate its position and size. It will grow slightly. But we need to shrink it back down afterwards. jQuery has us covered with a callback functionality built into animate(). So here is our new code:
$('canvas[id*="cat"]').animate({
width: '+=16px',
height: '+=16px',
left: '-=8px',
top: '-=8px'
}, 500, function() {
$(this).animate({
width: '-=16px',
height: '-=16px',
left: '+=8px',
top: '+=8px'
})
});
Note that we asking the animation to last for 500 milliseconds and when it’s complete we animate the element back to its original size and location.
To extend on Keely’s original question I built an example that enables users to "zoom" images based on several inputs: all images, animal type, and images with an even number in their ID.
Watch the video to learn more:
[embed]https://youtu.be/Av0DisI14K4[/embed]
Play with the demo here: https://www.jameskingsley.com/demos/cp_zoom/
Get more Captivate how-tos, templates, and tips on the blog and sign up for a free Template Library account to practice your new skills!
James Kingsley has worked in the eLearning Industry for over 16 years. He has won several awards for combining technologies to produce better eLearning. He is an Articulate MVP. James is a Solver of Complex eLearning Puzzles and the Co-Founder of ReviewMyElearning.com. You can follow him on Twitter or connect with him on LinkedIn for additional tips and examples. He pots random musings on JamesKingsley.com.
