Adding links to Interactive image slideshow...

[rokmer]

Interactive image slideshow with text description
http://www.dynamicdrive.com/dynamici...interslide.htm

Would anyone be able to help me with adding URL links to the images in the slideshow??? I would greatly appreciate it. Dynamic Drive Scripts are absolutley amazing and full of great scripts. Great job and thank you. :)

[jscheuer1]

Just a few changes, find these lines and sections, add the parts indicated in red:

<p align="center"><a id="_Ath_Link"><img id="_Ath_Slide" onload="OnImgLoad()"></a> </p>

function Update(){
getobject("_Ath_Slide").src = g_ImageTable[g_iimg][0];
getobject("_Ath_Link").href = g_ImageTable[g_iimg][2];
if (g_ImageTable[g_iimg][2]=='')
getobject("_Ath_Link").removeAttribute('href', 0)
getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];
getobject("_Ath_Img_X").innerHTML = g_iimg + 1;
getobject("_Ath_Img_N").innerHTML = g_imax;
}

//configure the below images, descriptions and links to your own. 
g_ImageTable[g_imax++] = new Array ("cake.gif", "It's a cake!", "http://www.google.com");
g_ImageTable[g_imax++] = new Array ("bike.gif", "Bike Rider.", "");
g_ImageTable[g_imax++] = new Array ("player.gif", "Soccer Player.", "");
g_ImageTable[g_imax++] = new Array ("watch.gif", "Watch Out!!", "");
g_ImageTable[g_imax++] = new Array ("hurry.gif", "Hurry Up!", "");
//extend the above list as desired

[rokmer]

Thank You John!!! Perfect. Now a couple of other things to make it perfect. I wanted to make the links open up in a new browser page and have the images that are showing when you visit the site pull up random images??? I know its possible I have just been trying with no luck. I am soory or else I would do it myself. I do greatly appreciate your time and input. Thank you again.

[jscheuer1]

That's actually a bit easier. For a new browser page for links, where we put the link, add a target="_blank":

<p align="center"><a id="_Ath_Link" target="_blank"><img id="_Ath_Slide" border="0" onload="OnImgLoad()"></a> </p>

For randomized images each time the slideshow loads, just below the line:

////End configuration/////////////////////////////

add:

g_ImageTable.sort(function() {return 0.5 - Math.random();} //thanks to Mike (aka mwinter) :))

[rokmer]

Thank you once again for everything. I have one other thing that I wanted to add, similar to the script you wrote Your Script . I tried to do some reverse engineering but this stuff gives me a migrane, lol. I do scripting with configs, binds and map campaigns for online games. I have even constructed websites from scratch, but I must hand it to you you have the touch I want to be able to define the Height and Width of the images that are showing??? If you could help with this last thing I would be even more greatful than the last time. I think this will be one great script after this!!! Anyways hope you can help me out. Thx. Again.

[jscheuer1]

Up until now, it has been pretty clear what you were asking for and, on the face of it, this is no different. However, since the images display at their native size anyway and it is a bad idea to have the browser resize images*, I'd like to know why you want this feature and what you hope to accomplish with it. It would make more sense to me if what you wanted was to prevent the jumping around of the show if different sized images are used. To prevent that, one needs to define (to a size as wide or wider than the widest image and as high or higher than the highest image) the size of the image display area, not the images themselves. This can be done for this slideshow by substituting a table for the paragraph as the container for the image and link bootstraps (this one works well with the demo images and a show centered on the page):

<table align="center" style="height:150px;width150px;"><tr>
<td align="center" valign="middle"><a id="_Ath_Link" target="_blank" ><img id="_Ath_Slide" border="0" onload="OnImgLoad()"></a></td>
</tr></table>

*Relying upon the browser to resize images will result in poor quality images and/or images that take much longer to display and much more bandwidth than they should. Any resizing of images for the web should be either transient (quickly resolving/dissolving to a image's native dimensions, a special effect, this can be done by the browser) or done with an image processing program so that the native (actual) dimensions and the display dimensions are exactly the same.

[rokmer]

Thx John, I had no intention of getting you wound up about the whole thing. I have seen other questions by people and responses are out right "uncalled for". The images that I use are images taken from a digital camera which will be linked to a full sized image. If I use the script the way it is, you have to scroll up and down a mile to see them! The random script as well as the one to modify the dimensions do not work. They are creating errors. I am almost done modify the script to the point where you can include whatever options that a person may need, and yes this was done partially with your help which I appreciate like I mentioned more than once. I had to modify it with netscape to get it to do what I need and it is exactly what I had in mind. The only thing missing is the "Random" script. The one you posted is creating errors and I put it right after the line you had mentioned. Us "nOObs" as we would call it in the gaming community don`t come around assuming you will do everything for us. If a player that I come across needs tips or scripts and binds to make there game more interesting and competative I will help them no questions asked because I was there once myself. A person can only "google" and burn there eyes out staring at thier screen for so long. With that said "of my chest" please in the future don`t let other people feel like you are the best thing since sliced bread Happy Holidays. I still respect you as a person and what you are capabale of no harm intended. Be nice!

[jscheuer1]

It's unusual that anyone gets that excited about my (usually) sound advice. I must be becoming like Mike. Not such a bad thing. Seriously, the random function was tested here and worked fine, as well as works fine in other scripts, though there could be something I either overlooked or have not been informed of. It truly is a bad idea to have your browser resize images for presentation over the web, especially if they are huge digital camera images. Use Paint Shop, Photoshop or similar, or an optimizer like xat.com's to resize them (bilinear resampling is usually best with a touch of 'sharpen image' added first), they will take up less space, look better, and download faster, as will your page. If you need help on the the randomizing thing:

PLEASE: Include the URL to your problematic webpage that you want help with.

No animals were harmed in the posting of this message.

[rokmer]

Hello John, I know my post sounded worse than I intended. My frustration with those codes was getting to me I think. I am glad you took it as well as you did and I didn`t mean any harm by it. Sorry. Anyways this is what I have.
Interactive Image Gallery Test Basically this is turning out to be a great script. You see I do auctions online and in my description I have image(s) of the items that you can click on to get a large view (the actual size) So basically if I have my gallery all I have to do is put in the URL of the image in the gallery and it will link to the actual auction page. Otherwise I would have my image for my auctions and then resize each and every one of them. Meaning twice the work and twice the websapce that I have to use. I have over 300 images so that is not an option

I hope someone has use for this script.
Thx again.

[jscheuer1]

I have over 300 images so that is not an option

All the more reason to have two sets of images. The thumbnails should be small and lightweight (optimized) to load quickly and take little bandwidth. The larger images should be optimized and set to the smallest dimensions possible. You really should use an image optimization program for this. The program (if any good) can be run in batch mode. If done properly, you will end up taking much less web space than the one set of huge images does. To ignore the reality of bandwidth is a choice you can make but, I strongly advise against it.