Showing posts with label image. Show all posts
Showing posts with label image. Show all posts

Monday, December 21, 2015

Casting a Reflection Image Using Pure Javascript


This is mainly for fun or educational purposes only. This is inspired by a carousel javascript plugin with reflection at the bottom of each image which looks like they are standing on a solid marble. Since it is an awesome idea, I tried to do some coding if it is able to be done by just pure Javascript. Yes, they are done and the codes are presented as follows:

<html>
<body>


<a href="javascript:renderReflection()">Render Reflection</a>
<br><br>

<script>

var height,width;
var tmpDiv,tmpDiv2,i,j,k,l,m,n;
var img = new Image();
var file = 'img/phone_icon2.png';
img.src = file;
img.onload = function() {
 height = this.height;
 width = this.width;
}

tmpDiv = document.createElement("span");
tmpDiv.innerHTML = '<img id=img0 src="'+file+'">';
tmpDiv.style.position = 'absolute';
tmpDiv.style.left = '300px';
tmpDiv.style.top = '150px';
tmpDiv.id = "imgSpan";
document.body.appendChild(tmpDiv);


function renderReflection() {

 k=0, l=-0.25, m=50, n=1; // n=speed of fade, // m=percentage of fade, // l=reflection direction

 for (i=1; i<=height; i++) {
 tmpDiv = document.createElement("span");
 tmpDiv.id = "line"+i;
 tmpDiv.style.height = '1px';
 tmpDiv.style.width = width+'px';
 tmpDiv.style.position = 'absolute';
 tmpDiv.style.overflow = 'hidden';

 j = i*n+(height*((100-m)/100));
 if (j>height) { j=height; }

 tmpDiv.style.MozOpacity = ((height-j+1)/height*10)/10;
 tmpDiv.style.opacity = ((height-j+1)/height*10)/10;

 tmpDiv2 = document.createElement("span");
 tmpDiv2.innerHTML = '<img id=img'+i+' src="'+file+'">';
 tmpDiv2.style.position = 'absolute';
 tmpDiv2.style.marginTop = -1*(height-i-1)+'px';
 tmpDiv2.style.filter = 'alpha(opacity=' + Math.round((height-j+1)/height*100) + ')';

 k+=l;

 tmpDiv.style.left = document.getElementById('imgSpan').offsetLeft + k + 'px';
 tmpDiv.style.top = height + document.getElementById('imgSpan').offsetTop + i + 'px';
 tmpDiv.appendChild(tmpDiv2);
 document.body.appendChild(tmpDiv);

 }
}

</script>

</body>
</html>


You can adjust the style of the reflection by changing the value for l, m or n.

l is the control of the direction for the reflection. A negative value will move the reflection to the left and a postive value will move it to the right. A zero value will cast the reflection straight down.

m is the percentage of the reflection to be rendered. A value of 50 will only allow a maximum 50% of the reflection to be shown. The reflection image will look like being cut into half.

n is the fading speed of the reflection image. A value of 2 will double up the fading speed which result in only half of the reflection image being rendered. A value of 3 will triple up the fading speed which result in only a third of the reflection image being rendered.

The following is the screen capture of the trial runs.

The result of k=0, l=-0.25, m=50, n=1:





The result of k=0, l=0, m=100, n=1.25:





The result of k=0, l=1, m=85, n=2:





You can change the file name and path to something else by modifying var file = 'img/phone_icon2.png';! Enjoy!

P.S.: You need to click on the Render Reflection link to run the reflection rendering function in case you are not aware of.

Read More »
Posted by at No comments:
Labels: ,

Saturday, July 26, 2014

Javascript Way to Check Loaded Image


I use this to display images only after they are loaded into the browser's memory. I need Javascript codes to tell me if the image is ready to be displayed or processed. For example, there is a huge image that I need to display but the size is too big. I display a loading icon before I reveal the image so that it looks more like a contemporary (jQuery equipped) web page. I use the following Javascript codes.


<script>

var loaded_img = new Array();
var image_list = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"); // the list of potential images that you want to check later
var img1loaded = false;

