{"id":492,"date":"2011-10-06T11:28:24","date_gmt":"2011-10-06T18:28:24","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=492"},"modified":"2018-01-30T15:02:16","modified_gmt":"2018-01-30T23:02:16","slug":"mooimagetip-for-wordpress","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/mooimagetip-for-wordpress.html","title":{"rendered":"MooImageTip For WordPress"},"content":{"rendered":"
\n

03\/16\/2017 Now we use Jquery image preview<\/a>.<\/p>\n<\/blockquote>\n

I’ve been using MooImageTip for NucleusCMS for a while and I liked it. It’s been new to me on WordPress, I’m writing this so I can remember how I make it work in WordPress.<\/em><\/p>\n

The website for MooImageTip<\/em><\/a><\/p>\n

Since I’m using Mediabox Advanced 1.2.5 which also use Mootools, I placed the mooimagetip.js inside my “mediaboxadv” folder with the “dognmonkey.css” file and load them on header.php of my favorite modified only theme “techozoic-fluid”.<\/em><\/p>\n

\n

\"mooimagetip\"<\/a>\u00a0\u00a0\u00a0\u00a0 \"mooimagetip\"<\/a><\/p>\n

\n

<link rel=”stylesheet” type=”text\/css” media=”all” href=”<?php bloginfo(‘template_url’); ?>\/mediaboxadv\/dognmonkey.css” \/><\/p>\n

<!-mediaboxadv–>
\n<script src=”<?php bloginfo(‘template_url’); ?>\/mediaboxadv\/mootools-1.2.5-core-nc.js” type=”text\/javascript”><\/script>
\n<script src=”<?php bloginfo(‘template_url’); ?>\/mediaboxadv\/Quickie.js” type=”text\/javascript”><\/script>
\n<script src=”<?php bloginfo(‘template_url’); ?>\/mediaboxadv\/ltooz134.js” type=”text\/javascript”><\/script>
\n<link rel=”stylesheet” type=”text\/css” media=”all” href=”<?php bloginfo(‘template_url’); ?>\/mediaboxadv\/mediaboxAdvBlack.css” \/>
\n<!-end mediaboxadv–><\/p>\n

<script src=”<?php bloginfo(‘template_url’); ?>\/mediaboxadv\/idogimagetip.js” type=”text\/javascript”><\/script>
\n<!-mooimagetip end–><\/p><\/blockquote>\n

I need to edit the “mootools-1.2.5-core-nc.js” to add the DOM scripts at the end of the file.<\/em><\/p>\n

\n
    \n
  1. \/\/ Just create the object in the DOM ready event<\/span><\/li>\n
  2. window.addEvent<\/span>(<\/span>‘domready’<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span><\/li>\n
  3. var<\/span> myImageTip =<\/span>new<\/span> MooImageTip(<\/span>)<\/span>;<\/span><\/li>\n
  4. }<\/span>)<\/span>;<\/span><\/li>\n
  5. \/\/ If you want to customize the tip, you can use some options<\/span><\/li>\n
  6. window.addEvent<\/span>(<\/span>‘domready’<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span><\/li>\n
  7. var<\/span> myAdvancedImageTip =<\/span>new<\/span> MooImageTip(<\/span>{<\/span><\/li>\n
  8. offset:<\/span>{<\/span>x:<\/span>4<\/span>,<\/span> y:<\/span>4<\/span>}<\/span>,<\/span> \/\/ Offset relative to mouse position<\/span><\/li>\n
  9. className:<\/span>‘mylinks’<\/span>,<\/span> \/\/ This is the links class name<\/span><\/li>\n
  10. tipId:<\/span>‘mytip’<\/span>,<\/span> \/\/ This is the tip ID, for styling<\/span><\/li>\n
  11. follow:<\/span>false<\/span>,<\/span> \/\/ Tip will not follow the mouse cursor<\/span><\/li>\n
  12. fx:<\/span>{<\/span> duration:<\/span>‘short’<\/span>}<\/span> \/\/ Additional Fx options<\/span><\/li>\n
  13. }<\/span>)<\/span>;<\/span><\/li>\n
  14. }<\/span>)<\/span>;<\/span><\/li>\n<\/ol>\n<\/blockquote>\n

    Since the “mooimagetip.js” uses “rel” to link images which conflicts with many of my popups plugins, so I renamed it to “idog” which is totally unique, also “title” is changed to “alt”
    \n<\/em><\/p>\n

    \n

    <a <\/span>href<\/span>=<\/span>“#”<\/span>class<\/span>=<\/span>“imagetip”<\/span>idog<\/span>=<\/span>“image.jpg”<\/span>title<\/span>=<\/span>“Label”<\/span>><\/span>link<\/a><\/span><\/p>\n<\/blockquote>\n

    This won’t be conflicted with any popups using “rel=”<\/em><\/p>\n

    Let’s see if it works on WordPress<\/em><\/p>\n

    This is my picture<\/a> with html codes<\/em><\/p>\n

    <p style=”text-align: center;”><em><a alt=”my x-alfaspider” href=”\/media\/91alfaspider\/91alfa0.jpg”\u00a0 idog=”\/media\/91alfaspider\/91alfa0.jpg”>This is my picture<\/a> with html codes<\/em><\/p><\/p><\/blockquote>\n

    Cheers,<\/em><\/p>\n

    idog<\/em><\/p>\n<\/div>\n