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.
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”.
<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.
- // Just create the object in the DOM ready event
- window.addEvent(‘domready’,function(){
- var myImageTip =new MooImageTip();
- });
- // If you want to customize the tip, you can use some options
- window.addEvent(‘domready’,function(){
- var myAdvancedImageTip =new MooImageTip({
- offset:{x:4, y:4}, // Offset relative to mouse position
- className:‘mylinks’, // This is the links class name
- tipId:‘mytip’, // This is the tip ID, for styling
- follow:false, // Tip will not follow the mouse cursor
- fx:{ duration:‘short’} // Additional Fx options
- });
- });
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