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>
1 Comment
How do you make this blog site look this sick! Email me if you want and share your wisdom. !