Plugin Name: w3images gallery for WordPress
Plugin URI : http://www.axew3.com/
Author : Alessio Nanni – axew3
Description : This plugin allows you to add an image gallery to your WordPress.
Last version: wordpress.org latest w3images
NOTE that for w3images version 1.1.0 or > it is required to update WordPress at least to version 3.0.0
Download the w3images version 1.0.3 that is compatible with previous WordPress versions for installations not updated to latest wp 3.0.0 version or greater.
Downloads page – w3images the images gallery for WordPress
W3IMAGES FEATURES
Upload single or multiples images. (upload multiple images through ftp inside the w3images upload folder, than go to admin ->w3images -> Batch Upload, set the section or subsection where you like to load images and if images are ready to be published. After the batch upload of all images is done, you can delete images inside the upload folder, and maybe load next 50/100 images for the next batch images upload.
Unlimited sections and subsections.
Set slide show for images to be displayed on three different ways:
- Simple js/html popup
- Slide in the same page
- Shadowbox ajax mode
NOTICE: Shadowbox ajax mode
It is necessary to add on your header page some lines of code to get Shadowbox ajax mode properly work with w3images.
Open your header.php template file (you can do it also by using the template editor in administration) and add just before the
wp_head();
instruction that is contained between tags
<head> …. </head>
the call for the needed javascript ajax library and his css in this way (copy the following highlighted code as is):
<link rel="stylesheet" href="<?php echo get_bloginfo('url'); ?>/wp-content/plugins/w3images/includes/ajax/shadowbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo get_bloginfo('url'); ?>/wp-content/plugins/w3images/includes/ajax/jquery.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('url'); ?>/wp-content/plugins/w3images/includes/ajax/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: false
});
</script>
paste it just before the wp_head(); declaration and you are ready to use the Shadowbox ajax slide show. Check that in Administration -> Settings -> w3images -> Settings -> Images navigation the Ajax option is the selected one.
Please refer to these two comments to know more about adding images on pages and posts:
add images to pages and posts on wordpress with w3images #1
add images to pages and posts on wordpress with w3images #2
After you have read the comments above linked, you maybe will be happy to know that you can create in this way (as described on comments, adding with the <img> tag and the rel=”shadowbox how many images you like on a specific page, and creating different galleries with these images using the rel=”shadowbox in this way:
rel=”shadowbox[FirstSlideSet]” for a set of images that will belong to a first slide gallery
and (for example):
rel=”shadowbox[SecondSlideSet]” for a set of images that will belong to a second slide gallery. Practically the change of the value for the attribute rel cause that all images linked with same rel attribute value belongs to a specific slide set of images.
You can use the above to call images as described in others examples in this way:
First set of two images added to a comment (for example) that are belongs to rel=”shadowbox[FirstSlideSet]“ gallery set:
<a href="http://www.axew3.com/b10g/wp-content/plugins/w3images/images/2.jpg" rel="shadowbox[FirstSlideSet]"><img src="http://www.axew3.com/b10g/wp-content/plugins/w3images/images/tb_2.jpg" /><a>
<a href="http://www.axew3.com/b10g/wp-content/plugins/w3images/images/3.jpg" rel="shadowbox[FirstSlideSet]"><img src="http://www.axew3.com/b10g/wp-content/plugins/w3images/images/tb_3.jpg" /><a>
Second set of two images added to a comment that are belongs to rel=”shadowbox[SecondSlideSet]“ gallery set:
<a href="http://www.axew3.com/b10g/wp-content/plugins/w3images/images/2.jpg" rel="shadowbox[SecondSlideSet]"><img src="http://www.axew3.com/b10g/wp-content/plugins/w3images/images/tb_2.jpg" /><a>
<a href="http://www.axew3.com/b10g/wp-content/plugins/w3images/images/3.jpg" rel="shadowbox[SecondSlideSet]"><img src="http://www.axew3.com/b10g/wp-content/plugins/w3images/images/tb_3.jpg" /><a>
If we try to add this working code here we will see that the first set of two linked images with rel attribute set to w3images are opened in the same slide of two images (you can add 10, 100 or 1000 images of course where you like on your blog) and the second set with rel attribute set with value SecondSlideSet are opened on a different set.
This is the simple working example added to this page, images are token from folder where w3images store uploaded images. Relative url for images folder is wp-content/plugins/w3images/images:
First set of three images:
Second set of five images:
It is so powerful and so simple!
NOTICE: important!
Uploaded images are stored with numerical name, like 1.jpg, 3.jpg, 4.gif and so on. The relate number (image name) for images are displayed on administration while editing images or when while listing images for each category, or, for example, by pointing the mouse over a thumbnail (in administration or directly on the gallery) and reading the image’s name on browser’s status bar. Images are stored in the folder wp-content/plugins/w3images/images and for each image you’ll find the full version and the thumbnail, that are named in this way:
Full images are stored as number + image extension: 12.jpg
Thumbnails are stored in this way: tb_ + number + image extension: tb_12.jpg
… … …
Set how many thumbnails per page and how per row to be displayed, and there dimensions.
Thumbnails are created automatically for images while uploading, or you can choose to manually upload thumbnails together with images. Thumbnails can be created automatically for jpeg, gif, and png. If you like upload different kind of images (like .bmp) you need to set the manual upload option for thumbnails: in case the thumbnail isn’t created automatically when the image is stored, in the thumbnails images list will appear the image title instead of the little thumb.
INSTALL W3IMAGES
To install w3images, upload the entire w3images folder into the wordpress -> wp-content -> plugins folder.
Upload wp-w3images.php and wp-w3pup.php files on your WordPress root.
Activate the plugin w3images images gallery for WordPress plugin in administration.
The images gallery will be available pointing your browser to (example): http://www.axew3.com/b10g/wp-w3images.php.
UPDATE W3IMAGES FROM PREVIOUS VERSION:
To update w3images from an any old version to the latest:
- Upload all latest files (overwrite old versions) wp-w3images.php and wp-w3pup.php in the root, and all others files/folders contained in the w3images plugin folder
CUSTOMIZE W3IMAGES (administration)
The page to change settings and customize your gallery images, can be found in administration under Settings -> w3images
CUSTOMIZE W3IMAGES TEMPLATE LAYOUT:
The wp-w3images.php file that you need to upload into your wordpress root directory,
need maybe to be edited to feet your template.
Open it with a text editor and read inside simple instructions to adjust it in few steps.
You can do it easily if you have already see also a single WordPress theme’s file. If any question or request to help in this, just let know it.
From version 1.1.3 the css file contained in wp-content/plugins/w3images/includes/w3images.css is added automatically by the w3images plugin to the header of the installed theme, just in case the w3images page is browsed. It isn’t loaded on all others blog’s pages where it isn’t needed. It is now possible to fix/change the gallery output layout by editing directly the w3images.css.
W3IMAGES TIPS
- Add images to posts and pages using <img> tag:
to add images into your posts or pages simply by using the <img> tag:
when uploaded, images are stored in the folder named images, inside the w3images plugin directory. By going on administration and navigating between uploaded images, you can go in edit mode for any single image: in this page the thumbnail is displayed and by pointing your mouse over the thumbnail you can know the image uri and name (number: the w3images store images after renaming it numerically, like 1.jpg, 2.jpg, 3.png, 4.gif, etc.). By a right click and a “Copy Link Location” you can have the address that you can use to add images on your posts or pages by using the <img> tag as in this example:
<img src=”http://www.axew3.com/b10g/wp-content/plugins/w3images/images/tb_106.jpg” alt=”image desc” />
look that any image will have the thumbnail and the full version. So for example, the image number 10, will be named 10.jpg for the full version, and tb_10.jpg for the thumbnail. You can see all uploaded images, as above mentioned, in the images folder inside the w3images plugin folder.
In other words, you can display these images where you like using the <img> tag. - please refer to these two comments to very interesting way to add images on pages and posts:
add images to pages and posts on wordpress with w3images #1
add images to pages and posts on wordpress with w3images #2
RANDOM IMAGES FUNCTION DISPLAY HOW TO USE:
1) How to use the random images display feature inside templates pages (like index.php, sidebar.php, single etc.):
you can add needed number of different instances, and display images on your wordpress pages, by using php code like this, inside your worpress template page:
<?php w3images_random_thumbs(3, 10, 2); ?>
this instruction can be modified to get different results. Numbers in the code above can be translated in this:
3: We like to get images from the section with ID 3 (look on the footer of the w3images ‘Setting’ admin page to see related values for created sections). If you set to 0 (zero) this value, than images are token from all available sections.
10: 10 images are token from that section.
2: These 10 images are arranged on 2 rows (so, 2 row of 5 images if 10 are token like in this example).
To use the w3images_random_thumbs() function directly inside a single post or inside a single page instead than only on theme templates files,
<?php w3images_random_thumbs(4, 20, 2); ?>
you can install a plugin like Exec-PHP plugin for WordPress or similars that allow to parse php code directly on posts or pages. Or as above mentioned, use the <img> tag for a simple and basic image inclusion.
Download w3images – Gallery Images for WordPress here at axew3.com or at the wordpress plugin directory – w3images
w3images – Shadowbox slideshow mode
This is the Shadowbox Javascript code that need to be added in the header section between <head> … … … </head> tags of your template file (header.php file location: wp-content/themes/theme_name/header.php) to correctly use the w3images plugin in Shadowbox slideshow mode:
<link rel="stylesheet" href="<?php echo get_bloginfo('url'); ?>/wp-content/plugins/w3images/includes/ajax/shadowbox.css" type="text/css" media="screen" /><script type="text/javascript" src="<?php echo get_bloginfo('url'); ?>/wp-content/plugins/w3images/includes/ajax/jquery.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('url'); ?>/wp-content/plugins/w3images/includes/ajax/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: false
});
</script>
It is possible to add options and customize Shadowbox effects and his general look. To do this it is necessary to modify the above default declaration:
<script type="text/javascript">Shadowbox.init({
handleOversize: "drag",
modal: false
});
</script>
Below in the simple example, the Shadowbox.init({ declaration has been improved by adding the continuous option and setting it to true.
Shadowbox galleries will not let a user go before the first image or after the last by default. Enabling the continuous option, will let the user go directly to the first image in a gallery from the last one by selecting “Next”. Default to false.
<script type="text/javascript">Shadowbox.init({
handleOversize: "drag",
continuous: true,
modal: false
});
</script>
Take a look to the Shadowbox options page to know all available options you can apply.