Javascript help needed for "slideshow" type featur

[steve0]

Heya..

I am not the best with javascript..
so I need a lil' help..

What I want to do is:
Select a set of items from a database.
Present them to the visitor, so the visitor can scroll through these items by clicking a next, or previous button
When they see an item they like.. click the image itself and go to the page with more info.

The database retrieval and scrolling of images functionality is done..

The issue I am having is linking the URL with the image..
How do I pair an image with a URL in the script and present it correctly on the page?

I am thinking multidimensional array.. (yes?)

Any help - most appreciated
Here is what I have for the scrolling...

<SCRIPT LANGUAGE="JavaScript">
<!--
var NumberOfImages = 10

var img = new Array(NumberOfImages)

img[0] = "item10.jpg"
img[1] = "item1.jpg"
img[2] = "item2.jpg"
img[3] = "item3.jpg"
img[4] = "item4.jpg"
img[5] = "item5.jpg"
img[6] = "item6.jpg"
img[7] = "item7.jpg"
img[8] = "item8.jpg"
img[9] = "item9.jpg"

var imgNumber = 0

function NextImage()
{
imgNumber++
if (imgNumber == NumberOfImages)
imgNumber = 0
document.images["itemImage"].src = img[imgNumber]
}

function PreviousImage()
{
imgNumber--
if (imgNumber < 0)
imgNumber = NumberOfImages - 1
document.images["itemImage"].src = img[imgNumber]
}

//-->
</SCRIPT>


<TABLE BORDER=0>
<TR>
<TD COLSPAN=1 ALIGN=MIDDLE>
<A HREF="javascript:PreviousImage()">
[img]reverse.gif[/img]</A>
</TD>
<TD COLSPAN=2 ALIGN=MIDDLE>
[img]item1.jpg[/img]
</TD>
<TD>
<A HREF="javascript:NextImage()">
[img]forward.gif[/img]</A>
</TD>
</TR>
</TABLE>

you should be able to put

...

around your main image, then in the code make a similar array like

var urls = new Array(numberOfImages);
urls[0] = "page10.html";

and so forth.

Then in the NextImage() and PreviousImage() function put

document.anchors["itemLink"].href = urls[imgNumber];

Hope some of this helps. I haven't gotten a chance to test it. Good luck.

[DrTandem1]

Why are you using javascript for this?

[wsmeyer]

Why are you using javascript for this?

I second, unless this is an exercise in JavaScript for some class project this should be handled on the server side by PHP or ASP depending on your server.

William.

[wsmeyer]

Why are you using javascript for this?

I second, unless this is an exercise in JavaScript for some class project this should be handled on the server side by PHP or ASP depending on your server.

William.

[mikmik]

So, are you guys going to play hard to get, or are you going to help?

What is the point of this:

Why are you using javascript for this?

My question is: What else do you suggest?

Personally, I like dhtml, and it is very powerful, and fast, precisely because it is client side.

I have also seen a few Flash slideshows, but these are not editable, and the presentation you see is what you get. With dhtml, you have all the code and can change anything you want.

And please, if you are going to say "jacascript is bad", or "waht if they have javascript turned off", well I guess then about 90% of sites with forms wont work for these people, will they?

I guess they won't get to see the slide show, will they? About 8% of people don't have javascript enabled, and I wonder exactly who makes up this 8%.

I use dhtml, I have a vast list of excelleny slide shows if you want, steve0, so let me know.

I havesomething similar (without db, though) with the one you have here, so I will take a look.

Simpleviewer is one flash gallery that is nice, and if you know even a little Flash, I can show you some other really, really nice ones!

PS, if anyone is suggesting php or asp, let's see it. I do not like sending a http request every time I want to see the next image, it is almost impracticle, so if there are any feasable alternatives, please, share!

We are here to help each other, not play little power games like 'I know something you don't'.

