asked on

Product Selector

I am building a product selector.

There will be about 50 products that will need to be handled.

It will be similar to http://www.ford.co.uk/ (go to home page then select a product range....eg. cars....to see what I mean).

Their implementation is in Flash - but I want to do a javascript implementation.

If I can implement the whole look and feel then fantastic. But for now I will settle for it looking similar but with image swaps rather than a smooth scrolling when the customer clicks left or right.

For now I have 3 images next to each other:

ProdImage1, ProdImage2, ProdImage3

ProdImage1 and ProdImage3 are slightly faded so the customer focus remains on the Image in the middle (ProdImage2). So:

ProdImage1 src="ProdImage0faded.gif"
ProdImage2 scr="ProdImage1.gif"
ProdImage3 src="ProdImage2faded.gif"

When the user clicks Right this should change to:

ProdImage1 src="ProdImage1faded.gif"
ProdImage2 scr="ProdImage2.gif"
ProdImage3 src="ProdImage3faded.gif"

If there are 50 products then there will be 100 images (1 normal, 1 faded.......unless layer transparency is used I suppose.....then possible browser compatiability issues).

When the page loads I want to preload 10 images.

The first 5 products, normal and faded images.

I guess I will probably do this in the normal manner that images are preloaded for use in 'rollover' buttons - ie. filling an array of images.

I have a java component (lost its source years ago) that has no GUI but whose sole purpose is to preload files for websites (just grabs the files and puts them in cache so ready for use). So I figured I could use this to grab the next 90 images while the user is staring at the first 5 prodcuts, carefully loading in order so increase the chance that the images will be available.

Has anyone done this before?
Please can you supply me with code/examples for this.

As I said I will settle for an image swap implementation - but if anyone knows how to do a smooth scroll implementation then I would be delighted.

lexxwern

it is possible, i could do it if it werent for watching the world cup take so much of my time.

if you are familiar with javascript/css all you have to do is have a function that changes the top/left style attribute in an image.

i mean this

<image src="..." style="position:absolute; top:_px; left:_px;" onmouseover="changeto('newimage.gif')" onmouseout="changeto('oldimage.gif')" name="nameit"></image>

now changeto() should do the normal rollover or it can play with the z index and it has to change the style attributes of top and or left.

good luck. cameroon bt saudi arabia 1-0

FalconMaster

You might find DynAPI to be a very useful toolset for creating something like that.

This is a Dynamic Javascript API written entirely in Javascript which supports multiple Browser platforms.

It simplifies your job of crossbrowser dynamic content building, and includes lots of enhancements that make building dynamic web pages easy.

http://dynapi.sourceforge.net/dynapi/

Hope it helps

holgrave

ASKER

FalconMaster - interesting link I'll have a look at DynAPI. It would be nice if you could give me some code examples or suggestions of how I could use DynAPI for my particular problem. Eg. what methods or properties would be of use and how should I apply them to create a product selector?

lexxwern - Looks like I will have to do a bit of experimenting. I was wondering if there was an off-the-peg solution already out there....

I am building an IE4+/NS4+ solution...so it would help to know if the solution proposed by lexxwern will work in NS4+. I seem to remember that it's implementation of CSS sucked!

ASKER CERTIFIED SOLUTION

CJ_S

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

FalconMaster

Well,

at the moment, my time is not my own, but if you look around on the sourceforge site, I think they might have some links to member pages that are using the api.

I've seen some pretty cool things that have been done with it.

CJ_S

DynAPI is only a way too large set of files IMO, and a pain in the ass to add, remove or change some functionality.

holgrave

ASKER

CJ_S you are too cool! Thank you.

That certainly seems to be the solution.

If you don't mind I will keep the question open a bit longer in case I need to ask you something specific about the code once I have tested it more thoroughly.

I tend to agree with you about DynAPI. It certainly seems to be a bloatware solution! I have never really been one for using large libraries of code but only coding only what is exactly required for the solution in hand.

