Log in

View Full Version : How to place two slideshows next to each other?


myameego
01-26-2012, 03:31 PM
Hi,

This is my site at the moment in testing: http://whnpf.perdu.servertrust.com/

I have the ideal layout of my slides underneath the actual slide itself. My problem is, everytime I copy the code and place it in again, for some reason the slide goes to the next line and not next to the other slide.

Here is my code for the current slide:


<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script>
<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js">
</script>
<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
border: 1px solid GREY;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
height: 262px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>
<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>
<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>
<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>
<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>
</div>
</div>


Any help would be greatly appreciated, thank you :)
vwphillips
01-26-2012, 04:23 PM
<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
float:left;
border: 1px solid GREY;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
height: 262px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>
myameego
01-26-2012, 04:33 PM
Thank you very much that worked! However, I copied and pasted the code again 3 times, and now the slides are just still images and do not have the button arrows like the first one, you can see on the website in testing: http://whnpf.perdu.servertrust.com/

Thank you very much in advance!
vwphillips
01-27-2012, 02:26 PM
try


<!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[*/

.slider {
position:relative;overflow:hidden;width:310px;height:260px;border:solid red 1px;float:left;
}

.slide {
position:absolute;left:opx;top:0px;width:1310px;height:260px;
}

.slide IMG{
width:310px;height:260px;float:left;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

var Slider={

init:function(o){
var id=o.ID,obj=document.getElementById(id),ms=o.Duration,ms=typeof(ms)=='number'&&ms>=0?ms:1000,div=document.createElement('div'),slide=obj.getElementsByTagName('DIV')[0],imgs=slide.getElementsByTagName('IMG'),buts=o.Buttons,but,b,z0=0;
div.style.position='absolute';
div.style.left='0px';
div.style.top='0px';

Slider[id]={slide:slide,imgs:imgs,ms:ms,cnt:0,buts:[]};
if (buts){
but=document.createElement('IMG');
but.style.position='absolute';
for (;z0<2;z0++){
if (buts[z0]){
b=but.cloneNode(false);
b.src=buts[z0][0];
b.style.left=buts[z0][1]+'px';
b.style.top=buts[z0][2]+'px';
Slider.addevt(b,'mouseup','Next',id,z0>0?1:-1);
obj.appendChild(b);
Slider[id].buts[z0]=b;
}
}
}
Slider.Next(id,-1);
},

Next:function(id,ud){
var oop=Slider[id],cnt=oop.cnt+ud,imgs=oop.imgs,lgth=imgs.length-1;
if (oop.buts[0]){
Slider.opacity(oop.buts[0],cnt<=0?50:100);
}
if (oop.buts[1]){
Slider.opacity(oop.buts[1],cnt>=lgth?50:100);
}
cnt=Math.min(Math.max(cnt,0),lgth);
clearTimeout(oop.dly)
oop.cnt=cnt;
this.animate('left',oop.slide,oop.slide.offsetLeft,-imgs[cnt].offsetLeft,new Date(),oop.ms,oop.dly);
},

animate:function(mde,obj,f,t,srt,mS,dly){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style[mde]=now+'px';
}
if (ms<mS){
dly=setTimeout(function(){ oop.animate(mde,obj,f,t,srt,mS,dly); },10);
}
else {
obj.style[mde]=t+'px';
}
},

opacity:function(obj,opc){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
},

addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
}

}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){

Slider.init({
ID:'slider1',
Duration:2000,
Buttons:[['http://whnpf.perdu.servertrust.com/v/vspfiles/assets/images/backward.jpg',100,210],['http://whnpf.perdu.servertrust.com/v/vspfiles/assets/images/forward.jpg',170,210]]
});

Slider.init({
ID:'slider2',
Duration:1000,
Buttons:[['http://whnpf.perdu.servertrust.com/v/vspfiles/assets/images/backward.jpg',100,210],['http://whnpf.perdu.servertrust.com/v/vspfiles/assets/images/forward.jpg',170,210]]
});

}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

/*]]>*/
</script>
</head>

<body>

<div id="slider1" class="slider" >
<div class="slide" >
<img src="http://whnpf.perdu.servertrust.com/v/vspfiles/assets/images/HOTDEALS-WIIBUNDLE.jpg" alt="img" />
<img src="http://whnpf.perdu.servertrust.com/v/vspfiles/assets/images/HOTDEALS-LEATHERCASE.jpg" alt="img" />
</div>
</div>

<div id="slider2" class="slider" >
<div class="slide" >
<img src="http://whnpf.perdu.servertrust.com/v/vspfiles/assets/images/HOTDEALS-WIIBUNDLE.jpg" alt="img" />
<img src="http://whnpf.perdu.servertrust.com/v/vspfiles/assets/images/HOTDEALS-LEATHERCASE.jpg" alt="img" />
</div>
</div>


</body>

</html>