Center the (modified) film strip

[Cornetto]

Mr. Andre -
in reference to the filmstrip solution you readily solved in
http://forum.coppermine-gallery.net/index.php/topic,77150.0.html

I've tried getting the filmstrip (currently set to display 5 images in the configuration) to display centered underneath the intermediate image by forcing the prev_strip and next_strip "boxes" to certain percentages.  The previous setting for both was 50%, and I've tried out different percentages, like 45% for the prev_strip and 55% for the next_strip, but it doesn't quite seem to work consistently.

Code Select Expand

/******************************************************************************
** Section <<<$template_film_strip>>> - START
******************************************************************************/
// HTML template for filmstrip display
$template_film_strip = <<<EOT

        <tr>
          <td valign="top" class="filmstrip_background" style="background-image: url({TILE1});"><img src="{TILE1}" alt="" border="0" /></td>
        </tr>
        <tr>
          <td valign="bottom" class="thumbnails filmstrip_background" align="center" style="{THUMB_TD_STYLE}">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                   <td width="55%" class="prev_strip"></td>
                     <td valign="bottom"  style="{THUMB_TD_STYLE}">
                       <div id="film" style="{SET_WIDTH}"><table class="tape" ><tr>{THUMB_STRIP}</tr></table></div>
                     </td>
                   <td width="45%" align="right" class="next_strip"></td>
                </tr>
            </table>
          </td>
        </tr>
        <tr>
         <td valign="top" class="filmstrip_background" style="background-image: url({TILE2});"><img src="{TILE2}" alt="" border="0" /></td>
        </tr>
<!-- BEGIN thumb_cell -->
                <td class="thumb" >
                  <a href="{LINK_TGT}" class="thumbLink" >{THUMB}</a>
                </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" align="center" >&nbsp;</td>
<!-- END empty_cell -->

EOT;
/******************************************************************************
** Section <<<$template_film_strip>>> - END
******************************************************************************/

I realize that my attempt to center the filmstrip is crude at best, and it doesn't work because of the changing widths and the way that the filmstrip visually adds and takes away thumbnails of differing widths from the left and right side, depending on which arrow is being clicked (the left or right arrow)...but can you suggest a way to get the filmstrip to center itself below the centered intermediate image and then remain centered pretty much regardless of what's being displayed at any given moment?

[Αndré]

I assume you don't want to center the film strip, but the images that resides in the film strip, right? If so, please post an example link so I can have a look how exactly it currently works.

[Cornetto]

Correct, not centering the filmstrip itself, but rather the string of 5 images appearing in the filmstrip.
Here is a direct link
http://ianscottphoto.com/mercury/displayimage.php?album=49&pid=1488#top_display_media

[Αndré]

It seems to work as expected if I remove the fixed width of the div container with Firebug:

Code Select Expand

<div id="film" style="width:920px; position:relative;">

To remove it from the HTML output, copy the function theme_display_film_strip from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist. Then, find

Code Select Expand

$set_width_to_film = "width:".($max_block_items*($thumb_width+4))."px; position:relative;";
and replace with

Code Select Expand

$set_width_to_film = "";

[Cornetto]

The code modification has been implemented, and the result is that the row of images appears centered in the filmstrip...thank you Mr. Andre.

There is an odd animation/rendering effect occurring on the left side of the filmstrip as the left box (containing the left.png arrow)

Code Select Expand

<td width="50%" class="prev_strip"></td> (from the <$template_film_strip> ) is rendered in various browsers...it appears as if the prev_strip box is being rendered in a sweep from left to right every time the left or right arrows are clicked, but this could be browser related...I'm not sure, and now that the images are centered in the filmstrip, if this oddity is an odd side effect of having the images centered in the filmstrip, we may just have to accept it. 
Because this might be a separate issue, I want to be able to call the centering of the images of the filmstrip issue "resolved" and close out the original post, but there may be additional information (or not) about this new? filmstrip issue based on what the Coppermine folks say...


We continue to experience unpredictable rendering of the leftmost and rightmost thumbnails (half / partial thumbnails) in the filmstrip as the filmstrip is "scrolled" left and right, but at the moment, this is considered acceptable and somewhat pleasing, but I think it might be even more pleasing if the configured number of thumbnails displayed as whole thumbnails.

Please understand that we selected Coppermine after reviewing more than thirty other gallery packages, we deeply appreciate the sheer number of hours and work and dedication that have gone into this feature-rich and very capable gallery.
We are grateful that there exists not just support for Coppermine, but personalized support for what are probably minor and intricate issues.  Although it has been an adventurous learning curve to configure and customize our Coppermine installation for our particular needs, we very much look forward to the ultimate satisfaction on launch day of having chosen Coppermine as our gallery solution.

I'll wait for a response to this post to see if there is more information before marking the images centered in filmstrip topic as  "Topic Solv-ed"

[Αndré]

Unfortunately I haven't found a straightforward solution for that issue.

[allvip]

The odd animation/rendering effect is occurring because the thumbs have diffrent widths.
The filmstrip loads 7 thumbs with a total width of 968px, then other 7 thumbs  with a total width of 967px, then other 7 with 1085px (see attachments thumb1, thumb3).
The filmstrip changes the width when is loading the next set of thumbs and this way the animation occurs.
Is not exactly an animation. The filmstrip changes the width every time to show the the thumbs and even the page changes the width to show filmstrip (see attachments scroll_bar and no scroll bar). The browser displays a scroll bar at the bottom because the page is bigger then my monitor resolution.

The thumbnails images have very diffrent widths and sometimes even a very big width with fixed height thumbnails.

There is one solution. I don't know if you will like it.

1) Go to theme.php function $template_film_strip and move:

Code Select Expand


<td width="50%" align="right" class="next_strip"></td>


under:

Code Select Expand



<td width="50%" class="prev_strip"></td>


2) Go to style.css and add:

Code Select Expand


#filmstrip {
    max-width: 100%;
    overflow-x: scroll;
}


Demo: attachment film.jpg

[allvip]

Setting a smaller number like 4 or 5 for the filmstrip in config also helps a lot.