MooImageTip For WordPress

03/16/2017 Now we use Jquery image preview.

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.

The website for MooImageTip

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”.

mooimagetip     mooimagetip

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

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

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

I need to edit the “mootools-1.2.5-core-nc.js” to add the DOM scripts at the end of the file.

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

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”

<a href=“#”class=“imagetip”idog=“image.jpg”title=“Label”>link</a>

This won’t be conflicted with any popups using “rel=”

Let’s see if it works on WordPress

This is my picture with html codes

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

Cheers,

idog

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.