Example An impressive image magnifier that enlarges thumbnail images on mouse overs
(Uses the Multiple Sequential Instances Feature)
 You must have seen the earlier example of multiple instances showing popups with different contents (footer styles) at different positions. In this project, I show those popups with a different content (enlarged image) but at the same position. The result is an impressive Magnifier like effect.
Move the mouse over the following thumbnails and you will see an enlarged popup appear at the bottom.
How this example was made: First, I created an ADP Ultimate project to show a maginifier popup with the first image. Then I clicked on the "Multiple Sequential Instances" button to add the other popup instances to the same project. For each of the other popup instances, I directly changed the content to show a different image but didn't change the popup position or size. After compilation, I got the complete API code for the links to show these popups that I could use in this examples page. But instead of the onclick event, I used those links in the onmouseover events of the thumbnail images.
How ADP Ultimate helped in this project? if I had used ADP Pro, I could only create the multiple contents showing different images directly with it. All other work would be manual. For example, I would need to remember the numeric ids of various contents. Then to show those contents in the same magnifier popup, I would need to manually code all the API calls for making the links. It was certainly possible but required considerable manual work and extensive knowledge of the ADP API calls.
In ADP Ultimate, by using the "Multiple Sequential Instances" feature, adding instances of the first magnifier popup was easy. I did all of the above customization for each additional popup instance directly in the software and it generated all the code for the links, ready to use in the thumbnails in this example.
|