I need to create an image gallery for the new Logan Square Walks website. I surfed around and this page seemed like the easiest approach for what I wanted -- a simple non-nested gallery composed of images that used a neato javascript-powered viewer.
I followed all the steps:
- I installed the cck, contemplate, filefield, imageapi, imagecache, imagefield, thickbox, transliteration, and views modules.
$ for mod in cck contemplate filefield imageapi imagecache imagefield thickbox transliteration views; do
drupalCVSDeploy.sh -noconfirm install module $mod; done
- Enabled all the modules I installed.
- Set up a 'thumbnail' imagecache preset.
- Created a new content type "Image Gallery" with an additional file field taking an unlimited number of items.
- Edited the Display Fields for this new content type and set the images to not display on a teaser ("hidden") and to use Thickbox on full node.
- Created an node of this content type and uploaded a bunch of images.
- Set up the contemplate for the Image Gallery type and set the body to be this:
<p>Click on image thumbnails for larger versions.</p>
<div class="field field-type-filefield field-field-images">
<div class="field-items"><?php foreach((array)$node->field_images as $imageview) { ?>
<div class="image-gallery-item">
<?= $imageview['view'] ?><br />
<?= $imageview['data']['title'] ?>
</div>
<? } ?>
</div>
</div>
<div id="image-gallery-end"> </div>
- Added these styles to my css:
/* for image gallery items */
.image-gallery-item {
float: left;
margin-right: 5px;
}
#image-gallery-end {
clear: both;
}
- Added a 'fullsize' imagecache preset. Configured the thickbox module to link to this preset (at /admin/settings/thickbox).
See the results. Works great, was fast and easy to set up. Thanks to Adam at Primal Media!
Comments
minor enhancement
I noticed that using this technique the thickbox gallery popup was loading the original image into the shadowbox. If the original images were very large, this was causing long loading delays.
I saw that someone else had this issue and a change was put in. I modified the steps above to include the configuration of the thickbox module to link to a fullsize imagecache preset (step 9).
Another reasable way....
see: http://raincitystudios.com/blogs-and-pods/hubert/a-simple-ajax-image-gallery-system-drupal
Same thing tho - make a node and attach images to it.