JavaScript question

[DaveX]

I've been looking for a particular script for over a month now with no luck and my question has more to do with whether it's possible rather than if anyone knows where I can find it although if anyone DOES know...

What I'm looking for is a gallery/slideshow. I want a row or grid of thumbnails on the left. When you click one the corresponding image shows up on the right. I ALSO need it to function like a slideshow though with 'next/back' arrows on either side of the main images on the right so that the user has the option to browse by thumbnail OR arrows.
I found it strange that I couldn't find any scripts like this so it made me wonder if it was even possible and while I did find examples on the web they were all using Flash.
I know it might sound like a strange request to use both but, for whatever reason, most people I'm working with lately come from an ad/arts background and the ALL want this feature...

Anyway, thanks for reading this far.

[jscheuer1]

That can fairly easily be done. In fact, you could use:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

with just some clever layout and a few minor modifications/additions.

The layout part should be up to you and/or your client, but I can tell you the modifications/additions in a little while after I work them out. Watch this space. :)

[jscheuer1]

OK, here goes. Add this line (red) to loadimage:function(linkobj):


loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
thumbnailviewer2[linkobj.getAttribute("rev").split("::")[0]]=parseInt(linkobj.getAttribute("id").split("_")[1]);
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumb . . .

Add this function (red) to the script:


addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

get:function(r,d){
var re=new RegExp(r+'_');
for (var i = 0, a=document.links, ta=[]; i < a.length; i++)
if(a[i].id&&!isNaN(parseInt(a[i].id.replace(re, ''))))
ta[a[i].id.replace(re, '')]=a[i];
if(!ta.length)
return;
var idx=typeof thumbnailviewer2[r]=='number'? thumbnailviewer2[r] : 0;
if(typeof thumbnailviewer2[r]=='number'||d==-1)
idx+=d;
idx=idx>=ta.length? 0 : idx < 0? ta.length-1 : idx;
thumbnailviewer2.loadimage(ta[idx]);
},

init:function(){ //Initialize thumbnail viewer script
this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
var pagelinks=docume

Now where you would have had (from the demo):


<a href="bulb.gif" rel="enlargeimage::click" rev="loadarea">Thumbnail</a>

Add an id the prefix of which is the rev attribute + an underscore and a number from 0 to whatever that represents this image's order for the previous/next buttons:


<a id="loadarea_0" href="bulb.gif" rel="enlargeimage::click" rev="loadarea">Thumbnail</a>

Now you can (if there are more than one image in this group) have buttons (or links, whatever) like so:


<input type="button" value="-" onclick="thumbnailviewer2.get('loadarea', -1)">
<input type="button" value="+" onclick="thumbnailviewer2.get('loadarea', 1)">

[DaveX]

John,

You're THIS close >< to having my eternal servitude. I'm only hung up on one thing. That last bit regarding the prev/next buttons. I'm not clear on how to implement the code. Let's say I have two images of arrows under or to either side of the load area (arrowleft.jpg/arrowright.jpg). How would I attache the code?

[jscheuer1]

There are various ways, here's one:


<input type="image" src="arrowleft.jpg" onclick="thumbnailviewer2.get('loadarea', -1)">
<input type="image" src="arrowright.jpg" onclick="thumbnailviewer2.get('loadarea', 1)">

The other night, I played with this idea a little more and included style and scripting for highlighting the thumbnails in an intuitive manner. Here is a demo of that. The two images are repeated but you can tell the four are each different from their descriptions:

http://home.comcast.net/~jscheuer1/side/thumb_2.html

I put the scripts (I added one at the end of the page) on the page, so you can get them if you like by using your browser's view source.

[DaveX]

John,

I can't thank you enough for this! I've almost got it to where I want it. A couple of questions:

Can I turn off the highlighting option?

How do I replace the '-' '+' buttons with simple text or a graphic?

[jscheuer1]

How do I replace the '-' '+' buttons with simple text or a graphic?

Here's another example with image (there are several ways, and the image inputs from my last post would work fine):


<img onclick="thumbnailviewer2.get('loadarea', -1);" src="arrowleft.jpg">

For text, here's one way:


<span onclick="thumbnailviewer2.get('loadarea', -1);">Previous</span>


Can I turn off the highlighting option?

If memory serves, that is what we had before my previous post.

[DaveX]

John,

This has been a great help! I've been doing little tweaks and stuff with my limited knowledge. I've got two more questions. Is there a way to have the page come up with the first image already showing? Also, I can't figure out how to have the thumbs display horizontally.
Again, thanks for all of your help with this. It's been my intro into scripts so thanks for your patience!

[jscheuer1]

To have something display in the load area when the page first loads, just put it there:


<div id="loadarea"><img src="some.jpg"></div>

You can include a link and/or a caption as well if you like:


<div id="loadarea"><a href="some.htm"><img src="some.jpg" border="0"></a><br>Some Caption!</div>

Whatever you put there will be replaced by the dynamic content once the user activates a thumbnail.

To have your thumbnails line up horizontally, you could put them in a table, one to a cell in the same row, or just make the division they are in wide enough so that they don't have to wrap to fit in it. This part is just basic HTML layout, it has nothing to do with the script.

[jimmybongo]

but i was just going to see if some1 would respond.

I just implemented this code on a site I'm working on for school and I can't get it to display the pictures in IE.

Please help if you get this. Thanks

http://students.kennesaw.edu/~jray40/2040/peachtree/recent_events/flatrock06.html

http://students.kennesaw.edu/~jray40/2040/peachtree/javascript/thumbnailviewer2.js

[jimmybongo]

never mind, i got it.

thanks for all this, btw. its helped greatly. I've used it on 2 different sites so far.