SlidesJS & Getting on Track with Slideshows

Found http://slidesjs.com/ and was hoping to get some real feedback, to even find out if it is what I’m looking for. Seems free, which is great. (donation)

I have virtually zero javascript experience, except for some basic character counts and pop up winodws, etc.,

  • So how easy is SlideJS to implement?
  • Can I overlay a graphic on the corner, so the sliding page appears to go beneath the image?
    - Is there something else anyone would recommend?
  • I’m also concerned that it really is browser compatible (the majors)
  • I’m assuming if javascript is turned off, the slide opens and stays static. Assuming rightly or wrongly and what is typical with most slideshows?

Do all slideshows operated on javascript or can it be done another way?

Hi there datadriven,

Very easy. It comes with a folder full of examples which you can tweak and pull apart.

I would think so. It would just be a matter of positioning the image with CSS and setting the correct z-index, no?
To be on the safe side however, you’ll need to try this out.

I love Galleria. It is so very flexible and well documented: http://galleria.io/
You can also get a good idea of what else is about here: http://www.tripwiremagazine.com/2012/11/jquery-slider.html

It will be. It’s based on jQuery which does a wonderful job of ironing out browser inconsistencies.

I just looked at this page http://slidesjs.com/examples/images-with-captions/ with JavaScript turned off and unfortunately it is dead on arrival!

It can be done another way. Here’s a good tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/building-an-auto-scrolling-slideshow-that-works-with-and-without-javascript/

I hope that helps.

Did, thank you much, Pullo.

That occured, but wouldn’t that be absolute position? And I’m trying to determine upfront if one type of slideshow would better accomodate this for any reason. Might the makeup of a slideshow itself affect this in terms of design/usability?

<!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[*/
/*
	Resets defualt browser settings
	reset.css
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }

/*
	Page style
*/
body {
	font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
	letter-spacing:0;
	color:#434343;
	background:#efefef url(../img/background.png) repeat top center;
	padding:20px 0;
	position:relative;
	text-shadow:0 1px 0 rgba(255,255,255,.8);
	-webkit-font-smoothing: subpixel-antialiased;
}

#container {
	width:580px;
	padding:10px;
	margin:0 auto;
	position:relative;
	z-index:0;
}

.example {
    left:200px;
	width:600px;
	height:350px;
	position:relative;
}

#example {
    left:0px;
    top:0px;
	width:600px;
	height:350px;
	position:relative;
}

#ribbon {
	position:absolute;
	top:-3px;
	left:-15px;
	z-index:500;
}

#frame {
	position:absolute;
	z-index:0;
	width:739px;
	height:341px;
	top:-3px;
	left:-80px;
}

/*
	Slideshow
*/

#slides {
	position:absolute;
	top:15px;
	left:4px;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:570px;
	overflow:hidden;
	position:relative;
	display:block;
}

.slide IMG{
	width:600px;
	height:350px;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container div.slide {
	width:570px;
	height:270px;
	display:block;
}


/*
	Next/prev buttons
*/

#prev {
	position:absolute;
	top:107px;
	left:-20px;
	width:24px;
	height:43px;
	display:block;
    cursor:pointer;
	z-index:101;
}

#next {
	position:absolute;
	top:107px;
	left:600px;
	width:24px;
	height:43px;
	display:block;
    cursor:pointer;
	z-index:101;
}


/*
	Pagination
*/

.pagination {
	margin:26px auto 0;
	width:100px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

/*
	Caption
*/

.caption {
	z-index:500;
	position:absolute;
	top:5px;
	left:5px;
	height:70px;
	padding:5px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:100px;
	font-size:1.3em;
	line-height:1.33;
	color:#fff;
	border-top:1px solid #000;
	text-shadow:none;
}

/*
	Footer
*/

#footer {
	text-align:center;
	width:580px;
	margin-top:9px;
	padding:4.5px 0 18px;
	border-top:1px solid #dfdfdf;
}

#footer p {
	margin:4.5px 0;
	font-size:1.0em;
}

/*
	Anchors
*/

a:link,a:visited {
	color:#599100;
	text-decoration:none;
}

a:hover,a:active {
	color:#599100;
	text-decoration:underline;
}
/*]]>*/
</style></head>

<body>
  	<div class="example">
		<div id="example">
 					<div class="slide">
						<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
						<div class="caption" style="bottom:0">
							<p>Happy Bokeh Thursday!</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
						<div class="caption">
							<p>Taxi</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
						<div class="caption">
							<p>Happy Bokeh raining Day</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
						<div class="caption">
							<p>We Eat Light</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
						<div class="caption">
							<p>&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
						<div class="caption">
							<p>twelve.inch</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
						<div class="caption">
							<p>Save my love for loneliness</p>
						</div>
					</div>
			</div>
			<img id="prev" src="http://slidesjs.com/examples/images-with-captions/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
 			<img id="next" src="http://slidesjs.com/examples/images-with-captions/img/arrow-next.png" width="24" height="43" alt="Arrow Next">
		</div>

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

