Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post

    Having slideshow transparent

    Hello, I need to implement a transparent slideshow of images in my website. The problem is that NIVOSLIDER adds a background (white) in the container. I already tried many plugins and all of them insert a background which I cannot remove!

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Quote Originally Posted by coroa2 View Post
    Hello, I need to implement a transparent slideshow of images in my website. The problem is that NIVOSLIDER adds a background (white) in the container. I already tried many plugins and all of them insert a background which I cannot remove!
    We need to see some code, and a link to the site. And a better notion of what you mean by 'transparent'. Do you mean that an image just pops up in the page, and the page is otherwise undisturbed ?
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    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[*/
    
    #tst {
      position:relative;left:100px;top:100px;width:200px;height:150px;border:solid red 1px;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    
    <input type="button" name="" value="Pause" onmouseup="zxcFadeSS.Pause('tst');" />
    <input type="button" name="" value="Auto" onmouseup="zxcFadeSS.Auto('tst');" />
    <input type="button" name="" value="Next" onmouseup="zxcFadeSS.Next('tst',1);" />
    <input type="button" name="" value="Back" onmouseup="zxcFadeSS.Next('tst',-1);" />
    <input type="button" name="" value="GoTo 0" onmouseup="zxcFadeSS.GoTo('tst',0);" />
    <input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSS.GoTo('tst',1);" />
    <input type="button" name="" value="GoTo 2" onmouseup="zxcFadeSS.GoTo('tst',2);" />
    
    
    <div id="tst" onmouseover="zxcFadeSS.Pause('tst');" onmouseout="zxcFadeSS.Auto('tst');" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif" alt="img" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif" alt="img" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.gif" alt="img" />
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Fade Slide Show. (26-August-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFadeSS ={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.ary[n]){
       this.rotate(o,n);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ParentID,ms=o.FadeDuration,hold=o.AutoHold,srt=o.AutoStart,ctr=o.CenterImages===true,p=document.getElementById(id),imgs=p?p.getElementsByTagName('IMG'):[];
      if (imgs[1]){
       p.style.overflow='hidden';
       var ary=[],w=p.offsetWidth,h=p.offsetHeight,z0=0;
       for (;z0<3;z0++){
        imgs[z0].style.position='absolute';
        imgs[z0].style.left=(ctr?(w-imgs[z0].width)/2:0)+'px';
        imgs[z0].style.top=(z0>0?-3000:ctr?(h-imgs[z0].height)/2:0)+'px';
        ary[z0]=[imgs[z0],new Image(),z0>0?0:100];
        ary[z0][1].src=imgs[z0].src;
       }
       o.id=id;
       o.ary=ary;
       o.w=w;
       o.h=h;
       o.ctr=ctr;
       o.ms=ms;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.n=0;
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
    
      }
     },
    
     rotate:function(o,auto){
      clearTimeout(o.to);
      var n=o.n,lgth=o.ary.length-1;
      o.auto=auto===true;
      n=o.auto?n+1:auto;
      n=n>lgth?0:n<0?lgth:n;
      if (o.ary[n][1].width>40){
       typeof(o.OnFade)=='function'?o.OnFade(n):null;
       this.animate(o,o.ary[o.n],o.ary[o.n][2],0,new Date(),o.ms);
       this.animate(o,o.ary[n],o.ary[n][2],100,new Date(),o.ms);
       o.ary[o.n][0].style.zIndex='0';
       o.ary[n][0].style.zIndex='1';
       o.ary[n][0].style.left=(o.ctr?(o.w-o.ary[n][0].width)/2:0)+'px';
       o.ary[n][0].style.top=(o.ctr?(o.h-o.ary[n][0].height)/2:0)+'px';
       o.n=n;
      }
      else {
       o.ary.splice(n,1);
       o.auto?this.Auto(o.id):null;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS,lst){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=Math.max(n,0);
       oop.opac(a[0],a[2]);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,lst); },10);
      }
      else {
       typeof(o.OnComplete)=='function'?o.OnComplete(n):null;
       t==100&&o.auto?oop.Auto(o.id,o.hold):null;
       t==0?a[0].style.top='-3000px':null;
      }
     },
    
     opac:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     }
    
    }
    
    zxcFadeSS.init({
     ParentID:'tst',     // the unique ID name of the image.                              (string)
     FadeDuration:500,   //(optional) the fade duration in milli sceconds.                (number, default = 1000)
     AutoHold:2000,      //(optional) the auto rotation hold delay in milli sceconds.     (number, default = FadeDuration*4)
     AutoStart:1000,     //(optional) the auto rotation start  delay in milli sceconds.   (number, default = FadeDuration*4)
     CenterImages :true,  //(optional) true = center the images in the parent DIV.         (boolean, default = false = left and top = 0px)
     OnFade:function(n){ //(optional) a function to call when starting fade of new image. (function, default = no function)
     },
     OnComplete:function(n){ //(optional) a function to call when fade in is complete.    (function, default = no function)
      // n =the current imasge index.
     }
    });
    
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I dont know what your are saying cause I checked your own website and there is a transparent slideshow on top and it is working fine! The site I looked into is http://www.sitepor500.com.br

    tHE transparency is good even in my IE 8. What problem are you getting?
    Last edited by VIPStephan; 08-27-2013 at 01:22 PM. Reason: removed link


  •  

    Posting Permissions

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