Jquery Image Preview

Easiest Tooltip and Image Preview using Jquery for the website which is great for what I’m doing since most of my posts have many pictures. The great thing about this jquery is that it also work with any pop-ups that uses “rel” tag like Mediabox Advanced or PrettyPhoto or Shadowbox. I use the image preview with captions. Since it uses jquery and I use lots of them, therefore, I have to set jquery no conflict for this script also. Since I use Jquery for FancyBox already, all I need is the custom script for the “imagepreview” and add a “css” for the display. Quite simple and painless.

 

<script src=”<?php bloginfo(‘template_url’); ?>/pops/fancybox/jquery.tools.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var $iP=jQuery.noConflict();
$iP(document).ready(function(){
});
</script>
<script src=”<?php bloginfo(‘template_url’); ?>/pops/ipreview/main.js” type=”text/javascript”></script>

The main.js is the same as the author’s js file except all the ‘$’ is changed to ‘$iP’ for the no.conflict.

this.imagePreview = function(){
	/* CONFIG */

		xOffset = 10;
		yOffset = 30;

		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result

	/* END CONFIG */
	$iP("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$iP("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
		$iP("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");
    },
	function(){
		this.title = this.t;
		$iP("#preview").remove();
    });
	$iP("a.preview").mousemove(function(e){
		$iP("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});
};

// starting the script on page load
$iP(document).ready(function(){
	imagePreview();
});

The css is the same as the author’s css except some colors changed for my dark theme website.

#preview{

position:absolute;

border:1px solid #F75D59;

background:#150517;

padding:10px 10px;

display:none;

font-weight:500;

font-style: italic;

font-size: 16px;

color:#F75D59;

border-radius: 7px;

-moz-border-radius: 7px;

-moz-box-shadow: 1px 1px 1px 1px #F75D59;

box-shadow: 1px 1px 1px 1px #F75D59;

}

The code is simple just add the “class=”preview””

Use together with Mediabox Advanced

<p style=”text-align: center;”><a title=”imagepreview” href=”/media/91alfaspider/91alfa0.jpg” rel=”lightbox”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”/media/91alfaspider/91alfa0.jpg” alt=”My Alfa” width=”250″ /></a></p>

Use together with PrettyPhoto

<p style=”text-align: center;”><a title=”imagepreview” href=”/media/91alfaspider/91alfa0.jpg” rel=”prettyPhoto”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”/media/91alfaspider/91alfa0.jpg” alt=”My Alfa” width=”250″ /></a></p>

Use together with Shadowbox

<p style=”text-align: center;”><a title=”imagepreview” href=”/media/91alfaspider/91alfa0.jpg” rel=”shadowbox”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”/media/91alfaspider/91alfa0.jpg” alt=”My Alfa” width=”250″ /></a></p>