Tag Archive for image

Link/Image opacity until hover

The CSS

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.4;
opacity: 0.5;
-khtml-opacity: 0.4;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

Add the class "linkopacity" to the <a>

<a href="#" class="linkopacity"><img src="images/photo.jpg"></a>

source

Image-less Dropshadow

#north {position: absolute;width: 200px;left: 100px;top: 100px;height: 5px;}

#east {width: 5px;position: absolute;height: 200px;top: 100px;left: 100px}

#south {position: absolute;width: 200px;height: 5px;left: 100px;top: 302px;}

#west {width: 5px;position: absolute;height: 200px;top: 100px;left: 305px}

.ds_ch {height: 1px;line-height: 1px;width: 100%;background: black;display: block;overflow: hidden;}

#east .ds_ch, #west .ds_ch {width: 1px;height: 100%;float: left;clear: none;display: inline;}

.o1 {opacity: .5;filter: alpha(opacity=50);}

.o2 {opacity: .4;filter: alpha(opacity=40);}

.o3 {opacity: .3;filter: alpha(opacity=30);}

.o4 {opacity: .20;filter: alpha(opacity=20);}

.o5 {opacity: .10;filter: alpha(opacity=10);}

/* For connecing the shadow in 2 corners */

.mv1 {margin-top: 0px;padding-bottom: 7px;}

.mv2 {margin-top: 1px;padding-bottom: 5px;}

.mv3 {margin-top: 2px;padding-bottom: 3px;}

.mv4 {margin-top: 3px;padding-bottom: 1px;}

.mv5 {margin-top: 4px;padding-bottom: 0px;}

.m1 {margin-left: 1px;padding-right: 8px;}

.m2 {margin-left: 2px;padding-right: 6px;}

.m3 {margin-left: 3px;padding-right: 4px;}

.m4 {margin-left: 4px;padding-right: 2px;}

.m5 {margin-left: 5px;padding-right: 0px;}

/*
ds = dropshadow

ch = child
pa = parent

o = opacity
m = margin
mv = margin vertical

*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="#" />
<meta name="Description" content="#" />
<meta name="Copyright" content="#" />
<meta name="Robots" content="#" />
<meta name="Generator" content="#" />
<meta name="Keywords" content="#" />
<link rel="stylesheet" href="shadows.css" type="text/css"  media="screen"/>
</head>
<body>
<div id="north">
<div class="ds_ch o1 m1">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o5 m5">
</div>
</div>
<div id="east">
<div class="ds_ch o5 mv5">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o1 mv1">
</div>
</div>
<div id="south">
<div class="ds_ch o5 m5">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o1 m1">
</div>
</div>
<div id="west">
<div class="ds_ch o1 mv1">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o5 mv5">
</div>
</div>
</body>
</html>

source

jQuery dynamic image resizer function

/**
* scaleImage 0.1
*
* Rendez vos sites glissant !
*
* Copyright (c) 2008 Benoit G (http://www.tim-burton.net) based upon
* Licensed under the Creative Commons License:
* <a href="http://creativecommons.org/licenses/by/3.0/" >http://creativecommons.org/licenses/by/3.0/</a>
*
* Date: 2008-08-25
*/

(function($){
$.fn.scaleImage = function(options) {

var defaults = {
maxwidth: 200,
linkclass:'',
icon:true,
thickbox:true
};
var options = $.extend(defaults, options);

return this.each(function() {
obj = $(this);

var width = obj.width();
var height = obj.height();
if (width > options.maxwidth) {
//Set variables	for manipulation
var ratio = (height / width );
var new_width = options.maxwidth;
var new_height = (new_width * ratio);
var classes = options.linkclass+' scaleImage';

//thickbox
if (options.thickbox == true) {
var img_full_link = obj.attr('src');
obj.wrap('<a class="thickbox" title="'+obj.attr('alt')+'" href="'+img_full_link+'"></a>');
tb_init(obj.parent('a'));
}

//Shrink the image and add link to full-sized image
obj.height(new_height).width(new_width);
obj.addClass(classes);

//zoom icon
if (options.icon == true) {
obj.after('<div class="thumb-zoom"> </div>');
obj.hover(function(){
$(this).next('.thumb-zoom').addClass("hover");
},function(){
$(this).next('.thumb-zoom').removeClass("hover");
});
}

}
});
};
})(jQuery);

source

PHP Create Thumbnail Images

<?php
function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth )
{
// open the directory
$dir = opendir( $pathToImages );

// loop through it, looking for any/all JPG files:
while (false !== ($fname = readdir( $dir ))) {
// parse path for the extension
$info = pathinfo($pathToImages . $fname);
// continue only if this is a JPEG image
if ( strtolower($info['extension']) == 'jpg' )
{
echo "Creating thumbnail for {$fname} <br />";

// load image and get image size
$img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
$width = imagesx( $img );
$height = imagesy( $img );

// calculate thumbnail size
$new_width = $thumbWidth;
$new_height = floor( $height * ( $thumbWidth / $width ) );

// create a new temporary image
$tmp_img = imagecreatetruecolor( $new_width, $new_height );

// copy and resize old image into new image
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

// save thumbnail into a file
imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
}
}
// close the directory
closedir( $dir );
}
// call createThumb function and pass to it as parameters the path
// to the directory that contains images, the path to the directory
// in which thumbnails will be placed and the thumbnail's width.
// We are assuming that the path will be a relative path working
// both in the filesystem, and through the web for links
createThumbs("upload/","upload/thumbs/",100);
?>

source

CSS Cambiar el tamaño de las Miniaturas usando la propiedad Css Overflow

/* single thumbnail */
p.thumb{
float:left;
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
p.thumb a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
p.thumb a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* mouse over */
p.thumb a:hover{
overflow:visible;
z-index:1000;
border:none;
}
p.thumb a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* // single thumbnail */

<p class="thumb"><a href="http://xyberneticos.com/"><img src="image.jpg" /></a></p>

source

Get the width and height of an image using a function in PHP

<?php

list($width, $height, $type, $attr) = getimagesize("image_name.jpg");

echo "Image width " .$width;
echo "<BR>";
echo "Image height " .$height;
echo "<BR>";
echo "Image type " .$type;
echo "<BR>";
echo "Attribute " .$attr;

?>

source

ImageUpload

<?php
/**************************************
seesaw associates | <a href="http://seesaw.net" >http://seesaw.net</a>

client:
file:
description:

Copyright (C) 2008 Matt Kenefick(.com)
**************************************/

class mk_imageUpload{

var $max_size;
var $allowed_types;
var $thumb_height;
var $dest_dir;
var $extensions;
var $max_height;
var $max_main_height;

var $last_ext;
var $last_pid;
var $last_uid;

var $image_file;
var $image_field;

function __construct( $maxHeightMain, $maxHeightThumb, $destDir ){
$this->max_size = (1024/2)*1000;		// 750kb
$this->allowed_types = array( 'jpeg', 'jpg', 'pjpeg', 'gif', 'png' );
$this->extensions = array(
'image/jpeg'		=>		'.jpg',
'image/gif'			=>		'.gif',
'image/png'			=>		'.png',
'image/x-png'		=>		'.png',
'image/pjpeg'		=>		'.jpg'
);
$this->dest_dir = $destDir;
$this->max_height = $maxHeightThumb;
$this->max_main_height = $maxHeightMain;
}

function putImage( $formname, $newName ){
$this->image_field = $formname;
if( $this->getImage() ){

// Check for errors
if ( !$this->checkType() )
return $this->throwError(2);

if ( !$this->checkFileSize() )
return $this->throwError(1);

// Get Image
$img = $this->image_file;

// Check seize
if ( !$this->checkImageSize() )
return $this->throwError(3);

// Get image dimensinos
$size = $this->getImageSize();
$size['width'] = $size[0];
$size['height'] = $size[1];
$ratio = $this->max_height/$size['height'];

$maxheight = $this->max_height;
$maxwidth = $size['width'] * $ratio;

// Create Thumbnail
$s_t = $this->resizeImage( $size, $img, $maxwidth, $maxheight,$newName,'s' );

if( $size['height'] > $this->max_main_height ){
$ratio = $this->max_main_height/$size['height'];
$maxheight = $this->max_main_height;
$maxwidth = $size['width'] * $ratio;
}else{
$maxheight = $size['height'];
$maxwidth = $size['width'];
}

// Create Large rescaled
$s_l = $this->resizeImage( $size, $img, $maxwidth, $maxheight,$newName,'l' );

// remove temporary file
unlink($img['tmp_name']);

if( $s_t && $s_l ){
$nm = split('_',$newName);
$this->last_ext = $this->extensions[$size['mime']];
$this->last_pid = $nm[0];
$this->last_uid = $nm[1];
return 'ok';
}else{
return $this->throwError( 4 );
}
}else{
return $this->throwError( 2 );
}
}

function resizeImage($size,$img,$maxwidth,$maxheight,$newName,$ext){
// Create a thumbnail
if($size['mime'] == "image/pjpeg" || $size['mime'] == "image/jpeg"){
$new_img = imagecreatefromjpeg($img['tmp_name']);
}elseif($size['mime'] == "image/x-png" || $size['mime'] == "image/png"){
$new_img = imagecreatefrompng($img['tmp_name']);
}elseif($size['mime'] == "image/gif"){
$new_img = imagecreatefromgif($img['tmp_name']);
}

if (function_exists('imagecreatetruecolor')){
$resized_img = imagecreatetruecolor($maxwidth,$maxheight);
}else{
return("Error: Please make sure your server has GD library ver 2+");
}

imagecopyresized($resized_img, $new_img, 0, 0, 0, 0, $maxwidth, $maxheight, $size['width'], $size['height']);
if($size['mime'] == "image/pjpeg" || $size['mime'] == "image/jpeg"){
$success = ImageJpeg ($resized_img,$this->dest_dir.$newName.'_'.$ext.$this->extensions[$size['mime']]);
}elseif($size['mime'] == "image/x-png" || $size['mime'] == "image/png"){
$success = ImagePNG ($resized_img,$this->dest_dir.$newName.'_'.$ext.$this->extensions[$size['mime']]);
}elseif($size['mime'] == "image/gif"){
$success = ImageGIF ($resized_img,$this->dest_dir.$newName.'_'.$ext.$this->extensions[$size['mime']]);
}

// Remove temporary images
ImageDestroy ($resized_img);
ImageDestroy ($new_img);

return $success;
}

function getImage(){
if( isset($_FILES[$this->image_field]) && is_uploaded_file($_FILES[$this->image_field]['tmp_name'])  ){
$this->image_file = $_FILES[$this->image_field];
return true;
}
return false;
}

function returnImg(){
return $this->image_file;
}

function getImageSize(){
$img = $this->returnImg();

return getimagesize($img['tmp_name']);
}

function checkImageSize(){
$size = $this->getImageSize();

if( $size[1] < $this->max_height )
return false;
return true;
}

function checkFileSize(){
$img = $this->returnImg();

if( $img['size'] > $this->max_size )
return false;
return true;
}

function checkType(){
$img = $this->returnImg();

$type = split('/',$img['type']);
if(	!in_array( $type[1], $this->allowed_types ) )
return false;
return true;
}

function throwError($val){
switch($val){
case 1: return 'Error: File size is too large';
break;
case 2: return 'Error: Improper file format';
break;
case 3: return 'Error: Your image is too small';
break;
case 4: return 'Error: There was an error creating the images';
break;
}
}

}

?>

source

Background image in LaTeX

# Add this code before egin{document}

usepackage{eso-pic}

ewcommandBackgroundPic{
put(0,0){
parbox[b][paperheight]{paperwidth}{%
vfill
centering
includegraphics[width=paperwidth,height=paperheight,
keepaspectratio]{background.png}%
vfill
}}}

# and this immediately after egin{document} :

AddToShipoutPicture{BackgroundPic}

source

How to Resize an Image Using PHP – Image Resizing Script

<?php

// This is the temporary file created by PHP
$uploadedfile = $_FILES['uploadfile']['tmp_name'];

// Create an Image from it so we can do the resize
$src = imagecreatefromjpeg($uploadedfile);

// Capture the original size of the uploaded image
list($width,$height)=getimagesize($uploadedfile);

// For our purposes, I have resized the image to be
// 600 pixels wide, and maintain the original aspect
// ratio. This prevents the image from being "stretched"
// or "squashed". If you prefer some max width other than
// 600, simply change the $newwidth variable
$newwidth=600;
$newheight=($height/$width)*600;
$tmp=imagecreatetruecolor($newwidth,$newheight);

// this line actually does the image resizing, copying from the original
// image into the $tmp image
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

// now write the resized image to disk. I have assumed that you want the
// resized, uploaded image file to reside in the ./images subdirectory.
$filename = "images/". $_FILES['uploadfile']['name'];
imagejpeg($tmp,$filename,100);

imagedestroy($src);
imagedestroy($tmp); // NOTE: PHP will clean up the temp file it created when the request
// has completed.
?>

source

ASP.Net Page to Return an Image from an SQL Blob Query

protected void Page_Load(object sender, EventArgs e)
{
string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["ProductCatalogueConnectionString"].ConnectionString;
SqlConnection conn = new SqlConnection(connStr);
string blobId = Request.QueryString["ID"];
if (!string.IsNullOrEmpty(blobId))
{
string cmdText = "select A.blob from Core.Attachment A where A.AttachmentID = '" + blobId + "'";
conn.Open();
SqlCommand cmd = new SqlCommand(cmdText, conn);
SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
if (reader.Read())
{
byte[] imgBytes = (byte[])reader["blob"];
Response.ContentType = "image/jpeg";
Response.BinaryWrite(imgBytes);
}
}
}

source