Posts Tagged ‘Wordpress’

Before-After Photo Effect Plugin

Posted on March 4th, 2010 || 274 Comments

Before After Plugin: Can be used to display difference in before and after photos.

Detailed Description:
        Before After plugin integrates jQuery Before/After Plugin in WordPress. It can be used to show the difference between edited and original photo, before and after photos of changes, etc. Please check ‘Other Notes’ for the Usage instructions to see how to use it on your blog.

Features:

  • Can be used on multiple photos on the same page/post
  • The options for Jaavascript can be customized for your blog/taste thourgh Before after options page
  • Even the effects for single instance of before after effect can be customized (see FAQs for more details)

Demosites:

  1. On this site you can find various posts where before after effect is being used like this one -> Trying Photoshop Filters
  2. On my testing site ->Operation with Default wp theme

Limitations:

  • Presently this plugin can only show before after effect on single post/page -> V0.1.5
  • This plugin will show the effect only for 1 set of photos on single post/page -> V0.1.5
  • Might need a reloading home/index/archive/category pages to show effect on all images -> V1.0.0
  • Issues with Chrome, Safari web browsers -> V1.0.0 (enable Automatic Dimension detect option)

Requirements: WordPress version 2.9+ tested upto 3.2

Auto Installation: (Recommended)

  • Go to your blog’s WordPress Admin Panel -> Options -> Before After
  • Search for “before after instruite”
  • Click “Install now”

Manual Installation: (If for some reason you can not use above Auto installation method)

  • Download: Before-After WordPress Plugin
  • Plugin folder in the WordPress plugins folder must be `before-after`
  • Upload folder `before-after` to the `/wp-content/plugins/` directory
  • Activate the plugin through the ‘Plugins’ menu in WordPress
  • Check out ‘Usage Instructions’ for using it on your blog.

Configuration:

  • Go to your blog’s WordPress Admin Panel -> Plugins -> Add New
  • Set the parameters as per your requirements (should work with default parameters too)
  • See Other Notes -> Configuration for more details on configuration parameters

Upgrade Notice:

  • V1.0.0:If you can not see the effects after the automatic upgrade, try deactivating and then reactivating the plugin

