Wind buttons for film_strip in displayimage.php

[spade]

Hi,
I would love to see forward and backward wind buttons beside the film strip which would allow me to advance or rewind the filmstrip by four picture without changing the viewed image, to have another way of browsing through the pictures.
Thanks a bunch!

[Casper]

Very good idea.

[Joachim Müller]

added this feature to the todo list on the dev board.

Joachim

[skypix]

That's a big wishlist item for me too.  I want to expand my gallery to hundreds of stock shots, but don't want my potential customers to think 7 or so thumbnails in the thumbstrip is all they can access at any one time.  Being able to go to the next group of filmstrip thumbs, whether 15 or 28 or whatever, would be a big big feature for me as it would increase the client's scanning speed and increase my chances of sales.

[Tarique Sani]

Ideally this will need a XMLhttprequest hack which means that just the filmstrip img src are changed - the page does not reload - good idea

[nol33t]

@Tarique: something like this? 

XML HTTP Requests are wild!, thanx for having made me discover it

note: example not workin' on IE ( at least not mine..), for some obscure M$ reason, but that is fixable. ( anyway get Firefox  )

-matt-

[kegobeer]

@nol33t: Did you do a browser check to show one script for non-IE and another for IE?

http://jibbering.com/2002/4/httprequest.html

[nol33t]

did it yea: at the end of http://nol33t.free.fr/devel/scripts.js

but my IE is really weird, so maybe it is actually working...

[kegobeer]

I get the unknown runtime error with IE.  Don't know if this will help, but in your .js file there's a blank line after xmlhttp.send(null);  You can try removing it.

Not really related, but something I noticed.  Instead of wrapping a href tag around your forward and backward buttons, why not just do this:

Code Select Expand

<img src="images/prev.gif" border="0" onclick="BrowseFilmstripPrev();">  You don't get a pointer finger when you hover over it, but you can add title="Click for a previous image" to display a mouseover comment.

[nol33t]

I get the unknown runtime error with IE.  Don't know if this will help, but in your .js file there's a blank line after xmlhttp.send(null);  You can try removing it.

tried, still not workin' on mine, i'll read some more doc tomorrow to figure that out

Not really related, but something I noticed.  Instead of wrapping a href tag around your forward and backward buttons, why not just do this:

Code Select Expand

<img src="images/prev.gif" border="0" onclick="BrowseFilmstripPrev();">  You don't get a pointer finger when you hover over it, but you can add title="Click for a previous image" to display a mouseover comment.

Well you noticed good, cause it's indeed nicer now...

[kegobeer]

How about changing

xmlhttp.open("GET", updateUrl);

to

xmlhttp.open("GET", updateUrl, true);

[nol33t]

well doc says the call should be async by default, but we never know i'll give it a try tonite

I've also read somewhere that it could be the content of xmlhttp.responseText which could throw the IE runtime..even if imo the one i'm outputting is pretty clean..e.g.:  http://nol33t.free.fr/devel/filmstrip.php?album=1&pos=22&dir=l

[kegobeer]

I also read it's async by default, but all the examples I've seen always show true or false - they don't omit it.

[nol33t]

@kegobeer: it's Friday nite here soon, so let's bet some beer 

debugging commands:
element.innerHTML; ( so content before the call ):

Code Select Expand


"<TBODY>
<TR>
<TD id=th1><A href=\"displayimage.php?album=1&amp;pos=0\"><IMG class=image title=\"Nom du fichier : DSC00111.jpg&#10;Poids du fichier : 89KB&#10;Dimensions : 800x600&#10;Ajouté le : 14 Fev 2005\" height=100 alt=DSC00111.jpg src=\"albums/userpics/10001/thumb_DSC00111.jpg\" border=0></A>&nbsp; </TD>
<TD id=th2><A href=\"displayimage.php?album=1&amp;pos=1\"><IMG class=image title=\"Nom du fichier : DSC00284.jpg&#10;Poids du fichier : 110KB&#10;Dimensions : 800x600&#10;Ajouté le : 17 Fev 2005\" height=100 alt=DSC00284.jpg src=\"albums/userpics/10001/thumb_DSC00284.jpg\" border=0></A>&nbsp; </TD>
<TD id=th3><A href=\"displayimage.php?album=1&amp;pos=2\"><IMG class=image title=\"Nom du fichier : DSC00294.jpg&#10;Poids du fichier : 101KB&#10;Dimensions : 800x600&#10;Ajouté le : 17 Fev 2005\" height=100 alt=DSC00294.jpg src=\"albums/userpics/10001/thumb_DSC00294.jpg\" border=0></A>&nbsp; </TD>
<TD id=th4><A href=\"displayimage.php?album=1&amp;pos=3\"><IMG class=image title=\"Nom du fichier : DSC00296.jpg&#10;Poids du fichier : 100KB&#10;Dimensions : 800x600&#10;Ajouté le : 17 Fev 2005\" height=100 alt=DSC00296.jpg src=\"albums/userpics/10001/thumb_DSC00296.jpg\" border=0></A>&nbsp; </TD>
<TD id=th5><A href=\"displayimage.php?album=1&amp;pos=4\"><IMG class=image title=\"Nom du fichier : DSC00322.jpg&#10;Poids du fichier : 99KB&#10;Dimensions : 800x600&#10;Ajouté le : 17 Fev 2005\" height=100 alt=DSC00322.jpg src=\"albums/userpics/10001/thumb_DSC00322.jpg\" border=0></A>&nbsp; </TD></TR></TBODY>"


