Wind buttons for film_strip in displayimage.php

[Tranz]

nol33t, are you coding this for 1.3 or 1.4? Or would it work with both?

edit: Your gallery is 1.4 so it looks like that's what it will work with. cool. And that's neat that it does a countdown of the number of pics remaining in the album.

[nol33t]

nol33t, are you coding this for 1.3 or 1.4? Or would it work with both?

1.4, but a downgrade wouldn't be too difficult imo (could work without other changes on 1.3, i'll try).

and actually..here's the mod attached

I added as you suggested:
- on the tooltip the number of pictures left
- arrows disappearing when you're at the start or the end of the filmstrip
- internationalization ( english.php, a new array $lang_film_strip )

last demo still here

I tried a lot of different implementations ( cause there was many different solutions to do this ), and the one i'm submitting does work with IE/Mozilla browsers, and is the most comprehensive i manage to found out ( at least for me )

Basically, here is how it works:
- when the template for the filmstrip is generated, it adds in the html a comment tag <!--STARTPOSX#X'#X''#X'''ENDPOS--> where X, X', X'' and X''' will be the new "positions" if you click on one of the buttons:
  - X for fast rewind ( pos - number of thumbs set up for the filmstrip in the config )
  - X' for rewind ( pos -1 )
  - X'' for forward ( pos +1 )
  - X'' for fast forward ( pos + number of thumbs set up for the filmstrip in the config )

when you click on one of the buttons, it will call a javascript script which will parse this comment tag, and depending one which button you clicked on, send the new position to display, with the album infos, to filmstrip.php, which returns the new filmstrip. Since i use the display_film_strip() function to do that, the new filmstrip will contain the new <!--STARTPOS ENDPOS-->  comment, but with the new positions ( so it loops which i kinda like )

the only probs i found are:
- the html code i added in $template_film_strip does not validate as XHTML 1.0, but i'm not that sure displayimage.php was before, and those are minor things to fix, and i'm must admit i'm not good at that ( which does not mean the html is real messy )
- one glitch when you're at the beginning of the filmstrip, arrow takes two clicks to dissapear, if a math geek looks at my code i'm sure he'll find the prob in 2 sec )
- last but not least: you all work too fast on the devel 1.4 release, i had to merge my mod! 

If you want more explanations on my choices for this mod and its implementation, just ask

Hope you'll like it,

-matt-

[jaysonyates]

now this will not over write my custom theme will it, nol33t?

Thanks can not wait to try it out.

[Tranz]

Great job, nol33t! Thank you.

A couple of things

- With the files from the archive, the buttons didn't work in FF, but they worked in IE. After I merged your file with my themes.inc.php, it worked. So I guess there was something missing. I diffed the two files to see what it could be but couldn't figure it out.
- I can't replicate it, but I saw this in both of our galleries. Sometimes at the end of the gallery, the message would be displayed that there was no picture to show. Sometimes that message shows and sometimes not. I would have to refresh the page to make the filmstrip return.

Thanks so much for helping out with this. (https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Ftu2.net%2Femoticons%2Ficon_clap.gif&hash=2e48621c491c272735c08ccf8acb019bf9985af8)(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Ftu2.net%2Femoticons%2Ficon_thumbs_up.gif&hash=f845a31009dafd4285db67da2f3f39ffbaaab71c)

[Tranz]

Sorry, I hate to ask too much since you've done so much already...

Is it possible to make it so that the script can detect that the browser has javascript enabled? And if it is not, have the tooltip say that js is required? I can see some people clicking madly away at those arrows.

Maybe someone else can jump in on this.

[nol33t]

in themes.inc.php, after

Code Select Expand


      {PREV_BUTTONS}
      {NEXT_BUTTONS}
      </td>
      </tr>


you could add

Code Select Expand


<NOSCRIPT><td colspan={COLS} align="center"> Your browser doesn't support JavaScript, navigation has been disabled. </td></NOSCRIPT>


but with an internationalized error message of course

--edit: a better one could be to use javascript for "printing" the buttons (with document.write() )..no javascript, no buttons..

-matt-

[jaysonyates]

Where do all the files go? Sorry if this sounds like a stupid question, but I would hate to add the files to the wrong area, and then corrupt Coppermine.

Thanks

[nol33t]

Sorry but the zip i provided is meant for 1.4, i didn't test it yet with 1.3, and in any cases if you use a custom theme you will have to manually modify the theme.php file in the folder of the theme you use.
Patience is a virtue..

[Tranz]

--edit: a better one could be to use javascript for "printing" the buttons (with document.write() )..no javascript, no buttons..

-matt-

That would be cool indeed.

@jaysonyates, do you think you could wait til 1.4 comes out with this included? You would still have to manually update your custom theme, but there would be instructions to upgrade custom themes from 1.3 to 1.4.

