SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there datadriven,

    Quote Originally Posted by datadriven View Post
    So how easy is SlideJS to implement?
    Very easy. It comes with a folder full of examples which you can tweak and pull apart.

    Quote Originally Posted by datadriven View Post
    Can I overlay a graphic on the corner, so the sliding page appears to go beneath the image?
    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.

    Quote Originally Posted by datadriven View Post
    Is there something else anyone would recommend?
    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...ry-slider.html

    Quote Originally Posted by datadriven View Post
    I'm also concerned that it really is browser compatible (the majors)
    It will be. It's based on jQuery which does a wonderful job of ironing out browser inconsistencies.

    Quote Originally Posted by datadriven View Post
    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?
    I just looked at this page http://slidesjs.com/examples/images-with-captions/ with JavaScript turned off and unfortunately it is dead on arrival!

    Quote Originally Posted by datadriven View Post
    Do all slideshows operated on javascript or can it be done another way?
    It can be done another way. Here's a good tutorial: http://net.tutsplus.com/tutorials/ja...ut-javascript/

    I hope that helps.

  3. #3
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    I hope that helps.
    Did, thank you much, Pullo.

    Quote Originally Posted by Pullo View Post
    (on placing a corner graphic overtop)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.
    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?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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>

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

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

    Hope that helps.

  6. #6
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Pullo, and vwphillips. Big help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •