Jquery Image Preview

2012-08-15 Since I don’t know how to resize the preview images, I had to implement the James.Padolsey ways to limit my image preview to width of 500px.

<a class=”webpage” title=”James Padolsey Image Preview” href=”//james.padolsey.com/demos/imgPreview/full/” rel=”/idogjs/ipreview/imgPreviewDemos.jpg” target=”_blank”>James.Padolsey</a> ways to limit my image preview to width of 500px.</em></p>

Need 3 links from the website and put them between <head></head>

<!–iPreview–>

<link href=”/imagepreview/idogip.css” rel=”stylesheet” type=”text/css” />

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js” type=”text/javascript”></script>
<script src=”/imagepreview/imgpreview.full.jquery.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var $iP=jQuery.noConflict();
$iP(document).ready(function(){
});
</script>
<script src=”/imagepreview/idogip.js” type=”text/javascript”></script>
<!–End iPreview–>

Custom JS:

idogip.css:

#imgPreviewWithStyles,
#imgPreviewWithStyles2,
#imgPreviewWithStyles3 {
background: #222 url(img/loading.gif) no-repeat center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 5px; /*border thickness*/
z-index: 999;
border: none;
}
#imgPreviewWithStyles span,
#imgPreviewWithStyles2 span,
#imgPreviewWithStyles3 span {
color: white;
font-size: 1em;
text-align: center;
display: block;
padding: 10px 0 3px 0;
}

idogip.js

$iP(‘.preview’).imgPreview({
containerID: ‘imgPreviewWithStyles’,
imgCSS: { width: 500 },
onShow: function(link){
$iP(‘<span>’ + link.title + ‘</span>’).appendTo(this); ///*link.title shows title text on lower bar*/
},
// When container hides:
onHide: function(link){
$iP(‘span’, this).remove();
}
});

$iP(‘.webpage’).imgPreview({
containerID: ‘imgPreviewWithStyles’,
srcAttr: ‘rel’, ///* this one to display href that isn’t an image- put image here*/
imgCSS: {
// Limit preview size:
width: 500
},
// When container is shown:
onShow: function(link){
$iP(‘<span>’ + link.href + ‘</span>’).appendTo(this);
},
// When container hides:
onHide: function(link){
$iP(‘span’, this).remove();
}
});
});

USAGE
The code is simple just add the “class=”preview” or “webpage” whichever the case may be”

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>

Pages: 1 2

Jquery Image Preview

1 Comment

Leave a Reply Cancel reply