And I have posted the solution you gave up here - so others may benefit from your knowledge (in case your link gets pulled down:

<html>
<head>
<script language="javascript">
var arrImg = new Array("images/start.gif", "images/starttransparant.gif", "images/img1.gif", "images/img1_transparent.gif", "images/img2.gif", "images/img2_transparent.gif", "images/img3.gif", "images/img3_transparent.gif", "images/img4.gif", "images/img4_transparent.gif", "images/img5.gif", "images/img5_transparent.gif", "images/img6.gif", "images/img6_transparent.gif", "images/end.gif", "images/endtransparant.gif");
var MAXPRELOAD = 4;

function addSlide(sSrc)
{
// ** grabs the source, checks with slides, if not present then load
for(var i=0;i<this.slides.length;i++)
if(this.slides[i].src.substring(this.slides[i].src.length - sSrc.length) == sSrc) return;
this.slides[this.slides.length] = new Image();
this.slides[this.slides.length-1].src = sSrc;
}

function initSlide()
{
document.images["slider1"].src = this.slides[3].src;
document.images["slider2"].src = this.slides[4].src;
document.images["slider3"].src = this.slides[7].src;
}

function slideSlide(bRight)
{
if(!bRight)
{
if(this.iCurLeft<=0)
return;
}
else
{
if((this.iCurLeft+3)*2 > arrImg.length-1)
return;
}

this.iCurLeft += (bRight?1:-1);

if(arrImg.length-1>=(this.iCurLeft+3)*2)
{
this.add(arrImg[(this.iCurLeft+3)*2]);
this.add(arrImg[((this.iCurLeft+3)*2+1)]);
}

document.images["slider1"].src = this.slides[(this.iCurLeft*2)+1].src;
document.images["slider2"].src = this.slides[(this.iCurLeft*2)+2].src;
document.images["slider3"].src = this.slides[(this.iCurLeft*2)+5].src;
}

function oSlider()
{
this.slides = new Array();
this.add = addSlide;
this.iCurLeft = 1;
this.initialize = initSlide;
this.slide = slideSlide;
return this;
}

var iSlide = new oSlider();
function document_onload()
{
// ** preload first couple of images
for(var i=0;i<(arrImg.length>MAXPRELOAD*2?MAXPRELOAD*2:arrImg.length);i++)
iSlide.add(arrImg[i]);

// ** load correct images in the table
iSlide.initialize();
}

window.onload=document_onload;
</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onClick="iSlide.slide(false);return false;">left</a> </td>
<td><img src="" name="slider1" width="50" height="50"></td>
<td><img src="" name="slider2" width="50" height="50"></td>
<td><img src="" name="slider3" width="50" height="50"></td>
<td> <a href="#" onClick="iSlide.slide(true);return false;">right</a></td>
</tr>
</table>

</body>
</html>

CJ_S

One more thing which I remember last night. For maximum performance you haver to set the MAXPRELOAD to 5 instead of 4 Otherwise the first next image won't be preloaded.

CJ

CJ_S

Can we finish this?

CJ

holgrave

ASKER

Yes.

Though I would be grateful if I could ask you brief questions about the submitted code after the question has been closed. I will be working on it for the rest of this week so it shouldn't be hanging around too much longer.

If I refine and modify the code and the functionality of the 'Product Selector' then I will post the finished code up here for others to use.

holgrave

ASKER

CJ_S

I've been trying to separate your code in to a .js file to keep everything neat.

Put I am getting errors.

What am I doing wrong.

test_swap_slide.htm
-------------------
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript" LANGUAGE=JavaScript src="swap_slide.js"></SCRIPT>
</HEAD>

<BODY>

<TABLE border=0 cellPadding=0 cellSpacing=0>
<TR>
<TD><A href="#" onclick="iSlide.slide(false);return false;">left</A> </TD>
<TD><IMG height=50 name=slider1 src="" width=50></TD>
<TD><IMG height=50 name=slider2 src="" width=50></TD>
<TD><IMG height=50 name=slider3 src="" width=50></TD>
<TD> <A href="#" onclick="iSlide.slide(true);return false;">right</A></TD>
</TR>
</TABLE>

</BODY>
</HTML>

swap_slide.js
--------------
<SCRIPT language=javascript>
var arrImg = new Array("images/start.gif", "images/starttransparant.gif", "images/img1.gif", "images/img1_transparent.gif", "images/img2.gif", "images/img2_transparent.gif", "images/img3.gif", "images/img3_transparent.gif", "images/img4.gif", "images/img4_transparent.gif", "images/img5.gif", "images/img5_transparent.gif", "images/img6.gif", "images/img6_transparent.gif", "images/end.gif", "images/endtransparant.gif");
var MAXPRELOAD = 4;

function addSlide(sSrc)
{
// ** grabs the source, checks with slides, if not present then load
for(var i=0;i<this.slides.length;i++)
if(this.slides[i].src.substring(this.slides[i].src.length - sSrc.length) == sSrc) return;
this.slides[this.slides.length] = new Image();
this.slides[this.slides.length-1].src = sSrc;
}

function initSlide()
{
document.images["slider1"].src = this.slides[3].src;
document.images["slider2"].src = this.slides[4].src;
document.images["slider3"].src = this.slides[7].src;
}

function slideSlide(bRight)
{
if(!bRight)
{
if(this.iCurLeft<=0)
return;
}
else
{
if((this.iCurLeft+3)*2 > arrImg.length-1)
return;
}

this.iCurLeft += (bRight?1:-1);

if(arrImg.length-1>=(this.iCurLeft+3)*2)
{
this.add(arrImg[(this.iCurLeft+3)*2]);
this.add(arrImg[((this.iCurLeft+3)*2+1)]);
}

document.images["slider1"].src = this.slides[(this.iCurLeft*2)+1].src;
document.images["slider2"].src = this.slides[(this.iCurLeft*2)+2].src;
document.images["slider3"].src = this.slides[(this.iCurLeft*2)+5].src;
}

function oSlider()
{
this.slides = new Array();
this.add = addSlide;
this.iCurLeft = 1;
this.initialize = initSlide;
this.slide = slideSlide;
return this;
}

var iSlide = new oSlider();
function document_onload()
{
// ** preload first couple of images
for(var i=0;i<(arrImg.length>MAXPRELOAD*2?MAXPRELOAD*2:arrImg.length);i++)
iSlide.add(arrImg[i]);

// ** load correct images in the table
iSlide.initialize();
}

</SCRIPT>

holgrave

ASKER

Never mind - my mistake.