jQuery Photo Image Effects: Plugin to apply image effects on photos

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 152 All time: 329 This week: 14Up
Version License JavaScript version Categories
jquery-photo-image 1.0MIT/X Consortium ...4.0jQuery, Graphics
Description 

Author

This is a jQuery plugin to apply image effects on photos.

It takes a list of one or more image elements on an HTML page and applies different image effects using CSS attributes.

Currently it can rotate an image by a fixed or random angle of a range, add a border, add a shadow, etc..

Picture of Thomas Björk
  Performance   Level  
Name: Thomas Björk <contact>
Classes: 5 packages by
Country: Sweden Sweden
Age: 56
All time rank: 381 in Sweden Sweden
Week rank: 6 Up1 in Sweden Sweden Equal
Innovation award
Innovation award
Nominee: 4x

Example

<!DOCTYPE html> <html> <head> <title>Create photo effect on images</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- load jQuery --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- load jQuery plugin for photoImages --> <script src="../jquery.photoimages.min.js"></script> <script> jQuery(document).ready(function() { // Create photoImages with a seed-based rotation jQuery('.test1').photoImages({ boxShadowOffsetX: '10px', boxShadowOffsetY: '10px', boxShadowLength: '10px', boxShadowColor: '#7f7f7f', marginRight: '10px', rotate: 'seed' }); // Create photoImages with a random-based rotation jQuery('.test2').photoImages({ boxShadowOffsetX: '10px', boxShadowOffsetY: '10px', boxShadowLength: '10px', boxShadowColor: '#7f7f7f', marginTop: '15px', marginRight: '15px', marginBottom: '15px', rotateMin: -20, rotateMax: 20, rotate: 'random' }); // Create photoImages with aa animated rotation jQuery('.test3').photoImages({ rotate: 'animate', rotateStep: -3, rotateDelay: 20 }); }); </script> </head> <body> <div> <img src="images/image1.png" class="test1" /> <img src="images/image2.png" class="test1" /> <img src="images/image3.png" class="test1" /> <img src="images/image4.png" class="test1" /> <img src="images/image5.png" class="test1" /> </div> <div> <img src="images/image1.png" class="test2" /> <img src="images/image2.png" class="test2" /> <img src="images/image3.png" class="test2" /> <img src="images/image4.png" class="test2" /> <img src="images/image5.png" class="test2" /> </div> <div> <img src="images/image1.png" class="test3" /> <img src="images/image2.png" class="test3" /> <img src="images/image3.png" class="test3" /> <img src="images/image4.png" class="test3" /> <img src="images/image5.png" class="test3" /> </div> </body> </html>

Details

JQueryPhotoImages

jQuery-plugin to convert images to photo-like images (frame, shadow and rotation)

Distribution and development

There are two different files that can be used.

resourceloader.js

is intended for development and testing.

resourceloader.min.js

is intended for production usage.

The minification is done by Googles Closure compiler in simple mode.

Options

borderWidth

The width of the border around the image.

Default value = 10px

borderStyle

The style of the border around the image.

Default value = solid

borderColor

The color of the border around the image.

Default value = #ffffff

border

This is a combined value for the border. It work the same way as for the CSS-border value ([width] [style] [color]).

If this value is omitted then it defaults to the properties for borderWidth, borderStyle and borderColor.

If this value is assigned then it overrides the individual properties for borderWidth, borderStyle and borderColor.

boxShadowOffsetX

The x-offset for the box-shadow

Default value = 5px

boxShadowOffsetY

The y-offset for the box-shadow

Default value = 5px

boxShadowLength

The shadow length for the box-shadow

Default value = 5px

boxShadowColor

The color to use as a base for the box-shadow

Default value = #cccccc

boxShadow

This is a combined value for the box-shadow. It work the same way as for the CSS-box-shadow value ([boxShadowOffsetX], [boxShadowOffsetY], [boxShadowLength], [boxShadowColor]).

If this value is omitted then it defaults to the properties for boxShadowOffsetX, boxShadowOffsetY, boxShadowLength and boxShadowColor.

If this value is assigned then it overrides the individual properties for boxShadowOffsetX, boxShadowOffsetY, boxShadowLength and boxShadowColor.

marginLeft

A margin-left to use for the image. If the value is set to "leave" then the margin-left will not be changed.

Default value = leave

marginTop

A margin-top to use for the image. If the value is set to "leave" then the margin-top will not be changed.

Default value = leave

marginRight

A margin-right to use for the image. If the value is set to "leave" then the margin-right will not be changed.

Default value = leave

marginBottom

A margin-bottom to use for the image. If the value is set to "leave" then the margin-bottom will not be changed.

Default value = leave

rotate

If this property is assigned then the image will be rotated.

Allowed values

random

Uses the browsers internal random engine (Math.random) to create an angle to use for each individual image. The min value is defined by the property rotateMin. The max value is defined by the property rotateMax.

seed

Uses the plugins internal random engine to create an angle to use for each individual image. The min value is defined by the property rotateMin. The max value is defined by the property rotateMax.

The big difference bwtween random and seed is that seed will produce the same sequence each time which will allow the same layout for each page load.

animate

Creates an animation. The animation is based on the interval (time between movements) and step (how much to rotate each time).

The interval is defined in microseconds.

The step is defined in degrees.

numeric value

If a numeric value is used then the images is rotated this number of degrees.

leave

If the value is "leave" then nothing is done.

Default value = leave

rotateMin

If the rotate property is set to random or seed then this value defines the lowest angle to rotate.

Default value = -20

rotateMax

If the rotate property is set to random or seed then this value defines the highest angle to rotate.

Default value = 20

rotateAngle

This is not a property that can be set. This is calculated as the difference by rotateMax and rotateMin and defines the span of the llowed angle.

rotateSeed

When using rotate = "seed" then this defines the seed for the internal "random engine".

Default value = 0

rotateStep

If using rotate = "animate" then this property defines how many degrees the image should turn each step.

Default value = 1

rotateDelay

If using rotate = "animate" then this property defines the delay between steps for the animation.

Default value = 40


  Files folder image Files (10)  
File Role Description
Files folder imageexamples (1 file, 1 directory)
Plain text file jquery.photoimages.js Class Class source
Plain text file jquery.photoimages.min.js Class Class source
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files (10)  /  examples  
File Role Description
Files folder imageimages (5 files)
  Accessible without login Plain text file example1.html Example Documentation

  Files folder image Files (10)  /  examples  /  images  
File Role Description
  Accessible without login Image file image1.png Photo Photograph
  Accessible without login Image file image2.png Photo Photograph
  Accessible without login Image file image3.png Photo Photograph
  Accessible without login Image file image4.png Photo Photograph
  Accessible without login Image file image5.png Photo Photograph

 Version Control Unique User Downloads Download Rankings  
 100%
Total:152
This week:0
All time:329
This week:14Up