Usage Instructions

  • Write the content of your post other than the images
  • Switch to ‘HTML-editor’ mode of the post editor area
  • Click ‘BeforeAfter’ button (This will start the ‘beforeafter’ shortcode)
  • Add the photos to your post through the wordpress image/media uploader
  • Atleast 1 photo should be left align when you insert the images on your post
  • The ‘left-aligned’ photo is taken as before photo so please align your photos accordingly
  • After you have inserted the two images in the post Click ‘BeforeAfter’ button again to close ‘/beforeafter’ shortcode.
  • You can add more content to your post after closing the ‘/beforeafter’ shortcode
  • The content other than image information withing the ‘beforeafter]…[/beforeafter’ is ignored when the shortcode is executed, in other places like home page archive page the content will be shown as is in the post.

Configuration Options
      Plugin Customization:

  • Use Custom Styling
           Enable this to use custom styling (css) and provide the custom css in below Custom Styling Code text area. If you want to integrate the style information in your css file leave the below text area blank.
    CSS tags used by the plugin
    .ba-container {margin-left:auto; margin-right:auto;}
    .ba-container + div.balinks {margin: 0 auto;}
    .ba-container div img {max-width: none;}
  • Javascripts
           Select one of the following

    • wordpress: (recommended option) Use javascripts bundled with wordpress
    • plugin: Uses javascripts from plugin folder jquery(1.6.1) jquery-ui.custom(1.8.13)
    • custom:provide your own scripts (provide complete information including the script tags in Custom JS Code text area.
  • Auto Detect Dimensions
           Enable this if you are having issues on your site with Chrome or Safari Web Browsers

      Javascript Customization:

  • Introduction Animation (animateintro)
          When enabled the drag bar will start on extreme right side and gradually move to the positions specified by introPosition
  • Introduction Delay (introDelay)
          The time in milliseconds to wait before starting the introduction animation when enabled animateintro is enabled
  • Introduction Duration (introDuration)
          The time in milliseconds, it will take drag bar to go from right side to the positions specified by introPosition during the introduction animation when enabled animateintro is enabled
  • Introduction Position (introPosition)
          The initial position where the drag bar will be located, value between 0.0 (extreme left) and 1.0 (extreme right)
  • Show Full Links (showFullLinks)
          whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image
  • Before link Text (beforeLinkText)
          Text of link to display for showing full Before image
  • After link Text (afterLinkText)
          Text of link to display for showing full After image
  • Path to images (imagePath)
          Full path to images used by plugin
  • Cursor (cursor)
          Type of cursor to show on drag bar
  • Click Speed (clickSpeed)
          Speed specified in milliseconds for click animation
  • Link Display Speed (linkDisplaySpeed)
          Speed specified in milliseconds for animation when before or after image link is clicked
  • Divider Color (dividerColor)
          Hex Color code for the divider bar
  • Image Width (imgWidth)
          This value is used in case the plugin code cannot find image width when auto detect dimensions is enabled
  • Image Height (imgHeight)
          This value is used in case the plugin code cannot find image width when auto detect dimensions is enabled

      Javascript Customization for each instance of before after photo effect:
          You can supply custom options with each beforeafter short code. Use shorthand description provided with options above to specify custom parameters. For example below code
beforeafter dividerColor="#ff0000" beforeLinkText="Before"

Changelog

  • V1.0.0 (Released: July 8, 2011)
    • Total revamped of code
    • Using modified version of Jquery Before After original script to V1.3
    • Added options page
    • Before After Javascripts options can be provided through shortcode attributes now
  • V0.1.5
    • Fixed the bug causing php error
  • V0.1.4
    • Changed code to use JScripts bundeled with WordPress
    • Modified the beforeafter.js for a fix for depreceated function
    • bug in image cause image height to default to 0 px
  • V0.1.3
    • Upgrade the original jquery.beforeafter to V1.2
  • V0.1.2
    • Fixed a bug causing the button to put shortcode not showing up in editor
  • V0.1.1
    • Fixed a bug caused by themes (like twentyten) which set max-width for images
  • V0.1.0
    • Changed to show effect on pages other than single post
    • Added activation and deactivation functions to add/delete options in wp-table

Posted under: Plugins, Wordpress
Tagged with: , , , , , , , ,

Recent Photos Plugin for WordPress

Posted on February 28th, 2010 || 55 Comments

Recent Photos Plugin: can be used to display recent photos from your media library in the sidebar.

Updates: Version 0.0.2 – Added option to randomize photos

Detailed Description:
Recent Photos Plugin provides with a widget to display n numbers of photos in the sidebar.
The display can be customized through custom css or integrated in main style sheet file of your theme. Plugin also provides an option to use Thickbox (along with the patch code necessary for running thickbox on wordpress).

Download: Recent Photos Plugin.

Demosites:

  1. Demo with Default WP Theme
  2. This website shows the use of this plugin customised by css.

Installation:

  • Plugin folder in the WordPress plugins folder must be `recent-photos`
  • Upload folder `recent-photos` to the `/wp-content/plugins/` directory
  • Activate the plugin through the ‘Plugins’ menu in WordPress
  • Go to WP Admin > Appereance > Widgets and put the ‘Recent Photos’ widget in your sidebar
  • Configure the options as per your requirements and wordpress installation

Upgrade Instructions

  • Just Click ‘Upgrade Plugin Automatically’ within the WordPress Plugin Admin Area
  • Go to WP Admin > Appereance > Widgets and put the ‘Recent Photos’ widget in your sidebar
  • Configure the options as per your requirements and wordpress installation (New option for Randomize should be there)

Configuration Options:

  • Title: Title for the widget will be displayed as per your theme
  • Number of the photos: Number of photos that will be displayed in the sidebar
  • Randomize: Check to display photos in random
  • Browse Photo Link: Full link to your photos/gallery page
    Leave blank if you don’t want to show the link.
  • Use Thickbox: Enables/Disables the use of thickbox for this widget
  • WordPress Path: Applicable only if Thickbox is enabled
    This option is necessary to provide the patch for thickbox to correctly display thickbox related images (loadinganimation and close). If your wordpress installation is in a subdirectory provide the path for the same followed by a forward slash
    Eg. wordpress/ When the WP installation is in ‘wordpress’ subdirectory
  • Use Custom CSS: Enable/Disables the use of Custom CSS
  • Custom CSS: For styling this plugin requires following CSS ids and classes to be defined
    #recent_photos_envelope{margin:0 0 30px 0;}
    .recent_photo_image a {float:left;display:inline;margin:0 16px 15px 0;border:1px dashed #888;padding:5px}
    .recent_photo_image a:hover {border:1px dashed #000}
    

    The above css code is default css provided with the plugin

Frequently Asked Questions
Q. How to integrate css code in your default style sheet?
A. Copy the default css code into your style sheet
#recent_photos_envelope{margin:0 0 20px 0;}
.recent_photo_image a {float:left;display:inline;margin:0 16px 15px 0;border:1px dashed #888;padding:5px}
.recent_photo_image a:hover {border:1px dashed #000}
#browsephotos{margin: 0 25px 10px 12px; float:right;}

Enable Use Custom CSS option in the widget admin
Make sure Custom CSS code textarea is blank (Should contain no spaces also)

Posted under: Plugins, Wordpress
Tagged with: , , , , ,