Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Filmstrip not "hiding" image when navigating  (Read 8846 times)

0 Members and 1 Guest are viewing this topic.

biellebrunner

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 46
Filmstrip not "hiding" image when navigating
« on: March 19, 2016, 11:29:18 pm »

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.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Filmstrip not "hiding" image when navigating
« Reply #1 on: March 20, 2016, 12:32:48 am »

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]
<script src="themes/stanadark/css_browser_selector.js" type="text/javascript"></script>

Code: [Select]
<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]
<script src="http://www.ads.flaunt.nu/ad/728x90_light.js"></script>

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

Code: [Select]

<!-- 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.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Filmstrip not "hiding" image when navigating
« Reply #2 on: March 20, 2016, 01:54:02 am »

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
Logged

biellebrunner

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 46
Re: Filmstrip not "hiding" image when navigating
« Reply #3 on: March 20, 2016, 02:39:39 am »

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

biellebrunner

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 46
Re: Filmstrip not "hiding" image when navigating
« Reply #4 on: March 20, 2016, 02:40:00 am »

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!
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Filmstrip not "hiding" image when navigating
« Reply #5 on: March 20, 2016, 03:10:06 am »

Open template.html and BEFORE

Code: [Select]
<link rel="stylesheet" href="themes/stanadark/style.css" type="text/css" />

PASTE

Code: [Select]
<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]
/******************************************************************************
** 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.


« Last Edit: March 20, 2016, 03:20:34 am by allvip »
Logged

biellebrunner

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 46
Re: Filmstrip not "hiding" image when navigating
« Reply #6 on: March 20, 2016, 03:24:49 am »

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
Logged

biellebrunner

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 46
Re: Filmstrip not "hiding" image when navigating
« Reply #7 on: March 20, 2016, 03:29:26 am »

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.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Filmstrip not "hiding" image when navigating
« Reply #8 on: March 20, 2016, 03:36:00 am »

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

Code: [Select]
div#film {
    padding: 5px 0 5px 0;
    overflow: hidden;
}

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

Code: [Select]
<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]
                  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();
                  }
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Filmstrip not "hiding" image when navigating
« Reply #9 on: March 20, 2016, 03:47:28 am »

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

biellebrunner

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 46
Re: Filmstrip not "hiding" image when navigating
« Reply #10 on: March 20, 2016, 03:52:03 am »

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!
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Filmstrip not "hiding" image when navigating
« Reply #11 on: March 20, 2016, 03:56:25 am »

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]
#filmstrip td.thumbnails {
width: 100%;
}
#filmstrip .thumbnails {
    position: relative;
    padding: 0px;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
« Last Edit: March 20, 2016, 04:07:10 am by allvip »
Logged

biellebrunner

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 46
Re: Filmstrip not "hiding" image when navigating
« Reply #12 on: March 20, 2016, 04:41:54 am »

That's even better, then! Thank you!
Logged
Pages: [1]   Go Up
 

Page created in 0.02 seconds with 21 queries.