Log in

View Full Version : Horizontal Image/Text Link viewer


rwkiii
04-09-2012, 08:51 PM
I've searched here on DD, but not finding quite what I'm looking for. I don't want an animated scroller or marquee. I have a product detail page that shows everything about a particular product. I also have logic that pulls limited detail from the database of approximately 12 other products that are similar to the one being shown in detail.

I only want to display a small image and product title for each of the similar products. A user could click on any one of these images or titles and the details page would load for that item (I have this code logic in place). I just need to display these items gracefully and only about 4 or 5 will fit on the width of the screen. I want the user to be able to click left or right to display these items.

<< Img1/Link1 Img2/Link2 Img3/Link3 Img4/Link4 >>

Clicking left would give:

<< Img2/Link2 Img3/Link3 Img4/Link4 Img5/Link5 >>

Etc...

Each of the Img/Link columns would be approximately 200px wide and 250px in height, give or take.

If the user clicks left, an entire column comes into view from the left and one disappears on the right. If the user clicks all the way to the last item, the next item to display would be the first one in the list. Likewise, if the user clicks right all the way to the first item in the list the next item would be the last one. In other words, the scroll would wrap.

Maybe I missed something here - is anyone aware of such a script?
vwphillips
04-10-2012, 07:37 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
position:relative;left:450px;top:50px;width:400px;height:85px;border:solid red 1px;
}

#tst IMG {
width:100px;height:75px;float:left;margin-Left:5px;
}

.frame {
position:relative;left:0px;top:0px;width:100px;height:75px;background-Color:#FFCC66;border:solid red 1px;float:left;margin-Left:5px;
}



/*]]>*/
</style>

</head>

<body>
<input type="button" name="" value="Fwd" onmouseup="S.Step(1);" />
<input type="button" name="" value="Back" onmouseup="S.Step(-1);" />
<div id="tst" >
<div >
<div class="frame" >0</div>
<div class="frame" >1</div>
<div class="frame" >2</div>
<div class="frame" >3</div>
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Step Carousel
// by Vic Phillips


function StepCarousel(o){
var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','left','height','offsetTop','offsetHeight']:['left','top','width','offsetLeft','offsetWidth'],obj=document.getElementById(o.ID),ary=o.ImageArray,ms=o.StepDuration,hold=o.AutoHold,days=o.DaysPersistence,sf=o.StartFrame,srt=o.AutoStart,pms=o.PreloadDurati on,ud=o.Direction,pag=o.Paginate,add=o.AddEvents,slide=obj.getElementsByTagName('DIV')[0];
oop.mde=mde;
oop.obj=obj;
oop.slide=slide;
oop.ms=typeof(ms)=='number'?ms:1000;
oop.hold=typeof(hold)=='number'?hold:oop.ms*2;
oop.srt=typeof(srt)=='number'?srt:false;
oop.pms=typeof(pms)=='number'?pms:5000;
oop.nme=o.ID+'=';
oop.days=typeof(days)=='number'&&oop.cookie?days:false;
oop.ctr=o.Center;
oop.cnt=typeof(sf)=='number'?sf:0;
oop.ud=typeof(ud)=='string'&&ud.charAt(0).toUpperCase()=='C'?-1:1;
oop.auto=false;
oop.pag=typeof(pag)=='object'&&oop.page?pag:false;
oop.preload(o.CommonClass);
}

StepCarousel.prototype={

GoTo:function(nu,cng){
var oop=this;
oop.Pause();
if (oop.ary[nu]&&nu!=oop.cnt){
oop.ud=cng===true?nu>oop.cnt?1:-1:oop.ud;
oop.Step(0,nu);
}
},

Auto:function(ms,hold){
var oop=this;
oop.hold=typeof(hold)=='number'?hold:oop.hold;
oop.Pause();
oop.to=setTimeout(function(){ oop.Step(oop.ud,null,true); },ms||200);
},

Pause:function(ms){
this.auto=false;
clearTimeout(this.to);
},

Step:function(ud,cnt,auto){
var oop=this,ary=oop.ary,ud=typeof(ud)=='number'?ud>0?1:-1:oop.ud,cnt=typeof(cnt)=='number'?cnt:oop.cnt+ud;
if (typeof(ary[cnt])!='number'){
cnt=ud>0?0:ary.length-1;
oop.now+=oop.sz*(ud>0?1:-1);
}
oop.cnt=cnt;
oop.auto=auto===true;
clearTimeout(oop.dly);
this.animate(oop.mde[0],oop.now,ary[cnt],new Date(),oop.ms);
},

animate:function(mde,f,t,srt,mS){
var oop=this,cnt=oop.cnt,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
oop.now=Math.max(now,f<0||t<0?now:0);
oop.slide.style[mde]=oop.now+'px';
}
if (ms<mS){
oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS); },10);
}
else {
oop.now=t;
oop.slide.style[mde]=t+'px';
if (oop.auto){
oop.Auto(oop.hold);
}
}
},

preload:function(cls){
var oop=this,s=oop.slide,clds=s.childNodes,img,ary=[],clone,z0=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
img=[clds[z0],clds[z0].nodeName.toUpperCase()=='IMG'?clds[z0]:clds[z0].getElementsByTagName('IMG')[0],new Image()];
if (img[1]){
img[2].src=img[1].src;
}
ary.push(img);
}
}
oop.clds=[];
oop.preloadck(ary,new Date(),oop.pms);
},

preloadck:function(ary,date,ms){
var oop=this,z0=0,z1=0;
for (;z0<ary.length;z0++){
if (ary[z0][2].src&&ary[z0][2].width<40&&new Date()-date<ms){
return setTimeout(function(){ oop.preloadck(ary,date,ms); },100);
}
}
for (;z1<ary.length;z1++){
if (ary[z1][2].src&&ary[z1][2].width<40){
ary[z1][0].parentNode.removeChild(ary[z1][0]);
}
else {
oop.clds.push(ary[z1][0].nodeName.toUpperCase()=='A'?ary[z1][0].getElementsByTagName('IMG')[0]:ary[z1][0]);
}
}
oop.init();
},

init:function(){
var oop=this,mde=oop.mde,obj=oop.obj,slide=oop.slide,clds=oop.clds,sz,ary=[],clone,nu=oop.days&&oop.cookie(oop.nme)?oop.cookie(oop.nme)*1:oop.cnt,z0=0;
obj.style.overflow='hidden';
slide.style.position='absolute';
slide.style[mde[2]]='3000px';
for (;z0<clds.length;z0++){
ary.push(-clds[z0][mde[3]]+(oop.ctr!==false?(obj[mde[4]]-clds[z0][mde[4]])/2:0));
sz=clds[z0][mde[3]]+clds[z0][mde[4]];
}
slide.style[mde[2]]=sz+5+'px';
clone=slide.cloneNode(true);
clone.style[mde[1]]='0px';
clone.style[mde[0]]=-sz+'px';
slide.appendChild(clone);
clone=clone.cloneNode(true);
clone.style[mde[0]]=sz+'px';
slide.appendChild(clone);
oop.ary=ary;
oop.sz=sz;
oop.cnt=ary[nu]?nu:0;
oop.now=ary[oop.cnt];
slide.style[mde[0]]=oop.now+'px';
if (oop.srt){
oop.Auto(oop.srt);
}
}

}


var S=new StepCarousel({
ID:'tst',
StepDuration:500,
Center:false,
PreloadDuration:5000
});


/*]]>*/
</script>

</body>

</html>