Filmstrip not "hiding" image when navigating

[biellebrunner]

Hi.
I was testing a new gallery theme, and I noticed that, when scrolling through the images on the film strip, it was not hiding away the image on the far left when scrolling right - and far right when scrolling left. The image is above the navigation arrow, which prevents me from scrolling back to the opposite side.
I have configured 5 images to display in the filmstrip, which is right when I first open the image, but it grows to 6 when I start scrolling.

I only have $template_film_strip on my theme.php, but I've tried removing it, but it didn't fix the issue. I've tested both on Chrome and Firefox, and both are showing this problem. You can see it here: http://stanakaticbrasil.com/galteste/displayimage.php?album=2&pid=11#top_display_media

Any ideas what might be wrong?
Thanks.

[allvip]

Try removing all the .js files you added.
They are proabibly all in template.html.

Maybe is a conflict with displayimages.js because I can see that displayimage.js and jquery-1.3.2.js  are loading on your page but displayimage.js doesn't adds class remove to the first thumbnail when you scroll the filmstrip.

Code Select Expand


<script src="themes/stanadark/css_browser_selector.js" type="text/javascript"></script>


Code Select Expand


<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-6656061-1']);
  _gaq.push(['_setDomainName', 'none']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);
         
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
             
</script>



Code Select Expand


<script src="http://www.ads.flaunt.nu/ad/728x90_light.js"></script>


Code Select Expand


<script style="float:right;" src="http://www.ads.flaunt.nu/ad/728x90_dark.js"></script>


Code Select Expand



<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=9422883;
var sc_invisible=1;
var sc_security="6f9a65fc";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="hits counter"
href="http://statcounter.com/free-hit-counter/"
target="_blank"><img class="statcounter"
src="http://c.statcounter.com/9422883/0/6f9a65fc/1/"
alt="hits counter"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->


Try removing first the first one and see if it works.

[allvip]

You can attach the stanadark folder so I can fix the theme for you in 5 minutes.
It looks like you can't do it.
If you don't want to post it on the forum then email it to me at themesscripts54@gmail.com

[biellebrunner]

I removed all the scripts, but it's still not working. =/

[biellebrunner]

You can attach the stanadark folder so I can fix the theme for you in 5 minutes.
It looks like you can't do it.
If you don't want to post it on the forum then email it to me at themesscripts54@gmail.com

I'll e-mail it to you then. Thanks!

[allvip]

Open template.html and BEFORE

Code Select Expand


<link rel="stylesheet" href="themes/stanadark/style.css" type="text/css" />


PASTE

Code Select Expand


<link rel="stylesheet" href="css/coppermine.css" type="text/css" />


All the themes MUST have coppermine.css in template.html. Has important styles.

Open theme.php and DELETE

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="thumb filmstrip_background" align="center" style="{THUMB_TD_STYLE}">
            <table width="100%" cellspacing="0" cellpadding="3" border="0">
                <tr>
                   <td width="50%" 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="50%" 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" style="{ONE_WIDTH}">{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
******************************************************************************/


Only if you want to edit the filmstrip copy $template_film_strip function from themes/sample/theme.php and make your changes but watch what you do. It does not looks like the theme needs $template_film_strip function in theme.php.

A function only needs to exist in theme.php if you want to edit it to make the layout look diffrent from the default look.

[biellebrunner]

I added Coppermine's css, and it worked when I clicked on the "Next" arrow the first time, but if I click it the second time, the whole strip goes missing.

$template_film_strip has changes in it. I changed the "thumbnails" class, since I don't want the filmstrip to have the same padding as the album thumbnails. Is there anything I should add to my new class (.thumbs) that "thumbnails" has so it'll work properly?

Again, tested on Chrome and Firefox and it's disappearing on both: http://stanakaticbrasil.com/galteste/displayimage.php?album=2&pid=11#top_display_media

[biellebrunner]

I added Coppermine's css, and it worked when I clicked on the "Next" arrow the first time, but if I click it the second time, the whole strip goes missing.

$template_film_strip has changes in it. I changed the "thumbnails" class, since I don't want the filmstrip to have the same padding as the album thumbnails. Is there anything I should add to my new class (.thumbs) that "thumbnails" has so it'll work properly?

Again, tested on Chrome and Firefox and it's disappearing on both: http://stanakaticbrasil.com/galteste/displayimage.php?album=2&pid=11#top_display_media

*It's .thumb, actually.

[allvip]

coppermine.css adds overflow hidden for the filmstrip container div (and other important styles for other page like Config).

Code Select Expand


div#film {
    padding: 5px 0 5px 0;
    overflow: hidden;
}


The only error in your $template_film_strip function is the word thumb

Code Select Expand


<td valign="bottom" class="thumb filmstrip_background" align="center" style="{THUMB_TD_STYLE}">


In js/displayimage.js you will see class thumb.
displayimage.js looks for .thumb to add to it class remove and the first thumb class that it finds is the one you added to the filmstrip container and the filmstrip fails to work.
You can not use class thumb for the filmstip.

Code Select Expand


                  var itemLength = (striptype == 'hori') ? $(".tape tr > .thumb").length : $(".thumb").length;
                  var itemsToRemove = maxItems+1;
                  if (itemLength == itemsToRemove) {
                      if (striptype == 'hori') $('.remove').remove();
                      else $('.remove').parents('tr:eq(0)').remove();
                  }


[allvip]

Replace the word thumb with something like filmstripWrapp or any other custom word.

[biellebrunner]

Ok, so I went back to the original template_film_strip, and only removed the "thumbnails" class, but kept the original "thumb" on the filmstrip images, and that seems to have fixed the problem. No extra padding, and the navigation is working just fine! Yay!
Thank you for the help and the patience.
Cheers!

[allvip]

Is better to not use to much functions in theme.php if you don't really need them.
You make theme.php to big.
Big files more load on the server. Optimizing the themes is the best practice.

Just add to styles.css something like that. Will overwrite the .thumbnails

Code Select Expand


#filmstrip td.thumbnails {
width: 100%;
}
#filmstrip .thumbnails {
    position: relative;
    padding: 0px;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}


[biellebrunner]

That's even better, then! Thank you!