8 Comments a “jquery jLensMagnify – magnify effect with lens”

1. jojo scrive:
   2 novembre 2010 alle 20:59

   va bene! I like how the lens goes from word to word. what if the lens magnifies text as it goes over it into the lens. not moving the text like I am trying to modify my jLensMagnify to have the lens hover across the text div like http://www.soundimage.com/jMagnify/drag3.html but magnify within the lens.

   I added…

   $(’#fourth’).jLensMagnify({
   startEffect: {’font-size’: ‘150%’},
   resetEffect: {’font-size’: ‘100%’},
   splitChar: ‘ ‘
   });

   But the sentence and text word jump around. could the lens be a separate div?

   see like (not complete)…

   $(function() {
   var str = “one two three four five”,
   array = str.split(” “);
   viewPort = $(”, { id: ’stringToView’ });

   for(var objId in array) {
   var obj = $(”, { text: array[objId] }).hover(function() {
   var clone = $(this).clone();
   $(’#magnifyView’).html(clone);
   }).appendTo(viewPort);
   }

   $(’body’).prepend(viewPort);
   })

   body {
   font-family:”Tiresias PCfont Z”;
   /* font-size:15px; */
   background: #fff;
   line-height:1.1em;
   }
   .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
   #draggable { margin-bottom:20px; }

   #MagDrag {background-image:url(controls/MagLens1.png);
   width: 236px;
   height: 73px; }

   #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px;}

   $(function() {
   $(”#magnifyView”).draggable({ containment: ‘#containment-wrapper’, scroll: false, axis: ‘x’ });
   });

   what’s here

2. jojo scrive:
   2 novembre 2010 alle 21:01

   The lens should maintain its dimensions. just pass over/hover over the text/character/words and magnify them

   J

3. jojo scrive:
   2 novembre 2010 alle 22:28

   $(’#fourth’).jLensMagnify({
   startEffect: {’font-size’: ‘150%’},
   resetEffect: {’font-size’: ‘100%’},
   splitChar: ‘ ‘
   });

   });

   Lorem ipsum dolor sit amet, ipsum dolor consectetur amet

   how to separate the lens from the text or put the lens into another div?

   Jojo

4. jojo scrive:
   4 novembre 2010 alle 17:37

   Ultimately I would like to have the lens drag/hover over the words/characters and enlarge characters (3 on each side [left/right] of a hovered character, including blanks spaces)

   I am trying to change the aStr so the lens will display when the mouseover/hover is at a character in the word, display the 3 adjacent characters to the left and to the right of that hovered character. and also display into another div containing the lens. lens is now attached to body…

   perhaps add another effect to split the character but how to keep the adjacent characters to the left and right of the hovered / mouseenter character …

   $(’#fourth’).jLensMagnify({
   startEffect: {’font-size’: ‘150%’},
   resetEffect: {’font-size’: ‘100%’},
   splitChar: ”
   });
   }, o);

   //and change to…js code ?…

   var aStr = el.text().split(o.splitChar);
   //var aStr = el.text();

   // instead of add lens to body or into text string to replace character with lens can the lens “move over” the characters to pickup the adjacent characters?
   

5. Giovanni scrive:
   4 novembre 2010 alle 22:09

   You must calculate the sum of widths of prev() and prev().prev() and prev().prev().prev() character and after()… and use it for the lens (like 1st version of jmagnify)

6. jojo scrive:
   4 novembre 2010 alle 23:27

   ok — sum of widths… but what if lens should remain the same width always. not change … just have characters stream into lens?

   ok I willt try the sum of widths into the lens.

7. jojo scrive:
   4 novembre 2010 alle 23:50

   I tried working with this plugin: http://css-tricks.com/examples/AnythingZoomer/text.php

   BUT… Resizing the #small div lead to unstable code and the words at the end of the line would disappear under the lens and be apprehended to the beginning of the next line.

   J

8. Kip Kurniawan scrive:
   22 giugno 2011 alle 15:19

   I am trying to change the aStr so the lens will display when the mouseover/hover is at a character in the word, display the 3 adjacent characters to the left and to the right of that hovered character. and also display into another div containing the lens. lens is now attached to body…
   +1

Write a comment

Name

E-mail

Web site