[nol33t]

That would be cool indeed.

ok here it is then

- in theme.php replace

Code Select Expand


      {PREV_BUTTONS}
      {NEXT_BUTTONS}


with

Code Select Expand


      <span style="visibility:hidden" id="buttons">
      {PREV_BUTTONS}
      {NEXT_BUTTONS}
      </span>
     <script language="JavaScript" type="text/javascript">
     <!--
      var buttons = document.getElementById("buttons");
                buttons.style.visibility="visible";
     //-->
     </script>


and in script.js, find

Code Select Expand


filmstrip.innerHTML=xmlhttp.responseText;


and add right after

Code Select Expand


      var buttons = document.getElementById("buttons");
        buttons.style.visibility="visible";


I'm really no DOM expert, so chances are that there's better solutions, but it works with IE/and Mozilla browsers

-matt-

[jaysonyates]

Man! That is like asking a little kid not to open his gifts before X-Mas, "sigh" oh, I can wait..........................................................................................................................................................................................................Is it here yet?

--edit: a better one could be to use javascript for "printing" the buttons (with document.write() )..no javascript, no buttons..

-matt-

That would be cool indeed.

@jaysonyates, do you think you could wait til 1.4 comes out with this included? You would still have to manually update your custom theme, but there would be instructions to upgrade custom themes from 1.3 to 1.4.

[Tranz]

Great job, nol33t! It worked in IE and FF.

I checked in Opera and the buttons didn't respond. Javascript was enabled. I turned on the setting to have the console show up if there is an error. When I clicked the button, the console showed up, with a long list of stuff so I don't know about posting it here. However, when I disabled js, the buttons didn't show up so that part worked.

Opera has great functions built-in that FF needs extensions for. But it's times like these when it is just a bane on a web dev's existence.

[nol33t]

About Opera: the actual version ( 7.5x ) actually got problems with xmlhttp, web services like Gmail also don't work with..that's why they are rewritting this part...and i just tried with the Beta 8.0, and the buttons worked

-matt-

[Rodinou]

Code Select Expand


      <span style="visibility:hidden" id="buttons">
      {PREV_BUTTONS}
      {NEXT_BUTTONS}
      </span>
     <script language="JavaScript" type="text/javascript">
     <!--
      var buttons = document.getElementById("buttons");
                buttons.style.visibility="visible";
     //-->
     </script>


Always rather display than visibility : visibility "hides" the layer, but it "keeps" the place it takes ..
Display : block / display : none ... the layer disappears totally, even if it takes several pixels

Code Select Expand


      <span style="display : none" id="buttons">
      {PREV_BUTTONS}
      {NEXT_BUTTONS}
      </span>
     <script language="JavaScript" type="text/javascript">
     <!--
      var buttons = document.getElementById("buttons");
                buttons.style.display="block";
     //-->
     </script>



So your code becomes interesting ... but is it possible to do a version like your flash mod but with dhtml ? (you have proved with this mod it's possible)

[nol33t]

thanx for the display / visibility tip

is it possible to do a version like your flash mod but with dhtml ? (you have proved with this mod it's possible)

well everything is possible..but the amount of work would be imo - even though quite fun - quite big..

[Tranz]

Always rather display than visibility : visibility "hides" the layer, but it "keeps" the place it takes .. Display : block / display : none ... the layer disappears totally, even if it takes several pixels

Code Select Expand

<span style="display : none" id="buttons"> {PREV_BUTTONS} {NEXT_BUTTONS} </span> <script language="JavaScript" type="text/javascript"> <!-- var buttons = document.getElementById("buttons"); buttons.style.display="block"; //--> </script>



So your code becomes interesting ... but is it possible to do a version like your flash mod but with dhtml ? (you have proved with this mod it's possible)

Thanks, Rodinou. It's good to make the blank space go away if the arrows are not there. However, the arrows disappear after the first series. Here's an example. It happens in IE and FF.

[nol33t]

it also has to be in script.js, after filmstrip.innerHTML=xmlhttp.responseText;

Code Select Expand


       var buttons = document.getElementById("buttons");
        buttons.style.display="block";


-matt-

[Tranz]

Thanks, that fixed it.

[Tranz]

So your code becomes interesting ... but is it possible to do a version like your flash mod but with dhtml ? (you have proved with this mod it's possible)

Let's finish this first so that we can release the next cpg version with this.

[nol33t]

Thanks, that fixed it.

cool, cause it's look's real nice when javascript isn't enabled now

Let's finish this first so that we can release the next cpg version with this. Wink

you want me to check for the " random bug" ( no image to display ) when at the end of the album?
found another little one too, if nbr of pics of the album <= items in the filmstrip, both right and left arrows have to be disabled