I am trying to get the images to "scale to fit" the galleria wrapper

I got some variable codes to work in the jquery.gallera.js file, but they work by determining the height width ratio and setting one of two sizes to the image..for landscape and portrait. I would rather have the image scale to fit the .galleria.wrapper dimensions I set in the .css file. I found a jquery plugin that will scale images to fit a defined container here

http://code.google.com/p/jquery-imagefit-plugin/

so I download that file and drop it in the inc folder with the other script files....

im not sure how exactly to impliment this plugin into the jquery.galleria.js so that the _img will resize to fit the galleria wrapper...I have many images of many different sizes and ratios im trying to load, keeping the aspect ratios..is this a way to do it?

Thanks

David

Comments

rankinstudio’s picture

rankinstudio commented

Does anyone know the id for the main image container? Is it the galleria_wrapper?

cheese-steak’s picture

cheese-steak commented

Subscribing

roger6106’s picture

roger6106 commented

I think this would be a great feature to add to the module.

rankinstudio’s picture

rankinstudio commented

Alright, I got some dynamic resizing going...here it is. you post this code in the galleria.js file right in the onimage function..

if ($(image).width() > $(image).height()){ //landscape
var ratio = ($(image).height()) / ($(image).width());
image.css('width','640px');
image.css('height','width * ratio');

}
else { // portrait

var ratio = ($(image).height()) / ($(image).width());
image.css('width','height * ratio');
image.css('height','450px');
}

You also need to set explicit height/width to your .galleria_container in the galleria.css file..here is mine.

.galleria_container {
height:450px;
width:640px;
position:relative;
top:88px;
background:url(/modules/galleria/galback.jpg);
}

you need to add that ,it does not exist in the the downloaded css. Then to center the portrait images inside of the galleria wrapper, you must add this.

.galleria_container img {
display:block;
margin-left: auto;
margin-right: auto;

}

Ive been working on this for way to long, finally got it workin...ENJOY!

David
my gallerias
http://www.rankinstudio.com/photointro

Mark Theunissen’s picture

Mark Theunissen commented
Status: Active » Closed (duplicate)

Argh... I wouldn't do that... rather override some variables from the preprocess function and use imagecache! See the following issue:

http://drupal.org/node/350561

rankinstudio’s picture

rankinstudio commented

Yea, its an ugly hack, but I cant install ImageAPI have php 4 not 5:(

SkullSplitter’s picture

SkullSplitter commented 
// $Id: galleria.js,v 1.1.2.3 2009/01/16 17:02:58 marktheunissen Exp $

var options = {
  onImage : function(image, caption, thumb) {
    // let's add some image effects for demonstration purposes
    // fade in the image & caption
    if(!($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
      image.css('display','none').fadeIn(500);
    }
    caption.css('display','none').fadeIn(500);

    // fetch the thumbnail container
    var _li = thumb.parents('li');

    // fade out inactive thumbnail
    _li.siblings().children('img.selected').fadeTo(500, Drupal.settings.thumb_opacity);

    // fade in active thumbnail
    thumb.fadeTo('fast',1).addClass('selected');

    // add a title for the clickable image
    image.attr('title','Next image >>');

    $('.galleria-nav').show();








if ($(image).width() > $(image).height()){ //landscape
var ratio = ($(image).height()) / ($(image).width());
image.css('width','640px');
image.css('height','width * ratio');

}
else { // portrait

var ratio = ($(image).height()) / ($(image).width());
image.css('width','height * ratio');
image.css('height','450px');
}  








},

  onThumb : function(thumb) {
    // thumbnail effects goes here
    // fetch the thumbnail container
    var _li = thumb.parents('li');

    // if thumbnail is active, fade all the way.
    var _fadeTo = _li.is('.active') ? 1 : Drupal.settings.thumb_opacity;

    // fade in the thumbnail when finished loading
    thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

    // hover effects
    thumb.hover(
      function() { thumb.fadeTo('fast', 1); },
      function() { _li.not('.active').children('img').fadeTo('fast', Drupal.settings.thumb_opacity); } // don't fade out if the parent is active
    )
  },

  history : false
};

// run Galleria in Drupal.behaviors
Drupal.behaviors.initGalleria = function(context) {
  // init on plain gallerias
  $('ul.gallery').galleria(options);

  // when the ajax call is complete, load galleria - used when viewing in a lightbox!
  $('body').bind("ajaxComplete", function() {
    $('ul.gallery').galleria(options);
  });
};

It try it out too, Not working :( whats wrong ?

Thx in advance

Skull