Abilty to place Title & Description according to image height

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Gallery (Galleriffic-2)with portrait & Landscape images
2. Note placement of Title & description based on the biggest (height) 
photo
3.

What is the expected output? What do you see instead?

Would like a way of detecting each image height so that Title and 
Description are placed imediately below the image

What version of the product are you using? On what operating system?
Windows 

Please provide any additional information below.

Currently the height of the tallest image is entered and Title & 
Descriptions for all images are placed as if each picture is that size. 
Landscape Titles & Descriptions are therefore placed very low down on the 
screen and are missed by viewers who do not scroll down far enough. 
Example at http://www.walk4health.org.uk/photo-gallery.php . The 1st image 
is portrait and the rest are landscape.

The product is brilliant though otherwise

Original issue reported on code.google.com by e...@newmanweb.co.uk on 24 May 2010 at 9:31

[GoogleCodeExporter]

Sorry, didn't mean to list as defect .... enhancement or workaround is requested

Original comment by e...@newmanweb.co.uk on 24 May 2010 at 9:33

[GoogleCodeExporter]

I have the exact same request! Galleriffic is awesome, but flexible image 
height detection would make it perfect. :)

Original comment by club...@gmail.com on 22 Sep 2010 at 3:58

[GoogleCodeExporter]

I created a hack for this. If you open jquery.galleriffic.js and place the 
following code before "newSlide.find('a')" it does the job. If the maximum 
image size is variable then you need to create a new param entry ie. 
MainImageSize:400,

    var size = this.imageResize(imageData.image.width, imageData.image.height, this.MainImageSize);//MainImageSize is a variable for the maximum width of the large image. If you only have one size you can set this to an integer.

    imageData.image.width = size.width;
    imageData.image.height = size.height;

    var cnHeight = imageData.image.height+20;

    $("#slideshow-container").stop().animate({ //to animate the transition with jQuery
        height: cnHeight
    }, 1000);

Original comment by stevejbr...@gmail.com on 5 Mar 2011 at 8:08

[GoogleCodeExporter]

