How would I achieve a "magnify" image effect on an image that is only visible on "hover"

I have come to understand that Adobe Edge Animate can now load external javascript script into projects. So I would like to use this feature to load a "maginfy/zoom" effect onto an image that will be revealed once a button is clicked on. To clarify the process  I had in mind would go something like this:
1. There is a map the user can view
2. When a user hovers thier mouse over sections of the map a "callout box" would appear
3. Inside that "callout box" would be further information about that particular section as well as an image
4. When the user hovers over that image, it would magnify similar to this: http://www.elevateweb.co.uk/image-zoom/examples (see the "inner zoom" example)
I've tried loading the elevatezoom.js script into a project, but I don't quite understand how I would apply this effect to a "hidden" image. Most effects like this rely on external css styles, as well as specific "ID" names in order to call the function. Once the project is saved and published, when I try to view the HTML to add those "ID" names my images are not viewable.
Would someone mind helping me with this? I'd be most grateful.

I actually found a solution just as I was checking your replies. Thank you so much for the help though. I ended up getting zoom.js to work within the project.
This is what I used:
//compositionReady
yepnope(
          nope:[
          'js/jquery.zoom-min.js',
          complete: init
$(document).ready(function(){
    $('img')
        .wrap('<span style="display:inline-block"></span>')
        .css('display', 'block')
        .parent()
        .zoom();
function init() {
  var image2 = sym.$("image");
  image.zoom({url: 'images/image.png'});
After added the external scipts (jquery-1.7.1.min.js, jquery.zoom-min.js) I was able to get the magnify effect to work on a image that is revealed upon hover. I've uploaded an example for anyone who would want to do this as well.
Dropbox link: Dropbox - edge-zoom.zip

Similar Messages

  • How do I achieve browser width images with scroll motion set to 0?

    How do I achieve browser width images with scroll motion set to 0?
    An example can be seen here with the green image: http://www.qooqee.com/templates/aroma
    I can get the rectangle to stretch the width of the browser but not the image fill. (see - http://www.tomwellsassociates.com)
    My Muse fill settings:
    Fill type: Solid
    Colour: None
    Fitting: Tile vertically
    Position: Bottom Centre
    Scroll motion: On (Up - 0)
    Image Size:
    3311 x 3311 px
    Display: Apple imac 27"
    Any suggestions/help would be much appreicated...

    Please check out: http://forums.adobe.com/message/5701908
    Cheers,
    Vikas

  • How to change the default BC image that shows in the address bar?

    Does anyone know how to change the default BC image that shows in the address bar? I want to swap it out so the client logo shows next to their URL.
    Thank you!

    Hi,
    If you are trying to change the favicon for your site,
    You can do it from Site Manager-> Page template -> Default Template
    Look for the code   <link type="image/x-icon" href="/Path for your image" rel="icon" />, and Click save.
    Now where you will use this template, it will display your favicon for that webpage instead of BC favicon. You can define it on Page directly if you are not going to use template.
    Please let me know if you have any doubt.

  • How do you edit the template image that appears at the top only in portrait mode?

    I am using a customized version of the iBooks Author template which has the space image. I have replaced the images for the book cover, chapter and section. But I noticed that when you rotate the ipad to view the entire TOC, the original space image is still there. How can I edit the template image that appears at the top of the Table of Contents only when you rotate the ipad in portrait view?

    I just tried w/that template - switched to Portrait mode...tapped once to select that image....cut - gone. Switched to Landscape...not there. Back to portrait...still gone.
    What process did you use?
    Can you repeat your issue with a fresh book?

  • How can I have a browser image that scrolls with images on top of it scrolling in tandem -

    How can I have a browser image that scrolls with images on top of it scrolling in tandem - so the background is a hexagon pattern with small images inside some hexagons and I want them all to be scrollable as a user uses the browser scroll bars. At the moment the background image jumps when I preview so the small hexagons all become out of alignment. Any tips appreciated. I have browser image set to tile - pinned at the middle and set to scrolling - the small images are not pinned -

    Thanks for your answer - The images on the top layer are also links and change to show they're links on rollover - so I wanted to keep them as separate graphics - and it works to a point but when I preview the page in a browser the tiled browser image always moves no matter how I pin it and then everything becomes unaligned. Any further suggestions appreciated.

  • How do I crop around an image that is not straight (i.e. crop a country out of a map) on pages?, How do I crop around an image that is not straight (i.e. crop a country out of a map) on pages?

    How do I crop around an image that is not straight (i.e. crop a country out of a map) on pages?, How do I crop around an image that is not straight (i.e. crop a country out of a map) on pages?

    If you have an image that you want to crop for insertion in a Pages document, you can use a program like GIMP to edit the image.

  • How can I get trial for after effects 4? it is the only version my PC meets the requirements.

    How can I get trial for after effects 4?
    it is the only version my PC meets the requirements.

    Hello  yaniv7m,
    in my eyes you will find it only in shops like ebay or Amazon, like this:
    http://www.ebay.com/sch/i.html?_from=R40&_trksid=p2050601.m570.l1313.TR0.TRC0.H0.Xafter+ef fects+4&_nkw=after+effects+4&_sacat=0
    or
    http://www.amazon.com/Adobe-After-Effects-CS4-VERSION/dp/B001EUJ0SI/ref=sr_1_1?s=software& ie=UTF8&qid=1407396391&sr=1-1&keywords=after+effects+cs4
    Good luck!
    Hans-Günter

  • How to smooth out zooming/scrolling image that jerks (CS4)?

    Hi guys/girls,
    Is there any way that i can smooth out images that zoom in/out with normal classic tween. they are so jittery it looks terrible. I even have a little bit of easing and frames per second set to 30.
    any info much appreciated!
    Jeff

    Hi flashfever,
    thanks for responding. can you elaborate on how i can use that? is it AS for the 1st frame or on the movie clip itself? etc
    in this case, i have the image fading in and enlarging from 70% to 100% in the same tween. its very jerky.
    thanks for your help so far!
    Jeff

  • How can I create a DVD image that PC users can retrieve and burn...

    I need to create a DVD disc image that PC users can retrieve from a private network share and burn to a blank DVD. Once burned, it needs to auto-start at the Menu. The master works fine. Images burned using the Mac Disk Utility work fine. But I have little control over who will download the image or the method by which they will burn it, so I need to provide visitors with guidance. Thank you in advance for any assistance you can provide.

    Thank Jeff for this one.....
    http://homepage.mac.com/geerlingguy/macsupport/mac_help/pages/0023-convert_dmg_imgiso.html
    I've also heard that you can just copy an ".img" iDVD image to a pc, change the extension to .iso and then burn with Nero, etc. But I haven't tried it myself.....
    John B.

  • How do I include a dynamic image that changes?

    I need to include a photo based on selecting a user from a
    datagrid - using the user id I can get the image from a url where
    the end path uses the userid + .jpg. All of this works for the
    first image but when I click on another user I get the same image
    as previously shown. I'm using:
    <mx:Image source="{getImage()}" /> where getImage is a
    function that is:
    private function studentImage():String {
    var baseurl:String = "
    http://nuweb.northumbria.ac.uk/photoids/";
    var studentID:String = dgStudents.selectedItem.studentid;
    var url:String = baseurl + studentID + ".jpg";
    reeturn url;
    since that didn't work I tried removing the source attribute
    from the <mx:Image /> and instead when the user click I'm
    calling the same function but with a void return using the
    Image.load:
    private function studentImage():void {
    var baseurl:String = "
    http://nuweb.northumbria.ac.uk/photoids/";
    var studentID:String = dgStudents.selectedItem.studentid;
    var url:String = baseurl + studentID + ".jpg";
    var ldr:Loader = new Loader();
    var urlReq:URLRequest = new URLRequest(url);
    ldr.load(urlReq);
    imgStudentPhoto.load(ldr.content); // imgStudentPhoto is the
    id of the Image component
    This doesn't work either - in fact whereas the first method
    shows an image that doesn't change this shows no image at all.
    Please, any suggestions?
    Thanks, Rob

    When binding to a function, there needs to be an argument to
    tell flex when to execute the binding.
    Or, declare a [Bindable] string var, and in a change handler,
    build and assign the source string to that var. Bind to the var.
    The simplest is not to bind, but to build and assign the
    source string in the change handler function.
    Tracy

  • How would I create old, glitchy like effects like these ones?

    Recently, there have been some teasers coming out on Snap-chat for an upcoming video game that feature some creepy, hypnotic, and cool effects. They can be found here:
    Black Ops 2 has been updated with viral marketing for Call of Duty: Black Ops 3 - UPDATE 12 | Charlie INTEL
    And I was wondering if there were any experts on here who would know how to recreate these things in premiere. For instance that overlay over the video, those lines over the video, that make it look almost like its a CRT TV screen being externally filmed. Or the static etc.
    If anyone could link me to other assets that I can use to just mess up video and make it look, I don't know, any type of visual artifacting or 80s/90s video tropes/effects, or even earlier. I'm open to anything. I'm attempting to make this film into a very similar style as those quick teasers.
    Also I do understand that I am limiting things here by making this a premiere thing. But I am a completely lost child trying to land on the moon when it comes to After Effects, so keep this premiere please. I do understand this kind of limits this stuff to mostly overlays or presets or other things that are for the most part already created. But im open to anything.
    Thanks and I hope you guys have some good ideas.
    TJ

    to further encourage your creativity:
    you can also export screenshots of your video and manipulate them, then reimport them and play with blending modes and/or mattes...
    Did you know that you can manipulate and distort image files by opening them in a text or audio editor?
    (for the latter you may have to change the file extension to .txt or another text format... then back to .tiff or jpg)
    Here's some ideas:
    Tutorial on Databending and Glitch Art | Critique Collective
    or for a cheap quick and easy way, throw your jpg screenshots through here:
    image glitch experiment
    And hey, go crazy, be creative, have fun!
    the most versatile and controlled way i know of is still RG Universe...

  • How would I create this sort of effect?

    I have attached an image and I need to know how to create this sort of border around a text....
    If anyone could give an "idiots" guide that would be great!!
    I really have tried but don't seem to be getting anywhere and i'm sure there's an easy shortcut somewhere.

    You can have a stroke that fills in the open spaces within ("the counters") by adding a pathfinder effect to the mix - I wrote up a tutorial here: http://www.illustratorhints.com/2010/05/fill-in-the-counters-on-live-text/
    Actually, that shows your whole question I think - I used offset fills instead of strokes, but the idea is the same.

  • How do I achieve this line art effect?

    I'm trying to replicate the design below but I'm not sure if I'm using the correct approach.
    First, I used Photoshop to desaturated an image and adjusted the levels. Next I imported into Illustrator and live traced it after tweaking the options.
    However, I can't seem to have a nice clean line art like the one above. Do you think that design use another method (maybe manually tracing multiple images using the pen tool)?

    that image you show is drawn or mostly drawn. you can use image trace to get some of the shapes you need and recomposition the pieces back together. for example on the image you want to copy, i would take an image of the skyline and trace that. select the silhouette of the skyline and delete everything else. then i would do the silhouette of the bridge. then i would trace with different settings to get a few of the details in the bridge and put them on top. then draw in a few details by hand. things like straight lines.
    anyway. short answer is that no, there is no illustrator effect that can give you that. it's a lot of work

  • How would SCCM treat a re-imaged machine without SCCM Client installed on it.

    I would like to understand how Configuration Manager would treat a machine on which OS is rebuild if the machine is currently showing client=YES and SCCM Client is not installed after OS rebuild.
    Would it create a new record for this machine in SCCM once the machine is discovered or merge it with existing record?

    The only thing that flips client=no to client=yes is heartbeat discovery (which is sent by the ConfigMgr client). There's no mechanism that would flip to client=no (except the clear install flag task). So the resource will age out eventually (if AD
    discovery does not update the resource for example).
    Torsten Meringer | http://www.mssccmfaq.de

  • How would i Achieve this without tables?

    Hi
    I have the need for 4 items in a grid on a fixed width page,
    they need to be aligned both vertically, and horizontally. This
    would be easy to Achieve with tables, but is there an elegant
    solution in css?
    The only solution i can think of is 2 divs stacked, each with
    a nested (floated right) div.
    Is there a more elegant solution?
    Many thanks

    There's nothing wrong with using a table for something like
    this. Why not
    just use a table?
    Dan Mode
    *THE online Radio*
    http://www.tornadostream.com
    *Must Read*
    http://www.smithmediafusion.com/blog
    *Flash Helps*
    http://www.smithmediafusion.com/blog/?cat=11
    "Pingus mum" <[email protected]> wrote in
    message
    news:e9j1kv$nht$[email protected]..
    > Hi
    > I have the need for 4 items in a grid on a fixed width
    page, they need to
    > be
    > aligned both vertically, and horizontally. This would be
    easy to Achieve
    > with
    > tables, but is there an elegant solution in css?
    > The only solution i can think of is 2 divs stacked, each
    with a nested
    > (floated right) div.
    >
    > Is there a more elegant solution?
    >
    > Many thanks
    >

Maybe you are looking for

  • Suggestions Please for a 27in monitor that shows photshop well for editing

    thanks, I don't want to spend an Apple Monitor type price. But under would be fine.  Appreciate it.

  • Reg messagtype MATQM

    hi abapers, i have an issue , in ale out bound configurations all setting i did.. maintaing outbound partner profiles giving message type matmas and basic type MATMAS05. maintaing distribution model with sender and receiver and message type matmas,ge

  • Updation in Va01 for unconfirmed amount

    Hi All, I have created a sales order for 100 items. during delivery, I have picked 90 quantities. Now, what I want is that the 10 quantities not picked should show in the sales order. That is what I is that the sales order now will show the original

  • Convert Adobe form (PDF file) to Word file

    Hi, my need is in the title, i would like to convert a Adobe Form, in fact a pdf file to word file. What is the best way ? And of course is it possible ? Thanks for your help. Cheers.

  • Changing Lightroom 5 to another mac

    I recently installed LR5 on my old Mac, but yesterday I got me a new Mac. Do I have to uninstall Lightroom 5 on the old Mac first or can I use the same serial number? How does it work? (I could not find any information about this on the web). Any hel