Currenly height of gallery is always fixed and made according to height of first image with

  <div class="gallery-slides" style="width: <?php print $gallery_slide_width; ?>px; height: <?php print $gallery_slide_height; ?>px;">

is it possible that we set this to be dynamic, so depending on height of image container is scaled then the gallery would be somthing like here.

http://ngm.nationalgeographic.com/ngm/photo-contest/2010/entries/gallery...

what do you think?

CommentFileSizeAuthor
#6 galleryformatter-1002094.patch1.52 KBManuel Garcia
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Marko B’s picture

Marko B CreditAttribution: Marko B commented

I made it myself, wasnt too hard. Edited galleryformater.js file with few lines of code, around 44 line and works nicely, maybe you can add this to some options if somebody wants to have it this way. Finally some good gallery for CCK without having to use views for this shoule be simple task.

  $thumbslinks.click(function(e){
    $hash = $(this.hash);
    if(!$hash.is(':visible')){
      $thumbsLi.removeClass('active');
      $(this).parent().addClass('active');
      $slides.filter(':visible').fadeOut('slow');
      $hash.fadeIn('slow');
	  $('.gallery-slides').css("height",$hash.height());

Check out result here http://www.travelnut.me/cordoba

Manuel Garcia’s picture

Manuel Garcia CreditAttribution: Manuel Garcia commented
Version: 6.x-1.0-rc3 » 6.x-1.x-dev
Status: Active » Needs work

Feature requests are made agaisnt the dev version of the module ;)

The propposed solution has the following problems that I can see;

  1. I don't think it's a nice UX when the thubnails jump up and down depending on the height of the slide it's showing.
  2. The line you add doesn't work perfectly, and could be optimized: You should use the height of the image itself, and there is no need to reselect the gallery-slides div, it's already cached in $slideContainer. The following line does a better job:
    $slideContainer.css("height",$hash.find('img').height());
  3. It doesn't work if deeplinking to a specific image. This can be fixed by placing the following line
    $slideContainer.css("height", $slideToShow.find('img').height());
    after activating the thumbnail, within the if ($locationHash) { statement.
  4. I don't like the idea of doing this through JS, but at the moment i don't see any other way.

At the moment I'm very reluctant to fill this request, mainly because of UX issues. I think the thumbnails should stay put, and not make the user have to hunt for them every time the height changes.

I set the status to needs work in case someone knows how to tackle the UX problem. The rest of the problems could be fixed easily.

Manuel Garcia’s picture

Manuel Garcia CreditAttribution: Manuel Garcia commented

Another option would be to set the height to the heighest of all images, but well, it's heavy on the CPU on load I bet, and stil looks ugly:

    var maxHeight = Math.max.apply(null, $('img', $slideContainer).map(function(){
                                               return $(this).height();
                                           }).get()
                            );
    $slideContainer.height(maxHeight);
Marko B’s picture

Marko B CreditAttribution: Marko B commented

One solution for UX could be to to put tumbs on the top of the gallery. Also if you are talking about UX, then you also have to think about what user will see, either very small portrait oriented image, or just a part of it. This is also an issue, if not even bigger than jumping tumbs :-)

Manuel Garcia’s picture

Manuel Garcia CreditAttribution: Manuel Garcia commented
Version: 6.x-1.x-dev » 7.x-1.x-dev

Let's try tackling this once and for all, starting in the 7.x-1-x branch

Manuel Garcia’s picture

Manuel Garcia CreditAttribution: Manuel Garcia commented
Title: Fixed height - make dynamic » Allow for portrait images in slides by making their height dynamic
Status: Needs work » Needs review
FileSize
galleryformatter-1002094.patch1.52 KB

Here is a patch for 7.x branch. It implements what we discused in #1 and #2

Please test it out, and let's see if we can find a decent UI experience while allowing portrait slides.

Perhaps we should move the thumbnails slider to the top - of course you can already do that in your own tpl file quite easily. Only the default greenarrows style would need some tweaking....

Manuel Garcia’s picture

Manuel Garcia CreditAttribution: Manuel Garcia commented
Status: Needs review » Fixed

Committed to 7.x-1.x

kazah’s picture

kazah CreditAttribution: kazah commented
Version: 7.x-1.x-dev » 6.x-1.x-dev

How can I resize my fotos not only by height, but also by width the same time? Dynamic resize by width and height?

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

donquixote’s picture

donquixote CreditAttribution: donquixote commented
Version: 6.x-1.x-dev » 7.x-1.x-dev
Status: Closed (fixed) » Needs work

Currently when loading the slideshow, the height of the first image is not determined.
The result is a container with no height at all.

donquixote’s picture

donquixote CreditAttribution: donquixote commented
Status: Fixed » Needs work

Here is the simple solution:

    function showFirstSlide(){
      // activate the first thumbnail
      $('a', $thumbsLi.filter('.slide-0:not("cloned")')).trigger('click');
    }
donquixote’s picture

donquixote CreditAttribution: donquixote commented
Status: Needs work » Fixed

Better off in a separate issue,
#1678762: Height of first slide not determined - collapse to zero

Status: Needs work » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.