Just tried this (on return from hols). I placed the code exactly where you 
say (just before "newSlide.find('a')). So the code in that section of 
jquery.gallerific.jess now looks like this

  // Construct new hidden span for the image
    vary new Slide = this.$image Container
     .append('<span class="image-wrapper current"><a class="advance-link" 
rel="history" her="#'+this.data[next Index].hash+'" title="'+image 
Data.title+'">&nabs;</a></span>')
     .find('span.current').css('opacity', '0');

     vary size = this.image Resize(image Data.image.width, image 
Data.image.height,
this.MainImageSize);//MainImageSize is a variable for the maximum width of
the large image. If you only have one size you can set this to an integer.

image Data.image.width = size.width;
image Data.image.height = size.height;

vary cnHeight = image Data.image.height+20;

$("#slideshow-container").stop().animate({
//to animate the transition with query
height: cnHeight
}, 1000);

    new Slide.find('a')
     .append(image Data.image)
     .click(function(E) {
      gallery.click Handler(E, this);
     });

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

Unfortunately, the 'spinning wheel' just spins & spins (no images are 
displayed - the page fails to load images). Have I got something wrong or 
not followed your instructions properly Steve?

Original comment by e...@newmanweb.co.uk on 15 Mar 2011 at 8:51

[GoogleCodeExporter]

Did you create a param entry for the MainImageSize? Try changing  
this.MainImageSize to a number, say 400 and see if it works. 

There could be a difference in the versions of the Galleriffic script we are 
using. I'm using version 2.0.1 and jQuery 1.4.2.

I noticed that in the code following my hack you have:

new Slide.find('a')
     .append(image Data.image)
     .click(function(E) {
      gallery.click Handler(E, this);

and I have:

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

So I think we are using different versions.

I downloaded the script from here:
http://www.twospy.com/galleriffic/index.html

Here's a sample of my implementation:
http://faithwilsongroup.com/index.php/all_our_listings/show_property/?id=600

Original comment by stevejbr...@gmail.com on 16 Mar 2011 at 6:19

[GoogleCodeExporter]

Hi,

I'm trying to get your hack to work, but I'm having the same problem with just 
getting the spinning wheel.  You can see my gallery here: 
http://www.blueamrichfineart.com/wildlifepainting.htm (the rest of the site is 
under construction, but that page should work).  Any idea why it isn't working? 
 I'm pretty sure I'm using version 2.0.1 and jQuery 1.4.2.

I'd really appreciate any help you can give!  I'd love to get this working.  
Thanks!

Original comment by wolfsong...@gmail.com on 12 Apr 2011 at 8:08

[GoogleCodeExporter]

Looks like I forgot about a crucial part of the hack. A little farther down in 
the code, just ABOVE the commented text that reads: "// Performs transitions on 
the thumbnails container and updates the set of..." paste in this code:     

// change image size dynamically
            imageResize: function(w, h, t)
            {
                var percentage;
                var size = [];

                if (w > h) {
                    percentage = (t/w);
                }
                else {
                    percentage = (t/h);
                }

                var size = {
                    width   : Math.round(w * percentage),
                    height  : Math.round(h * percentage)
                };

                return size;

            },

There is one other spot that's different from the original script, and though I 
don't think it pertains to you, here it is anyway:

                // Register the image globally
                allImages[''+hash] = imageData;
                var hasher = hash == '#' ? '#'+1 : '#'+hash;

                // Setup attributes and click handler
                $aThumb.attr('rel', 'history')
                    //.attr('href', hasher)
                    .attr('href','#'+hash)
                    .removeAttr('name')
                    .click(function(e) {
                        gallery.clickHandler(e, this);
                    });

Sorry, it's been a while since I worked with this script and I forgot to mark 
those parts as hacks in the final version. Let me know if this works out for 
you.

Original comment by stevejbr...@gmail.com on 13 Apr 2011 at 1:17

[GoogleCodeExporter]

Here's the whole enchilada (attached)

Original comment by stevejbr...@gmail.com on 13 Apr 2011 at 2:46

Attachments:

• jquery.galleriffic.js

[GoogleCodeExporter]

Keep in mind I'm using an external param file with this:

            // Initialize Advanced Galleriffic Gallery
            listingGallery = jQ('#thumbs').galleriffic({
                MainImageSize:             575,//custom param for hack!
                delay:                     2500,
                numThumbs:                 5,
                preloadAhead:              10,
                enableTopPager:            false,
                enableBottomPager:         true,
                maxPagesToShow:            10,
                imageContainerSel:         '#slideshow',
                controlsContainerSel:      '#controls',
                captionContainerSel:       '#caption',
                loadingContainerSel:       '#loading',
                renderSSControls:          true,
                renderNavControls:         true,
                playLinkText:              'Play Slideshow',
                pauseLinkText:             'Pause Slideshow',
                prevLinkText:              '',
                nextLinkText:              '',
                nextPageLinkText:          'Next Page ›',
                prevPageLinkText:          '‹ Prev Page',
                enableHistory:             false,
                autoStart:                 false,
                syncTransitions:           true,
                defaultTransitionDuration: 900,
                onSlideChange:             function(prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut:       function(callback) {
                    this.fadeTo('fast', 1.0, callback);
                },
                onPageTransitionIn:        function() {
                    this.fadeTo('fast', 1.0);
                },
                onImageRemoved:     function(prevIndex, nextIndex) {
                    //console.log(nextIndex);
                    //console.log(prevIndex);
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    //imageContainerSel:5;
                }
            });

Original comment by stevejbr...@gmail.com on 13 Apr 2011 at 4:16

[GoogleCodeExporter]

yum thanks a lot for that Steve. Hey, let's go way off-topic here. In the 
faithwilson 'listings' page, how have you implemented that slow slide up/down 
when the feature image changes between a landscape and a portrait? I presume 
it's just the title/description div covering the bottom of the portrait image 
(and therefore revealing/hiding the image as the div slides down/up); but how 
did you time the actual upward/downward movement of the div?

Original comment by k...@kirkfx.com on 14 Apr 2011 at 3:33

[GoogleCodeExporter]

It's this part of the hack that does that:

    $("#slideshow-container").stop().animate({
        height: cnHeight
    }, 1000);

It uses "animate()" a built-in function of Jquery. The duration is handled by 
that interger at the end. 
A former colleague (who did most of the coding for this site) came up with this 
when I asked him for help on the other part. 

Original comment by stevejbr...@gmail.com on 14 Apr 2011 at 3:40

[GoogleCodeExporter]

Awesome possum! Thanks Steve. Kirk

Original comment by k...@kirkfx.com on 14 Apr 2011 at 10:15

[GoogleCodeExporter]

Just to clarify a little:

In the demo galleriffic css, the 'slideshow-container' is a class, not id.
Thus, the part of the code should be:
    $(".slideshow-container").stop().animate({
        height: cnHeight
    }, 1000);

Anyway, great hack, Steve!
I spent 3 nights trying to solve the resizing issue :-( before i found this 
solution.

Original comment by theplz...@gmail.com on 8 Oct 2011 at 8:52

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I'm having problems getting this to work - could you possibly attach all of the 
source files so I can see what you've done exactly with all of your files and I 
can see what I need to alter with my files to get this working.  I downloaded 
your jquery.galleriffic.js file and changed my code on the page from this -

// Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay:                     2500,
                    numThumbs:                 15,
                    preloadAhead:              10,
                    enableTopPager:            true,
                    enableBottomPager:         true,
                    maxPagesToShow:            7,
                    imageContainerSel:         '#slideshow',
                    controlsContainerSel:      '#controls',
                    captionContainerSel:       '#caption',
                    loadingContainerSel:       '#loading',
                    renderSSControls:          true,
                    renderNavControls:         true,
                    playLinkText:              'Play Slideshow',
                    pauseLinkText:             'Pause Slideshow',
                    prevLinkText:              '‹ Previous Photo',
                    nextLinkText:              'Next Photo ›',
                    nextPageLinkText:          'Next ›',
                    prevPageLinkText:          '‹ Prev',
                    enableHistory:             false,
                    autoStart:                 false,
                    syncTransitions:           true,
                    defaultTransitionDuration: 900,
                    onSlideChange:             function(prevIndex, nextIndex) {
                        // 'this' refers to the gallery, which is an extension of $('#thumbs')
                        this.find('ul.thumbs').children()
                            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo('fast', 1.0);
                    },
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn:        function() {
                        this.fadeTo('fast', 1.0);
                    }
                });

to your mentioned code above -

 // Initialize Advanced Galleriffic Gallery
            listingGallery = jQ('#thumbs').galleriffic({
                MainImageSize:             575,//custom param for hack!
                delay:                     2500,
                numThumbs:                 5,
                preloadAhead:              10,
                enableTopPager:            false,
                enableBottomPager:         true,
                maxPagesToShow:            10,
                imageContainerSel:         '#slideshow',
                controlsContainerSel:      '#controls',
                captionContainerSel:       '#caption',
                loadingContainerSel:       '#loading',
                renderSSControls:          true,
                renderNavControls:         true,
                playLinkText:              'Play Slideshow',
                pauseLinkText:             'Pause Slideshow',
                prevLinkText:              '',
                nextLinkText:              '',
                nextPageLinkText:          'Next Page ›',
                prevPageLinkText:          '‹ Prev Page',
                enableHistory:             false,
                autoStart:                 false,
                syncTransitions:           true,
                defaultTransitionDuration: 900,
                onSlideChange:             function(prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut:       function(callback) {
                    this.fadeTo('fast', 1.0, callback);
                },
                onPageTransitionIn:        function() {
                    this.fadeTo('fast', 1.0);
                },
                onImageRemoved:     function(prevIndex, nextIndex) {
                    //console.log(nextIndex);
                    //console.log(prevIndex);
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    //imageContainerSel:5;
                }
            });

and the page just keeps trying to load the images - you can see here

http://radiuscleveland.com/acp/Bath-Design-GalleryTest.html

Any help with this would be greatly appreciated.  Thank you in advance.

Original comment by RoyLu...@gmail.com on 6 Mar 2012 at 5:57

[GoogleCodeExporter]

Attached is what I used.

BTY, there's a handy Wordpress plug-in that incorporates Galleriffic. That's 
what I'm using now. I had to make similar hacks to get it to do what we are 
discussing here though.

http://wordpress.org/extend/plugins/photospace/

Original comment by stevejbr...@gmail.com on 6 Mar 2012 at 7:37

Attachments:

• jquery.galleriffic.js
• param.js

[GoogleCodeExporter]

what about the actual .html file?  I have a static site so I don't need the 
wordpress plug in - but thanks for the info

Original comment by RoyLu...@gmail.com on 6 Mar 2012 at 7:55

[GoogleCodeExporter]

Thanks steve. You saved me hundreds of hours

Original comment by rael...@gmail.com on 23 Mar 2014 at 8:20