{"id":943,"date":"2012-08-15T01:21:52","date_gmt":"2012-08-15T01:21:52","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=943"},"modified":"2012-08-15T01:21:52","modified_gmt":"2012-08-15T01:21:52","slug":"jquery-image-preview","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/mythemes\/jquery-image-preview.html","title":{"rendered":"Jquery Image Preview"},"content":{"rendered":"
\n

2012-08-15 Since I don’t know how to resize the preview images, I had to implement the James.Padolsey<\/a> ways to limit my image preview to width of 500px.<\/em><\/p>\n


\n<\/code><\/p>\n

<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><\/p>\n<\/blockquote>\n

Need 3 links from the website and put them between <head><\/head><\/em><\/p>\n

\n

<\/em><!–iPreview–><\/p>\n

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

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

Custom JS:<\/p>\n

\n

idogip.css:<\/p>\n

#imgPreviewWithStyles,
\n#imgPreviewWithStyles2,
\n#imgPreviewWithStyles3 {
\nbackground: #222 url(img\/loading.gif) no-repeat center;
\n-moz-border-radius: 10px;
\n-webkit-border-radius: 10px;
\npadding: 5px; \/*border thickness*\/
\nz-index: 999;
\nborder: none;
\n}
\n#imgPreviewWithStyles span,
\n#imgPreviewWithStyles2 span,
\n#imgPreviewWithStyles3 span {
\ncolor: white;
\nfont-size: 1em;
\ntext-align: center;
\ndisplay: block;
\npadding: 10px 0 3px 0;
\n}<\/p>\n

idogip.js<\/p>\n

$iP(‘.preview’).imgPreview({
\ncontainerID: ‘imgPreviewWithStyles’,
\nimgCSS: { width: 500 },
\nonShow: function(link){
\n$iP(‘<span>’ + link.title + ‘<\/span>’).appendTo(this); \/\/\/*link.title shows title text on lower bar*\/
\n},
\n\/\/ When container hides:
\nonHide: function(link){
\n$iP(‘span’, this).remove();
\n}
\n});<\/p>\n

$iP(‘.webpage’).imgPreview({
\ncontainerID: ‘imgPreviewWithStyles’,
\nsrcAttr: ‘rel’, \/\/\/* this one to display href that isn’t an image- put image here*\/
\nimgCSS: {
\n\/\/ Limit preview size:
\nwidth: 500
\n},
\n\/\/ When container is shown:
\nonShow: function(link){
\n$iP(‘<span>’ + link.href + ‘<\/span>’).appendTo(this);
\n},
\n\/\/ When container hides:
\nonHide: function(link){
\n$iP(‘span’, this).remove();
\n}
\n});
\n});<\/p>\n

USAGE
\nThe code is simple just add the “class=”preview” or “webpage” whichever the case may be<\/em>”<\/p>\n

Use together with Mediabox Advanced <\/em><\/p>\n

<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><\/p><\/blockquote>\n

\"My<\/a><\/p>\n

<\/p>\n<\/blockquote>\n

Easiest Tooltip and Image Preview<\/a> 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.<\/em><\/p>\n

 <\/p>\n

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


\nThe main.js is the same as the author’s js file except all the ‘$’ is changed to ‘$iP’ for the no.conflict.<\/em><\/p>\n

\n
this.imagePreview = function(){\n\t\/* CONFIG *\/\n\n\t\txOffset = 10;\n\t\tyOffset = 30;\n\n\t\t\/\/ these 2 variable determine popup's distance from the cursor\n\t\t\/\/ you might want to adjust to get the right result\n\n\t\/* END CONFIG *\/\n\t$iP(\"a.preview\").hover(function(e){\n\t\tthis.t = this.title;\n\t\tthis.title = \"\";\n\t\tvar c = (this.t != \"\") ? \"<br\/>\" + this.t : \"\";\n\t\t$iP(\"body\").append(\"<p id='preview'><img src='\"+ this.href +\"' alt='Image preview' \/>\"+ c +\"<\/p>\");\n\t\t$iP(\"#preview\")\n\t\t\t.css(\"top\",(e.pageY - xOffset) + \"px\")\n\t\t\t.css(\"left\",(e.pageX + yOffset) + \"px\")\n\t\t\t.fadeIn(\"fast\");\n    },\n\tfunction(){\n\t\tthis.title = this.t;\n\t\t$iP(\"#preview\").remove();\n    });\n\t$iP(\"a.preview\").mousemove(function(e){\n\t\t$iP(\"#preview\")\n\t\t\t.css(\"top\",(e.pageY - xOffset) + \"px\")\n\t\t\t.css(\"left\",(e.pageX + yOffset) + \"px\");\n\t});\n};\n\n\/\/ starting the script on page load\n$iP(document).ready(function(){\n\timagePreview();\n});<\/pre>\n<\/blockquote>\n
The css is the same as the author’s css except some colors changed for my dark theme website.<\/em><\/p>\n
\n
#preview{<\/p>\n
position:absolute;<\/p>\n
border:1px solid #F75D59;<\/p>\n
background:#150517;<\/p>\n
padding:10px 10px;<\/p>\n
display:none;<\/p>\n
font-weight:500;<\/p>\n
font-style: italic;<\/p>\n
font-size: 16px;<\/p>\n
color:#F75D59;<\/p>\n
border-radius: 7px;<\/p>\n
-moz-border-radius: 7px;<\/p>\n
-moz-box-shadow: 1px 1px 1px 1px #F75D59;<\/p>\n
box-shadow: 1px 1px 1px 1px #F75D59;<\/p>\n
}<\/p><\/blockquote>\n
The code is simple just add the “class=”preview”<\/em>”<\/p>\n
Use together with Mediabox Advanced <\/em><\/p>\n
<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><\/p><\/blockquote>\n
\"My<\/a><\/p>\n
Use together with PrettyPhoto<\/em><\/p>\n
<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><\/p><\/blockquote>\n
\"My<\/a><\/p>\n
Use together with Shadowbox<\/em><\/p>\n
<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><\/p><\/blockquote>\n
\"My<\/a><\/p>\n

\n<\/em><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
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 …<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[670],"class_list":["post-943","post","type-post","status-publish","format-standard","hentry","category-pop-ups","tag-jquery-image-preview"],"views":3,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/mythemes\/wp-json\/wp\/v2\/posts\/943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dognmonkey.com\/mythemes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dognmonkey.com\/mythemes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/mythemes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/mythemes\/wp-json\/wp\/v2\/comments?post=943"}],"version-history":[{"count":0,"href":"https:\/\/www.dognmonkey.com\/mythemes\/wp-json\/wp\/v2\/posts\/943\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/mythemes\/wp-json\/wp\/v2\/media?parent=943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/mythemes\/wp-json\/wp\/v2\/categories?post=943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/mythemes\/wp-json\/wp\/v2\/tags?post=943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}