12 Comments a “jQuery jMagnify, magnify effect on text”

1. Plugins : jMagnify « FrameLinks scrive:
   13 ottobre 2010 alle 09:59

   [...] Site Officiel : http://www.senamion.com/blog/2010/03/24/jquery-jmagnify-magnify-effect-on-text/ [...]

2. jojo scrive:
   27 ottobre 2010 alle 22:36

   Hello — I am trying to put a magnify glass / lente d’ingrandimento graphic to use as a cursor when the cursor moves over the image.

   I am trying to modify the code to use a with the graphic to pass the characters into the text div from to with .png magnifier glass.

   do you have any suggestions to modify your code /scripts? thanks very much for your code. and examples.

   Thanks very much, grazie, J

3. jojo scrive:
   28 ottobre 2010 alle 00:25

   I tried to add …

   $(’#mag’).jMagnify({
   centralEffect: {’background-image’: ‘url(controls/MagLens1.png);’,
   ‘width’: ‘252px;’,
   ‘height’: ‘90px;’},
   lat1Effect: {},
   lat2Effect: {},
   lat3Effect: {},
   resetEffect: {’background-image’: ‘url(controls/MagLens2.png);’}
   });
   $(’#double’).jMagnify({
   centralEffect: {’border-bottom’: ‘4px solid red’},
   lat1Effect: {’border-bottom’: ‘3px solid red’},
   lat2Effect: {’border-bottom’: ‘2px solid red’},
   lat3Effect: {’border-bottom’: ‘1px solid red’},
   resetEffect: {’border’: ‘0′}
   });

   with a new div for the effect. then modifying the split to split(” “) to parse to use just words instead of characters. Am getting lost!!

   var aStr = el.text().split(” “); // parse to words

   any suggestions?

   Thanks very much,
   J

4. Giovanni scrive:
   28 ottobre 2010 alle 21:15

   Your idea is good!

   If you use only background work!

   
   centralEffect: {'background': 'url(controls/MagLens1.png) no-repeat 100% 50%'},
   

   In js code you change split and also add a blank after span.

5. jojo scrive:
   28 ottobre 2010 alle 22:13

   I added new effect…
   //TO .html file this… then changed the .js file for split(” “) and added blank??? ehh? after span… please see next…

   //HTML

   
   $('#mag').jMagnify({
   				centralEffect: {'background': 'url(controls/MagLens1.png) no-repeat 100% 50%'}
   				//lat1Effect: {'border-bottom': '3px solid red'},
   				//lat2Effect: {'border-bottom': '2px solid red'},
   				//lat3Effect: {'border-bottom': '1px solid red'},
   				//resetEffect: {'border': '0'}
   			});
   
   //FOR JS file
   
   (function($)
   {
   	$.fn.jMagnify = function(o) {
   
   		o = $.extend({
   			centralEffect: {'font-size': '200%'},
   			lat1Effect: {'font-size': '200%'},
   			lat2Effect: {'font-size': '200%'},
   			lat3Effect: {'font-size': '200%'},
   			resetEffect: {'font-size': '100%'}
   		}, o);
   
   		return this.each(function(i) {
   			var el = $(this);
   			var	uuid = (el.attr('id') || el.attr('class') || 'internalName') + '_jMagnify';
   			var myText = "";
   			var aStr = el.text().split(" ");
   
   			for (var len in aStr)
   				myText += "" + aStr[len] + "" + " ";
   			el.html(myText);
   			$('.' + uuid).hover(function(){
   					$(this).css(o.centralEffect)
   						.next().css(o.lat1Effect)
   						.next().css(o.lat2Effect)
   						.next().css(o.lat3Effect);
   					$(this).prev().css(o.lat1Effect)
   						.prev().css(o.lat2Effect)
   						.prev().css(o.lat3Effect);
   				},
   				function() {
   					$(this).css(o.resetEffect)
   						.next().css(o.resetEffect)
   						.next().css(o.resetEffect)
   						.next().css(o.resetEffect);
   					$(this).prev().css(o.resetEffect)
   						.prev().css(o.resetEffect)
   						.prev().css(o.resetEffect);
   			});
   		});
   	};
   })(jQuery);
   

   // thanks for your suggestions.. !! I get a bad result !! ?
   // best, Jojo

6. jojo scrive:
   28 ottobre 2010 alle 22:16

   Sorry put in “blank” after span?? as this…

   var aStr = el.text().split(” “);

   for (var len in aStr)
   myText += “” + aStr[len] + “” + ” “;

7. jojo scrive:
   28 ottobre 2010 alle 22:17

   The post does not allow for all the code. it changes the code.

   not sure what to do?

8. jojo scrive:
   28 ottobre 2010 alle 22:25

   myText += “” + aStr[len] + “”;

   OR

   myText += “” + aStr[len] + “” + ” “;

9. jojo scrive:
   28 ottobre 2010 alle 23:05

   Hello! i posted the results here:

   http://soundimage.com/jMagnify/jMagnify7.html

   http://soundimage.com/jMagnify/jMagnifyBox5.html

   get just diagonal lines in the image rollover.

   any suggestiosn?

   

10. Giovanni scrive:
    30 ottobre 2010 alle 10:17

    jojo: this is for you!

11. jojo scrive:
    2 novembre 2010 alle 18:34

    Grazie! Grande lavoro! Io avrò il div con obiettivo grafico scoprire esattamente ciò che è contenuto nel div di testo. Ci proverò.

    thank you! great work! I will have the div with graphic lens uncover exactly what is contained in the text div. I will try a next step.

12. Mte90 scrive:
    30 dicembre 2010 alle 00:44

    Bel plugin!
    Ma per il reset non può per esempio riconoscere da solo i tag css che aveva prima?
    in questo modo se si hanno più link con classi diverse non viene un macello.

    The auto reconize for the reseteffect?

Write a comment

Name

E-mail

Web site