Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I have found a solution. I changed lots of code. Specially the <code>$(img).load(function() { ... }</code> where I was having some problems. I dont really know WHY the load() function didnt want to kick the event more than one time. So I removed most code out of that function.</p> <p>Remember the <code>$(img).load(function() { ... }</code> is for loading the image BEFORE finding its width and height. otherwise its 0.</p> <pre><code>$(document).ready(function() { $(".lightBobo").click(function(e) { if (e != undefined) e.preventDefault(); $(this).lightBobo(); }); }); jQuery.fn.lightBobo = function(e) { return this.each(function() { var myClickedObj = $(this); //check if we have a anchor or image tag var src = ""; if (this.tagName.toLowerCase() == "a") src = this.href.toLowerCase(); else if (this.tagName.toLowerCase() == "img") src = this.src.toLowerCase(); else return; var winW = $(window).width(); var winH = $(window).height(); var docH = $(document).height(); if (docH &lt; winH) docH = winH; //the semitransparant overlay over the whole page var overlay = $("&lt;div /&gt;") .attr("class", "bobOverlay") //used as id for closing all overlays .css("background", "#000") .css("opacity", "0.8") .css("display", "none") .click(function() { hideAll(); }) $("body").append(overlay); //add overlay to body var loadLeft = (winW / 2) - (100 / 2); var loadTop = (winH / 2) - (20 / 2) + $(document).scrollTop(); overlay.fadeIn("fast"); //an element to hold our picture var container = $("&lt;div /&gt;"); container.attr("class", "bobOverlay"); container.hide(); var img = new Image(); $(img).load(function() { var imgW = img.width; var imgH = img.height; container.append(this); //add the picture to the container $("body").append(container); // add container to the body container.fadeIn("fast"); //show container }) .attr("src", src); //add the src to the image function hideAll() { $(".bobOverlay").fadeOut("fast"); } function IsImage(filename) { var ext = filename.split('.').pop().toLowerCase(); var allow = new Array("gif", "png", "jpg", "jpeg", "bmp"); if (jQuery.inArray(ext, allow) == -1) { return false; } return true; } }); } </code></pre> <p>Sorry for the long code. And finding out the answer myself...</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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