Resize Image

[GoogleCodeExporter]

I notice we can resize the thumbnails with normal html width and height 
attributes.  However, when I have an image that is somewhat bigger than 
the gallery, it gets outta wack.  It would be nice to have the option of 
resizing the main image, instead of having to resize the original image to 
match the gallery.

Original issue reported on code.google.com by Livit...@gmail.com on 5 Oct 2009 at 12:19

[GoogleCodeExporter]

You could modify the css in the “galleriffic.css”

div.slideshow img {
border: none;
display: block;
width: 550px; // You can fix here the width
height: auto;
}

Cheers!

Original comment by ceroo...@gmail.com on 27 Apr 2010 at 3:10

[GoogleCodeExporter]

I do not believe this will work if the images vary in width and height. I have 
some photos that are horizontal, and some vertical in display. If I set it too 
wide, it pushes the div with the title and comments down below the image. 
(example 5). It would be good if the jquery script could make the determination 
on WIDE versus TALL photos and handle in conjunction with the css.

Original comment by victoria...@pmactree.com on 14 Jul 2010 at 6:29

[GoogleCodeExporter]

Hi all, 

I'm using galleriffic with a flickr feed and everything works gr8.

To prevent the bigger images from messing up the layout, I defined a max-width 
and overflow:hidden; properties for that div in my css.

Right now I'm trying to make a quick fix to scale down the bigger images, I've 
found a plugin by Adeel Ejaz that does that exactly 
u can find it here
http://github.com/adeelejaz/jquery-image-resize/blob/master/README

I'm just trying to figure out how to call Adeel's function inside the 
galleriffic plugin or sort of write it as a new function inside galleriffic.

I'm very new at jquery hope u guys can give me some pointers

Original comment by ivanovit...@gmail.com on 1 Oct 2010 at 6:59

[GoogleCodeExporter]

Hi all,

The best option is to redefine the function "buildImage" adding one line at the 
end. Copy this function to the init Galleriffic:

var gallery = $('#thumbs').galleriffic({
delay:                     2500,
numThumbs:                 15,
.........
buildImage: function(imageData, isSync) {
                //REDEFINED BUILD IMAGE
                var gallery = this;
                var nextIndex = this.getNextIndex(imageData.index);

                // Construct new hidden span for the image
                var newSlide = this.$imageContainer
                    .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'"> </a></span>')
                    .find('span.current').css('opacity', '0');

                newSlide.find('a')
                    .append(imageData.image)
                    .click(function(e) {
                        gallery.clickHandler(e, this);
                    });

                var newCaption = 0;
                if (this.$captionContainer) {
                    // Construct new hidden caption for the image
                    newCaption = this.$captionContainer
                        .append('<span class="image-caption current"></span>')
                        .find('span.current').css('opacity', '0')
                        .append(imageData.caption);
                }

                // Hide the loading conatiner
                if (this.$loadingContainer) {
                    this.$loadingContainer.hide();
                }

                // Transition in the new image
                if (this.onTransitionIn) {
                    this.onTransitionIn(newSlide, newCaption, isSync);
                } else {
                    newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
                    if (newCaption)
                        newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
                }

                if (this.isSlideshowRunning) {
                    if (this.slideshowTimeout)
                        clearTimeout(this.slideshowTimeout);

                    this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
                }

                               //THE CODE TO RESIZE
                $('#slideshow img').addClass('slideshow_image')

                return this;
            }
.....
 });

Then you can add a class in your CSS named .slideshow_image with the width of 
the image.

To better resize you should get the attribute of the slideshow and put the 
width in the image ($('#slideshow').width()).

Original comment by jas...@gmail.com on 9 Dec 2010 at 2:04

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

It would be great if it could work like:

   if ( $('#slideshow img').attr("width") > $('#slideshow').width() ){
      $('#slideshow img').addClass('slideshow_image');
   }

It kinda does, its only on the double click that you will get the expected 
behavior. 

Original comment by danny...@yahoo.com on 8 Jul 2011 at 4:48

[GoogleCodeExporter]

At the end of buildImage: function(imageData, isSync), I tried this, it seems 
to work ok.

var max_size = 380;
var h = imageData.image.naturalHeight;
var w = imageData.image.naturalWidth

if (h > w) {
    var h = max_size;
    var w = Math.ceil(imageData.image.naturalWidth / imageData.image.naturalHeight * max_size);
 } else {
    var w = max_size;
    var h = Math.ceil(imageData.image.naturalHeight / imageData.image.naturalWidth * max_size);
 }
 $('#slideshow img').css({ height: h, width: w });

Original comment by paul.kay...@gmail.com on 2 Sep 2011 at 11:24

[GoogleCodeExporter]

@ P...@Kaytek.co.uk - Comment 7, I used very similar code in a very the same 
function before I found your post. I put mine starting at the first line of the 
function. It works well enough also. You get just a flash of the oversize image 
before it resizes and only using the <prev  next> pager.

It occurred to me immediately on trying galleriffic that auto resizing the 
images was much need.

Original comment by rsk...@gmail.com on 26 Dec 2011 at 3:05

[GoogleCodeExporter]

To have the thumbs automatically generated from the full size images I did this:
1. In the html body use matching url's for each thumb-fullSizeImage pair, 
matching
   pairs within each <li></li> set that is.
2. Use the following javascript code. I am adding the lines right at the start 
of the
   .ready function as you can see..

jQuery(document).ready(function($) {
// Size all thumbs as they are the full size images. Must do this right off or 
the gallery starts off as a mess!
var tmbs = $('ul.thumbs li img'), len=tmbs.length; max_size=75;
for (i=0; i<len; i++) {
tmbs[i].width = max_size; tmbs[i].height = max_size;
}

(function (max_size) { setTimeout(function() { reAsp(max_size); }, 2000); 
})(max_size); // Run on a delay to wait for imgs to load else no naturalW,H 
properties!

function reAsp(max_size){ // Restore the Aspect ratios of the thumbs.
  for (i=0; i<len; i++) {
    var natW = tmbs[i].naturalWidth, natH = tmbs[i].naturalHeight, aspR=(natW/natH); T=tmbs[i];
      if (aspR>=1){ // if wider or square reduce width then restore aspect ratio
        T.width=max_size; T.height=max_size/aspR;
      }
      else { // if taller than wide reduce height then restore aspect ratio
        T.height=max_size; T.width=max_size*aspR;    
      }
  }
}
// the original code after this line ..
});

Original comment by rsk...@gmail.com on 26 Dec 2011 at 10:52

[GoogleCodeExporter]

Like #7,if you want the full image height, at the end of 'buildImage: 
function(imageData, isSync)', add this:

                var img = new Image();
                img.src = this.currentImage.slideUrl;
                img.onload = function (){
                    var height = img.height;
                    $('#slideshow').css("height", height);
                }

It really works!

Original comment by wuyut...@gmail.com on 3 May 2013 at 4:48

[GoogleCodeExporter]

thank you very much for this little hack...it saved my face :)

Original comment by manikank...@gmail.com on 6 Jul 2013 at 6:16