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>

My Alfa

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>

My Alfa

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>

My Alfa


 

Pages: 1 2

1 Comment

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.