function installOnloadAlarm() {

 var i;
 for (i=0; i<image_list.length; i++) { // iterate all images

  var img = new Image(); // create an image object

  img.onload = function() { // set up onload actions
   var match_result = this.src.match(/\/(\w+\.\w+)$/); // match filename after the last '/'
   loaded_img.push(match_result[1]); // push match result into loaded_img array
  };

  img.src = "image/"+image_list[i]+".jpg"; // by setting the source, the browser will start loading (assume images are in 'image' directory)
 }
}

function checkLoadedImg(imgFilename) {
 var i;
 for (i=0; i<loaded_img.length; i++) {
  if (imgFilename == loaded_img[i]) {
   return true;
  }
 }
 return false;
}

function afterLoaded() {
 if (img1loaded) {
  clearInterval(timer1);
  clearInterval(timer2);
  .
  .
  .
  do your post loading job
  .
  .
  .
 }
}

installOnloadAlarm();
var timer1 = setInterval(function(){img1loaded = checkLoadedImg('1.jpg');},200); // need to set timer to check as the result won't be available instantly (this example checks only '1.jpg')
var timer2 = setInterval(function(){afterLoaded();},200);


</script>


The timers are necessary as the results won't be available after installing the onload conditions. This is just a brief example of a complete image file checking system whether the image is loaded into browser.

Read More »
Posted by at No comments:
Labels: ,

Saturday, February 13, 2010

PERL codes to check whether a image file Exists

Here are the codes I have been using. The key is to use the "-e" in the if statement. Other than that it is not a hard programming problem:


if (-e "../htdocs/prod/small/$image_id.jpg") {
$img_path = "/prod/small/$image_id.jpg";
}
else {
$img_path = "/img/default_small.gif";
}


Those in red (the relative path to the cgi-bin directory) depend on your server's configuration. One needs to ftp into the server to see the structure.

You can also "elsif" to support more file format rather than just jpg image files. Usually when an image file is not found, I will point it to a default "no photo" image file so that it looks more professional.

You then use the $img_path in the <img src=...> HTML tag.

Hope this helps.
Read More »
Posted by at No comments:
Labels: ,

Monday, February 8, 2010

Randomize Image Display using Javascript

When you reach the location of your HTML that you need to display an randomized image, you can use these codes as a reference:


<script language="javascript">
<!--
var rn = "";
rn = Math.floor(Math.random()*11);
if (rn == "0") {document.write("<img src=\"/img/pic0.jpg\">");}
if (rn == "1") {document.write("<img src=\"/img/pic1.jpg\">");}
if (rn == "2") {document.write("<img src=\"/img/pic2.jpg\">");}
if (rn == "3") {document.write("<img src=\"/img/pic3.jpg\">");}
if (rn == "4") {document.write("<img src=\"/img/pic4.jpg\">");}
if (rn == "5") {document.write("<img src=\"/img/pic5.jpg\">");}
if (rn == "6") {document.write("<img src=\"/img/pic6.jpg\">");}
if (rn == "7") {document.write("<img src=\"/img/pic7.jpg\">");}
if (rn == "8") {document.write("<img src=\"/img/pic8.jpg\">");}
if (rn == "9") {document.write("<img src=\"/img/pic9.jpg\">");}
if (rn == "10") {document.write("<img src=\"/img/pic10.jpg\">");}
// -->


Note that you need to use the Math.random() function to generate random numbers from 0 to 1 (exclusive). Then you need to multiply the random fraction number to the maximum random number you want plus 1. You then use Math.floor() to round it up to the closest integer number.

Here we go!
Read More »
Posted by at No comments:
Labels: ,

Wednesday, February 3, 2010

Weird Image Alignment Problem in HTML

Ever encounter this problem?



The alignment of your image and the adjacent text seem hard to be aligned. The text is always lower than the lowest part of the image. No matter how you adjust the CSS of the <img>, nothing works.

There is a simple solution to this:

<Table><TR><TD><img src="/image/but1.gif"></TD><TD><a href="[http_address]">Click if you need to click</a></TD></TR></Table>

Changed from the common mistake of mixing image with text next to each other:

<img src="/image/but1.gif"><a href="[http_address]"> Click if you need to click</a>

All you need to do is just to make a table out of it. Separate the image and text and put them into separate table data columns. Problem solved. If you need to further align the text, you can always use valign to adjust the vertical alignment of the text. Anyway, the TD height adjustment won't help as the TDs share the same height unless you create another table inside the TD.



Simple problem. Simple solution but hard to catch.
Read More »
Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)