var zxcSlider={

 init:function(o){
  var id=o.SliderID,ms=o.SlideDuration,hold=o.AutoHold,srt=o.AutoStart,eary=o.AddEvents,p=document.getElementById(id),w=p.offsetWidth,h=p.offsetHeight,clds=p.childNodes,d,ary=[],ms=typeof(ms)=='number'?ms:1000,z0=0,z1=0;
  p.style.overflow='hidden';
  for (;z0<clds.length;z0++){
   if (clds[z0].nodeType==1){
    clds[z0].style.position='absolute';
    clds[z0].style.left=(ary.length>0?w:0)+'px';
    clds[z0].style.top='0px';
    clds[z0].style.width=w+'px';
    clds[z0].style.height=h+'px';
    d=clds[z0].getElementsByTagName('DIV')[0];
    if (d){
     clds[z0].removeChild(d)
    }
    ary.push([clds[z0],d||document.createElement('A'),'dly'+z0]);
   }
  }
  for (;z1<ary.length;z1++){
   ary[z1][1].style.visibility=z1>0?'hidden':'visible';
   p.appendChild(ary[z1][1]);
  }
  o=zxcSlider['zxc'+id]={
   id:id,
   mde:['left','offsetLeft'],
   ary:ary,
   lgth:ary.length-1,
   mve:w,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*4,
   ud:1,
   cnt:0
  }
  this.addevents(o,eary);
  if (typeof(srt)=='number'){
   this.Auto(id,srt);
  }
 },

 Next:function(id,ud){
  var o=zxcSlider['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   o.ud=ud;
   this.slide(o,o.cnt+ud);
  }
 },

 Auto:function(id,ms){
  var oop=this,o=zxcSlider['zxc'+id];
  if (o){
   o.to=setTimeout(function(){ oop.slide(o,true); },ms||200);
  }
 },

 Pause:function(id){
  var o=zxcSlider['zxc'+id];
  if (o){
   clearTimeout(o.to);
  }
 },

 slide:function(o,nu){
  this.Pause(o.id);
  o.auto=nu===true;
  if (o.auto){
   nu=o.cnt+o.ud;
  }
  nu=nu<0?o.lgth:nu>o.lgth?0:nu;
  var f=o.ary[o.cnt][0][o.mde[1]],t=f+o.mve*(o.ud>0?-1:1);
  clearTimeout(o[o.ary[o.cnt][2]]);
  this.slider(o,o.ary[o.cnt],f,t,new Date(),o.ms*Math.abs((f-t)/o.mve));
  o.ary[o.cnt][1].style.visibility='hidden';
  f=o.mve*(o.ud>0?1:-1);
  clearTimeout(o[o.ary[nu][2]]);
  this.slider(o,o.ary[nu],f,0,new Date(),o.ms);
  o.cnt=nu;
 },

 slider:function(o,ary,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   ary[0].style[o.mde[0]]=now+'px';
  }
  if (ms<mS){
   o[ary[2]]=setTimeout(function(){ oop.slider(o,ary,f,t,srt,mS); },10);
  }
  else {
   ary[0].style[o.mde[0]]=t+'px';
   if (t==0){
    ary[1].style.visibility='visible';
    if (o.auto){
     oop.Auto(o.id,o.hold);
    }
   }
  }
 },

 addevents:function(o,ary){
  if (typeof(ary)=='object'&&ary.constructor==Array){
   for (var obj,t,z0=0;z0<ary.length;z0++){
    obj=document.getElementById(ary[z0][0]);
    t=ary[z0][1];
    if (obj&&(t=='mouseover'||t=='mouseout'||t=='mouseup'||t=='mousedown'||t=='click')&&this[ary[z0][2]]){
     this.addevt(obj,t,ary[z0][2],o.id,ary[z0][3]);
    }
   }


  }
 },

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


}

zxcSlider.init({
 SliderID:'example',  // the unique ID name of the slider parent DIV.                        (string)
 SlideDuration:1000,  //(optional) the slide duration in milli seconds.                      (number, default = 1000)
 AutoHold:2000,       //(optional) the auto rotate 'hold' delay.                             (number, default = SlideDuration*4)
 AutoStart:1000,      //(optional) the auto rotate 'start' delay on initialization.          (number, default = no auto start)
 AddEvents:[          //(optional) an array of arrays defining rthe event calls to be added. (array, default = in line events)
  // field 0 = the unique ID name of the element.
  // field 1 = the event type.
  // field 2 = the script function to call.
  // field 3 = (optional) the parameter to pass to the function.
  ['example','mouseover','Pause'],
  ['example','mouseout','Auto'],
  ['prev','mouseup','Next',-1],
  ['next','mouseup','Next',1]
 ]
});
/*]]>*/
</script></body>

</html>

Hi there,

Regarding the point as to whether you can overlay a graphic on the corner of the slide show, so the sliding page appears to go beneath the image:

I have found an example of this:
http://slidesjs.com/examples/images-with-captions/

If you download SlidesJs from their website, you get a zip file called “sides.zip”
If you unpack this and navigate to Slides -> examples -> images-with-captions, then the index file contained in this folder is the same a sthe link above.

The way they have done this is to use a transparent png file, position it absolutely and set the z-index, like this:

#ribbon {
  position: absolute;
  top: -3px;
  left: -15px;
  z-index: 500;
}

Hope that helps.

Thanks a lot Pullo, and vwphillips. Big help.