xmlhttp.responseText; ( ..after the call )

Code Select Expand


"<td><a href=\"displayimage.php?album=1&pos=1\"><img src=\"albums/userpics/10001/thumb_DSC00284.jpg\" class=\"image\"  height=\"100\" border=\"0\" alt=\"DSC00284.jpg\" title=\"Nom du fichier : DSC00284.jpg
Poids du fichier : 110KB
Dimensions : 800x600
Ajouté le : 17 Fev 2005\" /></a>&nbsp</td>
<td><a href=\"displayimage.php?album=1&pos=2\"><img src=\"albums/userpics/10001/thumb_DSC00294.jpg\" class=\"image\"  height=\"100\" border=\"0\" alt=\"DSC00294.jpg\" title=\"Nom du fichier : DSC00294.jpg
Poids du fichier : 101KB
Dimensions : 800x600
Ajouté le : 17 Fev 2005\" /></a>&nbsp</td>
<td><a href=\"displayimage.php?album=1&pos=3\"><img src=\"albums/userpics/10001/thumb_DSC00296.jpg\" class=\"image\"  height=\"100\" border=\"0\" alt=\"DSC00296.jpg\" title=\"Nom du fichier : DSC00296.jpg
Poids du fichier : 100KB
Dimensions : 800x600
Ajouté le : 17 Fev 2005\" /></a>&nbsp</td>
<td><a href=\"displayimage.php?album=1&pos=4\"><img src=\"albums/userpics/10001/thumb_DSC00322.jpg\" class=\"image\"  height=\"100\" border=\"0\" alt=\"DSC00322.jpg\" title=\"Nom du fichier : DSC00322.jpg
Poids du fichier : 99KB
Dimensions : 800x600
Ajouté le : 17 Fev 2005\" /></a>&nbsp</td>
<td><a href=\"displayimage.php?album=1&pos=5\"><img src=\"albums/userpics/10001/thumb_DSC00390.jpg\" class=\"image\"  height=\"100\" border=\"0\" alt=\"DSC00390.jpg\" title=\"Nom du fichier : DSC00390.jpg
Poids du fichier : 82KB
Dimensions : 800x600
Ajouté le : 17 Fev 2005\" /></a>&nbsp</td>
"


so maybe my output is not that clean after all...(at least not clean enough for IE )

[Rodinou]

Ohhh I'm very Happy to see this future ... but why not only the filmstrip not to reload ?!!

It's possible to change the intermediate pic without reloading the page. By this example ...

<script language="javascript" type="text/javascript">

img1 = "pic1.jpg";
img2 = "pic2.jpg";
img3 = "pic3.jpg";

function displayText(id,text){
   document.getElementById(id).innerHTML = eval(text); 
   }

</script>


and on click ...

<a href="javascript:displayText('intermediate', 'img1');">Your Thumb in Filmstrip</a>
<a href="javascript:displayText('intermediate', 'img2');">Your Thumb in Filmstrip</a>
<a href="javascript:displayText('intermediate', 'img3');">Your Thumb in Filmstrip</a>


<div id="intermediate">
pic loaded
</div>


It's possible to do this differently with DOM ...

[nol33t]

@Rodinou: funny, thought about it this afternoon

@kegobber: guess what, no innerHTML for the table object with IE...(http://www.insidedhtml.com/forums/viewConverse.asp?d_id=14448&start=3)

nevermind, i'll figure out a workaround ( and it would be cool if it could be with one xmlhttp call only, want to avoid updating 'thumb_cell's one by one )

-matt-

[nol33t]

ok that was quick:

added a <span id='filmstrip'> </span> around the table, and that's the one i'm refreshing: works for me now, i you wanna try it out:

http://nol33t.free.fr/devel/displayimage.php?album=1&pos=22

(still a little bug/glitch when you're at the end of the filmstrip though)

--edit: @DevTeam: if you're interrested i can try to package it as a "clean" contrib

[Tranz]

Hey, that's really cool. I've been working on something similar but I don't know how to make it so only the filmstrip updated. My buttons are also at the top instead of by the filmstrip. However, what I have is fastforward x number based on the number of filmstrip items set in config. I think a combination of what we have would be good. So use what you have and make the filmstrip move x photos instead of one at a time.

Here's what I have so far.

[nol33t]

So use what you have and make the filmstrip move x photos instead of one at a time.

you mean adding just like you did but on the filmstrip level, two extra arrows, to forward/reward by 'x' thumbs at a time? ( i like the one-by-one motion.. )

My buttons are also at the top instead of by the filmstrip

actually the top buttons could be use to change the intermediate pic the same way ( without reloading the whole page, and it would trigger the move of the filmstrip accordingly ), even if i'm going a tiny bit of topic

I don't know how to make it so only the filmstrip (matt:you meant intemediate pic no?) updated

i can send you a quick explanation in a couple of steps if you want

-matt-

[Rodinou]

Mmmmmmmm ... Nol33t ... you have maybe a dhtml solution of our flash idea !!!

Creating a filmstrip with 15 thumbs per 15 thumbs

Loading the intermediate pic by DOM system or this I have put ...

Is it possible ...

@ Nol33t : please, install MSN, one day I'm fed up flooding this forum with your talent !