Quantcast

Frame moving down then up when changing images

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Frame moving down then up when changing images

acekin
It is a minor nuisance, but I am very curious why the Shadowbox JS display first dips then rises to display the next image. You can see that behavior on the following page, although it happens on most recent pages:
http://www.keptlight.com/2013/12/soapmakers/

You will also notice that the height of the image will shrink after the first one. If you dismiss the overlay by clicking outside the image the subsequent image loads will use the smaller height. If the page is refreshed, the first image will load taller then shrink to the smaller height. All the while the frame will continue to dip and rise between images. I played with the settings, animations, speed, to no avail.

However, on an older post:
http://www.keptlight.com/2008/09/newport-creamery/

you will not see either the height shrinking or the strange dipping dance.

I will greatly appreciate if a solution could be found.

Thank you.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Frame moving down then up when changing images

Eric M
It naturally has something to do with the titles and the interaction of the module.

Notice on your first example you have titles and the box does your "dipping dance" to cover the counter.
On your second example you have no titles and the counter instead moves under the box.

If it's really a problem, turning fancy animations off should work.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Frame moving down then up when changing images

acekin
You may have a point about the title, I will investigate that and report. Changing animations had no effect on the dipping. It may be due to a CSS override I added to accommodate long titles and have them wrap to as many lines as needed. I will take a second look at that code. Thank you, this is like proof reading your own writing where you don't see the spelling mistakes. I never noticed the title being present and absent.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Frame moving down then up when changing images

acekin
It is indeed my added CSS causing it, I could not have traced it without a second pair of eyes. Here is the scoop.

I have some photographs with multiple lines of titles and as the current CSS is written these titles are truncated to a single line. I added the following which handles as many lines as the title may have:

#sb-title, #sb-title-inner {
     min-height: 100% !important;
}

I guess when there is a title, any title, Shadowbox is trying to calculate the space needed and doing the dipping dance. I now need to decide what is more important to me. In the mean time, if there is a better way of handling long title lines, which do not happen often, please let me know.

This post is the main reason for the change:
http://www.keptlight.com/2009/02/if-national-geographic-photos-were-judged/

Probably not worth having a dancing presentation ;-)

Thanks again.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Frame moving down then up when changing images

acekin
This post was updated on .
I have developed a better solution to expanding the title area without the "dipping dance". First, I have an external CSS file which I use to override or modify plugin CSS files and load it with every page. Into that file, I have added the following and the title area now expand as needed with no up and down movement. You can see the CSS in action at the following links.

Single line title example
http://www.keptlight.com/2013/12/conversations-with-a-wall/

Multiple line title example
http://www.keptlight.com/2009/02/if-national-geographic-photos-were-judged/

CSS snippet:
#sb-title-inner, #sb-counter {
        font-size: 13px !important;
}

#sb-title, #sb-title-inner {
    height: inherit !important;
    line-height: 18px !important;
}

#sb-title, #sb-info {
        overflow: inherit !important;
}
       
#sb-title-inner {
  position: absolute !important;
        bottom: 0 !important;
}

This approach pushes the title text upwards and for long text and/or small screens it may disappear from the top of the screen. The solution would be to add max-height: 75px; to the #sb-title, #sb-title-inner declaration if necessary. For most "reasonable length" title the above snippet should work.
Loading...