Posted by michaelroach on April 22, 2011 at 12:25am
10 followers
| Project: | Gallery formatter |
| Version: | 6.x-1.0-rc4 |
| Component: | Javascript |
| Category: | feature request |
| Priority: | minor |
| Assigned: | Unassigned |
| Status: | needs work |
| Issue tags: | Center Align images |
Issue Summary
I'm trying to use Gallery Formatter to display some of my graphic design work, and the problem is that I have a variety of different ratio images. I modified the image style to resize them proportionally (without cropping) and now I have been fighting an issue for about 10 hours. I want to CENTER the slides both horizontally and vertically inside the gallery, I feel this would be a GREAT feature. Any ideas how this could be achieved? I've tried every method I could think of so far.
| Attachment | Size |
|---|---|
| galleryformatter.jpg | 21.42 KB |
Comments
#1
The dev version allows for portrait images, but they should all be same width afik... you could try using CSS and see if you manage to center them also.
If you want portrait images you can switch to the dev version or wait for the next release.
#2
Using Javascript, I managed to have each image center-aligned with varying widths (both portrait and landscape). However, I'd love to do this via CSS if possible. Maybe this would help someone (though my JS skills leave much to desired). Feel free to post if you need help making this load on pages where galleries are included:
// Set float CSS property to correct width to center imagesvar gallery_width = $('div.galleryformatter > .gallery-slides').width();
$('div.galleryformatter > .gallery-slides > .gallery-frame > ul > li.gallery-slide').each(function() {
var slideLi = this;
var img_src = $(this).children('img').attr('src');
var img = new Image();
img.src = img_src;
// Only after image loads, we can know its dimensions.
img.onload = function() {
// Is there any margin (e.g. is image width smaller than gallery width?)?
var marginTotal = gallery_width - this.width;
if (marginTotal > 0) {
var marginHalf = marginTotal/2;
$(slideLi).css('left', marginHalf);
}
}
});
#3
I use a method where I create a transparent (png-8bit) image the dimensions I require, then create a new style, apply resize then add the png as an underlay (using imagecache module) with center center offset. this then allows all images to be same dimenisons and centered in wherever you show them. hope that works for you.
#4
I have posted a patch - please refer - http://drupal.org/node/1360202#comment-5420518
This will help you center align images within the slide.
#5
@Manuel Garcia Does the dev version for d6 support portrait images?
#6
@krisahil 1. Will this work on D6 version? 2. Where will this code suppose to go? Added it to galleryformatter.js and to the appropriate page template but its still not working.
@mukesh.agarwal17 your patch does not work with 6.x-1.0-rc4.
#7
@evilgenius : This would be a patch for version 6.x-1.0-rc4. Just a simple workaround, not considering margins etc, but mostly gets the job done.
#8
I posted a fix for the patch mentioned in comment #4.
http://drupal.org/node/1360202#comment-5680464