(Don't you have to have js enabled to use this forum?)

[DrTandem1]

Please mikmik,

I made no judgments nor am I playing "little power games." I simply wanted to know why javascript was important to the user before I offered suggestions.

I find it interesting how one could find such anger and resentment in such a simple question that had no condescension nor judgments made nor implied.

No matter what method someone uses, I really don't like slide shows. I prefer to select an image from static thumbnails. Why should a visitor have to click or wait through image after image before they are allowed to see one they find interesting. It's much easier to allow them to glance at a large sampling all at once and pull up the one(s) they find interesting.

[mikmik]

Okay, I understand where you are coming from, Dr. Tandem. I seem to misunderstand you a lot, and some of that is my fault.

But I want to know why you don't just help with the question. If you want to suggest other options, then suggest them! We are still left up to guessing games when someone doesn't provide enough information to get their message properly.

And motive is hardly the reason for a lot of games, they are mostly subconcious, not intentional. I am amazed at the number of people that 'don't play games' that really do. Like online dating, if the person says "not into games", then they are.


Anger? If you say so. I was stating a observation, and I had no anger behind it.

So how about let's stop with the assumptions and judgements, both of us, okay?

I am fed up with BS, though, and I prefer the direct approach to passive aggressive powerplays and manipulations anyday. Course, honest people make easy targets, because we are not trying to hide anything. We don't hide behind 'misunderstanding', and 'that's not what I meant'.

It is just so painfully difficult to get help in forums sometimes, because people seem more concerned with 'how they would do it', or criticising methods, than just helping with what they ask. Sure, there are lot's of times other suggestions are warranted, but it is like extracting teeth to get a straight answer sometimes.

Try looking in sitepoint, or codeproject forums, you will see what I mean.

[DrTandem1]

mikmik, Unfortunately, many asking the questions do not know that there are other alternatives. In this case, the question was how to do a slide show using javascript. He then went on to say how he wanted the script to perform. Since there are several ways to do the same thing, I was wondering, if the javascript was the key operative. I was not passing judgment on the use of javascript. I use it for several things.

Of course, when giving advice we all tend to tell how we would do it ourselves. Why would we give advice that counters our own preferences?

Here is part of the original post:

"What I want to do is:
Select a set of items from a database.
Present them to the visitor, so the visitor can scroll through these items by clicking a next, or previous button
When they see an item they like.. click the image itself and go to the page with more info."

Why not just a set of thumbnails? Each would obviously link to the image file or new page with a larger image and information. Maybe what he wants isn't a slide show. No need for a script. No problems. Keep it simple and focus on the visitor for the design.

[steve0]

Thanks SalsaDave.. the answer was on target..

To answer DrTandem's question..
Javascript seemed a potential, quick and simple solution. If you know of another method, please post it..

And the 'slideshow' for lack of better description is what the customer wanted.

To address william's post.. I would be interested in seeing how this could be accomplished in php or asp without a page/frame reload. Please explain..

mikmik, DHTML is an option.. I am just unfamiliar it..

Here is a mock up of what I am talking about..
http://www.plaguemedia.com/fishing.html

##########

I was trying to avoid a long post.. but it appears I could have avoided some confusion had I gone into detail.. so for those interested...

The purpose of the post was to find a simple, cost effective solution (time/money) to a project.

The pages in question have multiple elements.. including nav bar, rss content, editor content among others...
All are generated dynamically from a database.
(I don't think I need to post the code on how that is done.. but is it via php/mysql)

On these pages there is a section highlighting products via thumbnail images..
these products are content specific...
e.g. Change depending on the page.
And are reused on multiple pages.. (a single product can apply to multiple topics)

The code's purpose would create a "box" with a product picture and scroll controls.. (e.g. next, previous..)

The intent is for the visitor to visit the page, read the content with the ability to view the products related to the content without leaving the page, needing to load a new page, or deal with pop-up windows or iframes.

Should a product in the displayed set be of interest, the visitor could click the image and be taken to the page with more information specific to the product just clicked on.

As an example.. Let's take FISHING. A page would have information about Alaskan Salmon fishing .. use your imagination to envision the page content.. There would be the previously mentioned 'BOX' showing a hand-tied fly. The visitor could scroll through other flies applicable to alaskan salmon.. Other pages might address bass.. trout.. catfish..sea trout...steelhead...grayling...pike...
There would be the box on these pages as well, with ties related to these species.

Content is generated dynamically;
Content changes regularly
featured products change often
The site is operated by non-techical people
There is a tight budget.

Here is a mock up of what I am talking about..
If people know of other potential solutions that can accomplish the functionality, I am interested in hearing about them.

Does this clarify things a bit?