Solved

Product Selector

Posted on 2002-06-06
12
800 Views
Last Modified: 2006-11-17
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.
0
Comment
Question by:holgrave
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 7059310
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
0
 
LVL 2

Expert Comment

by:FalconMaster
ID: 7059757
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
0
 
LVL 1

Author Comment

by:holgrave
ID: 7060017
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!
0
 
LVL 22

Accepted Solution

by:
CJ_S earned 400 total points
ID: 7060366
Here's a sample I just created for you, it does exactly what you want. I made sme images and called them img1.gif and img1transparent.gif. I just put some colors in them, but if you use real images then you would see the difference. I also added a little placeholder as the first and last item... best thing is to add an empty picture there

http://www.soft-trax.com/HTML/Samples/slideshow/swap_slide.htm
0
 
LVL 2

Expert Comment

by:FalconMaster
ID: 7060447
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.
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 7061315
DynAPI is only a way too large set of files IMO, and a pain in the ass to add, remove or change some functionality.
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 1

Author Comment

by:holgrave
ID: 7061411
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>&nbsp;</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>&nbsp;<a href="#" onClick="iSlide.slide(true);return false;">right</a></td>
   </tr>
  </table>


 </body>
</html>

0
 
LVL 22

Expert Comment

by:CJ_S
ID: 7061420
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
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 7081763
Can we finish this?

CJ
0
 
LVL 1

Author Comment

by:holgrave
ID: 7083662
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.
0
 
LVL 1

Author Comment

by:holgrave
ID: 7084093
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>&nbsp;</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>&nbsp;<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>
0
 
LVL 1

Author Comment

by:holgrave
ID: 7086290
Never mind - my mistake.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now