Databases
StackOverflow2013
Postsdbo
POJquery Image preview plugin
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery Image preview plugin
    text
    copied!<p>I`m using this "plugin" found on web to preview some images in a php/linux website. </p> <pre><code>&lt;script type="text/javascript"&gt; function pimg() { this.xOffset = 5; this.yOffset = 50; $("a.pimg").hover(function (e) { this.img_title = this.title; this.title = ""; var img_src = $(this).attr('img_src'); var desc = (this.img_title != "") ? "&lt;h3&gt;" + this.img_title + "&lt;/h3&gt;" : ""; var image = (img_src) ? img_src : this.src; $("body").append("&lt;div id='pimg'&gt;&lt;img src='" + image + "' alt='Image preview' /&gt;" + desc + "&lt;/div&gt;"); $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px"); $("#pimg").fadeIn(700); }, function () { this.title = this.img_title; $("#pimg").remove(); }); $("a.pimg").mousemove(function (e) { $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px"); }); }; $(document).ready(function($){ pimg(); }) &lt;/script&gt; </code></pre> <pre><code>&lt;div class="images"&gt; &lt;a href="#" img_src='&lt;?=TF?&gt;/img/design/testimonials/Tuscg.png' class="pimg"&gt;View Testimonial&lt;/a&gt; &lt;/div&gt; </code></pre> <p>What I want is to make the image preview to appear inside the visible browser window and not create new space for it ( in cases like the link is in the right bottom of the browser window ). I know I have to play with the positioning, but how can do it dinamically so that the image will appear only in the current viewable content of the browser window.</p> <p>Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload