dynamically assign with jquery css top and left for an image thumb

The addElement function sets a variable by grabbing the element of which we will append a child node to.

<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>

adding pixels to jquery .css() left property

For example, to add 150px:

$(this).css("left", "+=150")
// Gets the number of elements with class yourClass
var numItems = $('.yourclass').length

using img tag

function fnLoadImage_1() {
var imagePath = "http://thetutorialhub.com/main/images/baby.jpg"
document.getElementById('resultAreaID_1').innerHTML = "<img src="+imagePath +" onload='fnCallback_1()'>";
}
$(document).ready(function() {
document.getElementById('testCodeBtnID_1').onclick = function (){
fnLoadImage_1();
};
});
function fnCallback_1(){
alert("Image loaded successfully.")
}

Using Image object

Load image using jQuery

Before running any script, make sure that you have empty image nodes in your html file.

set src attribute blank just before actually providing the image path.

function fnLoadImage_4() {
    $('#resultAreaID_4').hide();
    $('#resultAreaID_4').attr("src", "")
    var imagePath = "http://thetutorialhub.com/main/images/rishu_1.jpg"
    $('#resultAreaID_4').attr("src", imagePath)
}
//------------------------------------------------------------//
// Called when image is loaded
//------------------------------------------------------------//
function fnCallback_4() {
    $('#resultAreaID_4').show();
    $('#resultAreaID_4').fadeOut("slow").fadeIn("slow");
}
//------------------------------------------------------------//
// Function called when DOM is ready
//------------------------------------------------------------//
$(document).ready(function () {
    $('#resultAreaID_4').attr("src", "").load(fnCallback_4);
    document.getElementById('testCodeBtnID_4').onclick = function () {
        fnLoadImage_4();
    };
});

 set as absolute

jQuery – Looped Slider Images From Folder

automatically read images from a directory and add the alt tag, link and caption using the image meta information.

<!--?php
//Relative path to yout image directory
$dirpath = "slideshow";
//Website URL to that same image directory
$dirURL = "http://www.jazzerup.com/blogexamples/loopedslider/slideshow/";

$folder = opendir($dirpath);
$pic_types = array("jpg", "jpeg");
$alttag = "";
$websiteurl= "";
$caption = "";
$index = array();

//Loop through the images in the directory
while ($file = readdir ($folder)) {
  if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
      {                       
      $items[] = $file;            
    }
}
//each time it loads it shuffles the images
shuffle($items);
for($i=0; $i<sizeof($items); $i++) {
  $picpath = $dirpath . "/" . $items[$i];
  $exif = exif_read_data($picpath, 'EXIF');
  $alttag = $exif['Title']; //alt tag
  $websiteurl= $exif['Subject']; //website url
  $caption = $exif['Comments']; //caption
  $title = $exif['Title']; //title
  $comments = $exif['Comments']; //comments

 $varimages = $varimages . "<li--><divcolor: rgb(0, 0, 255);">">";

//Build the html code based on the metadata
  if ($caption != "") {
    $caption =  "title='" . $caption  . "'";
    $alt = "alt='" . $caption  . "'";
  }
  if ($alttag != "") {
    $alt =  "alt='" . $alttag . "'";
  }
  if ($websiteurl != "") {
    $varimages =  $varimages . " <a href="$websiteurl"><img src="$picpath" $alt="" $caption="" height="254" width="625"></a>" ;
  } else {
  $varimages =  $varimages . " <img src="$picpath" $alt="" $caption="" height="254" width="625">";
      }
  $alttag = "";
  $websiteurl= "";
  $caption = "";
  $varimages =  $varimages . "</div><divcolor: rgb(0, 0, 255);">">
            <h2>$title</h2>
          <p>$comments </p></div>";
}
closedir($folder);

echo $varimages;
?>

via http://thetutorialhub.com/main/jsjq-load-images/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

%d bloggers like this: