반응형

image full screen css - How TO - Full Page Image

 

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page 

 

Tryit Editor v3.6

body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("img_girl.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: co

www.w3schools.com

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<div class="bg"></div>

<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>
</html>

반응형
반응형

CSS 이미지 스프라이트(Image Sprite)

 

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.

 

웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다.

하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.

 

이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다.

모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다.

또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다.

 

다음 예제는 하나의 이미지를 가지고 네 개의 아이콘을 만드는 예제입니다.

네 개의 아이콘을 만들기 위해 네 개의 이미지를 사용하는 것이 아닌 다음 이미지 하나만을 가지고 작업하게 됩니다.

<style>
    .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
    .up { width: 21px; height: 20px; background-position: 0 0; }
    .down { width: 21px; height: 20px; background-position: -21px 0; }
    .right { width: 22px; height: 20px; background-position: -42px 0; }
    .left { width: 22px; height: 20px; background-position: -65px 0; }
</style>

 

코딩 연습 : www.tcpschool.com/examples/tryit/tryhtml.php?filename=css_basic_imageSprites_01

 

©TCP-tryWWW

CSS Image Sprites .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; } .up { width: 21px; height: 20px; background-position: 0 0; } .down { width: 21px; height: 20px; background-position: -21px 0; } .right { wi

www.tcpschool.com

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Image Sprites</title>
	<style>
		.up, .down, .right, .left {
			background: url("/examples/images/img_image_sprites.png") no-repeat;
		}
		.up {
			width: 21px;
			height: 20px;
			background-position: 0 0;
		}
		.down {
			width: 21px;
			height: 20px;
			background-position: -21px 0;
		}
		.right {
			width: 22px;
			height: 20px;
			background-position: -42px 0;
		}
		.left {
			width: 22px;
			height: 20px;
			background-position: -65px 0;
		}
	</style>
</head>

<body>

	<h2>이미지 스프라이트를 이용한 이미지 로딩</h2>
	<p>- 원본 이미지 -</p>
	<img src="/examples/images/img_image_sprites.png"><br><br>
	<p>- 추출한 이미지 -</p>
	<div class="up"></div><br>
	<div class="down"></div><br>
	<div class="right"></div><br>
	<div class="left"></div><br>

</body>

</html>
반응형
반응형
Cross Browser image preview in Image upload section is not working in ie8

 

모바일웹에서 이미지 미리보기 기능. input type=file

 

http://stackoverflow.com/questions/13718795/cross-browser-image-preview-in-image-upload-section-is-not-working-in-ie8

 

JSfiddel Link : https://jsfiddle.net/mill01/dg51Lqoj/

 

Result fullscreen :   https://jsfiddle.net/mill01/dg51Lqoj/embedded/result/

 

 

 

.

반응형
반응형

jquery를 이용한 이미지 360 회전 플러그인

 

http://creativecan.com/2013/04/jquery-360-image-rotation-plugins/

 

With a jQuery 360 image rotation plugin, you can make stunning product presentations that make visitors say wow.

Having a website that stands out is crucial for many businesses especially if their primary goal is to create a selling or present a product. Some of the more popular techniques are using jquery slider and carousel plugins to feature your images online as this adds a dynamic flow to an otherwise static page.

However, one of the newer techniques that really helps you bring your products to live is jQuery 360 image rotation plugins. This type of plugin gives you the ability to rotate the images 360 degrees making it possible for customers to study all the details of the products. In addition, you can use jQuery zoom plugins to allow visitors to investigate details in high-resolution images. I found this collection at Tripwire Magazine you may find useful.

I have rounded up more than 15 of the coolest jQuery 360 image rotation plugins for you to easily browse through and find the right one for your website. Please leave a comment letting me know if you use 360 image rotation or if you would consider it. Help us spread this article on Facebook and Twitter if you know of anyone who would benefit from using 360 image rotation on their website. Enjoy!

360° Panoramic Viewer – MORE INFO / DEMO

360-panoramic-viewer

A panorama is a wide-angle view made from a series of images combined together using special software. It offers a very realistic experience, giving the sensation that the user is right there on the location. The plugin manipulates such a panorama and uses jQuery to rotate, add hotspots and integrate it on mobile, touchpads and desktop browsers.

360 panorama for jQuery – MORE INFO / DEMO

three-sixty

A jQuery plugin for displaying your images in a 360 degree panoramic view. Allows several options on how to control the animation, rotation speed and parameter direction.

Expo360° – 360° Product Viewer – MORE INFO / DEMO

expo-360

Opposite to existing 360° viewers available online, this viewer doesn’t use Flash and offers great interaction on mobile devices such as iPad and iPhone. What makes it even more unique is the extensive set of configurations possible. It allows you to create a look and feel that will match your online presence perfectly.

SpriteSpin- MORE INFO / DEMO

sprite-spin

Spritespin is a jQuery plugin that is able to play sprite image animations. It takes an array of images or a stiched sprite sheet and plays them frame by frame like a flip book. The aim of this plugin is to provide a 360 degree view of some kind of product. There is no flash needed. Everything is done with javascript and the jQuery framework.

360 jQuery Image Slider – MORE INFO / DEMO

360-jquery-image-slider

AJAX-ZOOM – 360/3D Spin & Zoom JavaScript Player  – MORE INFO

ajax-zoom

AJAX-ZOOM is a unique tool to present 360° product images on the web. Users can rotate the VR 360 object, also on Z-axis (3D multirow). Additionally deep zoom on every frame (the sprite contains a set of single images of the same object). The adoption of image tiles technology (image pyramid) allows the usage of high resolution images without compression. It has full support for touch devices and works great on iPad (without Flash plugin). Pinch zoom (with two fingers) is implemented too.

360 Image Slider – MORE INFO

360-image-slider

Using JS, CSS and a pre-rendered image sequence a 360 view image slider was created which enables the user to drag and spin the 3D object around its y-axis using simple mouse or touch events.

Dopeless Rotate jQuery Plugin 360 Degrees Product Viewer – MORE INFO / DEMO

dopeless-rotate-jquery-plugin-360

Dopeless Rotate is Jquery plugin for 360 degree product visualisation.

Reel – MORE INFO / DEMO

reel

Reel 1.2.1 is an established jQuery plugin which takes an ordinary image tag and transforms it into a gorgeous interactive 360° object movie, panorama or stop-motion animation.

WordPress 360° Image Slider – MORE INFO / DEMO

wordpress-360-image-slider

The WP 360º Image Slider is a highly configurable plugin that adds slider functionality to your posts or pages.

View3D Javascript – MORE INFO / DEMO

view3d-javascript

Viewer3D is a small jQuery plugin for displaying a 360° view of a sequences of images or panorama. It is simple, lightweight, no flash needed, no extra css need, fast and compatible with all major browsers and touches devices. It has been tested on Android browsers, Ipad browser, IE 6,7,8,9 , Firefox, Chrome, Safari and Opera.

Mini 360 Viewer – MORE INFO / DEMO

mini-360-viewer

This JavaScript jQuery plugin can use any number of sliders. it includes a control bar, main drag and rotate area and a rotation toggle button.

jQuery Image Cube – MORE INFO / DEMO

jquery-cube-image

A jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube.

360 Degrees Viewer – WordPress Plugin – MORE INFO / DEMO

360-degrees-viewer

This viewer uses a list of images to simulate a 360 degrees object rotation or object animation.
The multiple interaction methods makes is usable even on touch devices.

j360 – MORE INFO

j360

j360 is a jQuery plugin designed to display 360 view of product using a set of images. Compatible with iPhone, iPod, iPad, Google Android devices.

Picture 360 Rotation – MORE INFO / DEMO

picture-360-rotation

반응형
반응형

http://www.fileformat.info/convert/image/metadata.htm

반응형
반응형

Apple push notifications and Emoji characters

http://stackoverflow.com/questions/2441027/apple-push-notifications-and-emoji-characters



Easy APNS Apple Push Notification Service using PHP & MySQL

http://www.easyapns.com/category/just-for-fun



Emoji for PHP

This library allows the handling and conversion of Emoji in PHP.

You can download the latest release (r3) which contains a helpful readme file.

If you want the bleeding edge, it's also in my public GitHub repo.


http://code.iamcal.com/php/emoji/




반응형

+ Recent posts