4 Replies Latest reply on May 28, 2014 2:15 PM by bazula22

    Adding inside an image tag

    bazula22

      Hi I'm kind of new to this application. I'm trying to add html into a tag but I can't see the tag in the html file. I'm assuming the html is created from javascript. I'm not good with javascript so the simplest answer possible would be great. Thank you.

       

      I just need to add inside the img tag:

       

      data-zoom-image="map_big.jpg"

        • 1. Re: Adding inside an image tag
          heathrowe Most Valuable Participant

          See response #4 here Re: jQuery plug-in for image zooming

           

          Darrell

          1 person found this helpful
          • 2. Re: Adding inside an image tag
            bazula22 Level 1

            Thanks but I'm still confused.

            I have 2 maps title map_small.jpg and map_big.jpg.

            map_small.jpg is on the stage with its class set to 'zoom'

             

            I've put into the composition ready code on my stage :

            sym.$(".zoom").append('<data-zoom-image="images/map_big.jpg">');


            $("#stage_map_small").elevateZoom({

              zoomType : "inner",

              cursor: "crosshair"

            });

             

            Now looking at the web inspector and finding the img element I get this -

             

            <img id="Stage_map_small" class="Stage_map_small_id zoom" src="images/map_small.jpg" style="position: absolute; margin: 0px; left: 272px; top: 19px; width: 655px; height: 714px; right: auto; bottom: auto;">

                      <data-zoom-image="images map_big.jpg"=""></data-zoom-image="images>

            </img>

            "  "

            • 3. Re: Adding inside an image tag
              heathrowe Most Valuable Participant

              I have no idea what it is you are attempting to do - are you using a 3rd party script? Which one?

               

              Darrell

              • 4. Re: Adding inside an image tag
                bazula22 Level 1

                Yeah I was. I did figure it out in the end using a bit of google and the link to the other post you directed me to. Thanks a lot for your time. I was using this plugin - ImageLens – A jQuery plug-in for Lens Effect Image Zooming - Daily Coding - daily coding tips and tricks, C#, .NET, ASP.… the same as the guy in that post. I now have actually come up with another issue I wonder if you can help me with please?

                 

                Here's the code i'm using on the stage for the lens zoom effect -

                 

                 

                 

                yepnope(

                {

                          nope:[

                          'js/jquery.zoom.min.js',

                          ],

                          complete: init

                }

                );

                 

                 

                $(document).ready(function(){

                    $('img')

                        .wrap('<span style="display:inline-style"></span>')

                        .css('display', 'block')

                        .parent()

                        .zoom();

                 

                 

                });

                 

                 

                function init() {   

                  $("#Stage_map_big").imageLens({ lensSize: 110 });

                }

                 

                Problem is I need images to appear over the top of the map image. I can work out how to make the images to appear on mouseover but I can't get images to display over the map whilst the zoom effect is active?