WordPress plugin to show jcarousel of images from postsWordPress plugin to show jcarousel of images from posts admin 4 June, 2011 - 17:03
arousel of Post images is a fully integrated jcarousel Image Gallery plugin for WordPress to allow quick and easy galleries built from the iamges attached to posts. Built using the excellent JQuery Carousel
The images can be selected based on post ID, or from all images attached to posts. The default is to select 10 random images from all posts.
You can specify a post as an argument to the shortcode, or let the plugin pull a random selection of images from the posts, by default in random order.
- Install & Activate the plugin
- Use the shortcode in your posts or pages where you want a gallery
- Go to your post/page an enter the shortcode ‘[carousel-of-post-images imagesize=small visible=2 count=15]’
- or add to a PHP file in your template: show_wp_copi_carousel($args)
Use the shortcode to display a random selection of images from the posts on your site.
CSS is used to set the sizing of the Carousel areas.
Show a carousel containing 15 images – using the small size from the attachments. The sizing of the div will come from the CSS
[carousel-of-post-images imagesize=small count=15]
if (function_exists( "show_wp_copi_carousel" )) echo show_wp_copi_carousel(array( 'div' => 'mycarousel', 'size' => '30', 'imagesize' => 'thumbnail')); else echo "Please install and activate plugin carousel-of-post-images";?>
Defining the number of visible items
This needs explaining because it can appear confusing; the following is taken from the JCarousel docs.
You simply define the number of visible items by defining the width (or height) with the class .jcarousel-clip (or the more distinct .jcarousel-clip-horizontal and .jcarousel-clip-vertical classes) in your skin stylesheet.
This offers a lot of flexibility, because you can define the width in pixel for a fixed carousel or in percent for a flexible carousel (This example shows a carousel with a clip width in percent, resize the browser to see it in effect).
So, why there is an option visible? If you set the option visible, jCarousel sets the width of the visible items to always make this number of items visible. Open this example and resize your browser window to see it in effect.
Options for Carousel of Post Images
|skin||tango||Skin to use|
|imagesize||medium||Size of images to select. Does not affect the display just the images that are selected from the posts small,medium,large,full|
|orderby||rand||Display order, possible options see Wordress WP_Query Orderby parameters|
|postid||all||The ID of the post to select images from. If omitted will select from all posts|
|size||10||Number of images to select|
|div||post-carousel||ID of the list for the images. Only necessary to set when using more than one post carousel in a page/post|
|vertical||bool||false||Specifies wether the carousel appears in horizontal or vertical orientation. Changes the carousel from a left/right style to a up/down style carousel.|
|rtl||bool||false||Specifies wether the carousel appears in RTL (Right-To-Left) mode.|
|start||integer||1||The index of the item to start with.|
|offset||integer||1||The index of the first available item at initialisation.|
|scroll||integer||3||The number of items to scroll by.|
|visible||integer||null||If passed, the width/height of the items will be calculated and set depending on the width/height of the clipping, so that exactly that number of items will be visible.|
|animation||mixed||“fast”||The speed of the scroll animation as string in jQuery terms (“slow” or “fast”) or milliseconds as integer (See jQuery Documentation). If set to 0, animation is turned off.|
|easing||string||null||The name of the easing effect that you want to use (See jQuery Documentation).|
|auto||integer||0||Specifies how many seconds to periodically autoscroll the content. If set to 0 (default) then autoscrolling is turned off.|
|wrap||string||null||Specifies whether to wrap at the first/last item (or both) and jump back to the start/end. Options are “first”, “last”, “both” or “circular” as string. If set to null, wrapping is turned off (default).|
JQuery and all its contributors; a truly amazing project.
Originally started with the wp-simple-carousel but heavily modified, so much so that it’s a virtual rewrite but
even so Sergio Milardovich deserves a mention.
Support & Questions
Feel free to use the contact forms with any questions.
If you’d like to thank me for my time making this plugin by you can make a donation.