The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    WOW Slider not working

    JAN2XONLINE
    JAN2XONLINE
    Forumember


    Male Posts : 943
    Reputation : 32
    Language : Tagalog, English
    Location : Alberta, Canada

    Solved WOW Slider not working

    Post by JAN2XONLINE January 27th 2013, 1:15 am

    Code:
    <html>
            <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
                <title>Wow slider</title>
            <style>
              #wowslider-container {
    /*  overflow: hidden; */
      zoom: 1;
      position: relative;
      width:960px;
      height:360px;
      margin:0 auto;
      z-index:100;
      border:10px solid #FFFFFF;
    }
    * html #wowslider-container{
      background-image: none;
    }
    #wowslider-images{
      position: relative;
      width:960px;
      height:360px;
      overflow:hidden;
    }
    #wowslider-images a{
      color:transparent;
    }

    #wowslider-images img{
      top:0;
      left:0;
      border:none 0;
    }
    #wowslider-container a{
      text-decoration: none;
      outline: none;
      border: none;
    }

    #wowslider-container  .ws_bullets {
      font-size: 0px;
      padding: 0px;
      float: left;
      position:absolute;
        right: 5px;
        top: 10px;
      z-index:40;
    }
    #wowslider-container .ws_bullets a {
      margin: 0 3px;
      width:21px;
      height:21px;
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet.png);
      float: left;
      text-indent: -1000px;
      position:relative;
    }
    * html #wowslider-container .ws_bullets a {
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet.gif);
    }
    #wowslider-container .ws_bullets a.ws_selbull{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.png);
    }
    #wowslider-container .ws_bullets a:hover{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.png);
    }
    * html #wowslider-container .ws_bullets a:hover{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.gif);
    }
    * html #wowslider-container .ws_bullets a.ws_selbull{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.gif);
    }
    #wowslider-container a.ws_next, #wowslider-container a.ws_prev {
      position:absolute;
      display:none;
      top:50%;
      margin-top:-22px;
      position:absolute;
      z-index: 999;
      height: 45px;
      width: 45px;
      background-image: url(http://wowslider.com/images/demo/flux-slices/engine/arrows.png);
    }
    * html #wowslider-container a.ws_next, * html #wowslider-container a.ws_prev{
      background-image: url(http://wowslider.com/images/demo/flux-slices/engine/arrows.gif);
    }
    #wowslider-container a.ws_next{
      background-position: 100% 0;
      right:10px;
    }
    #wowslider-container a.ws_prev {
      left:10px;
      background-position: 0 0;
    }
    * html #wowslider-container a.ws_next,* html #wowslider-container a.ws_prev{display:block}
    #wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev {display:block}


    #wowslider-container .ws-title{
      position: absolute;
      bottom:25px;
      left: 0px;
      margin-right:30px;
      z-index: 50;
      padding:10px;
      opacity:0.8;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
      color: #000000;
      background:#FFF;
        font-family: Tahoma,Arial,Helvetica;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 18px;
        text-align: left;
        text-shadow: 0 0 2px #FFFFFF; 
      -moz-border-radius:0 8px 8px 0;
      -webkit-border-radius:0 8px 8px 0;
      border-radius:0 8px 8px 0;
      font-size: 14px;
    }
    #wowslider-container .ws-title div{
      padding-top:5px;
      font-size: 12px;
    }#wowslider-container .ws_bullets  a img{
      text-indent:0;
      display:block;
      top:20px;
      left:-120px;
      visibility:hidden;
     
      position:absolute;
        -moz-box-shadow: 0 0 18px #FFF;
        box-shadow: 0 0 18px #FFF;
        border: 3px solid #FFFFFF;
    }
    #wowslider-container .ws_bullets a:hover img{
      visibility:visible;
    }

    #wowslider-container .ws_bulframe div div{
      height:90px;
      overflow:visible;
      position:relative;
    }
    #wowslider-container .ws_bulframe div {
      overflow:hidden;
      position:relative;
      width:240px;
    }
    #wowslider-container .ws_bulframe{
      display:none;
      top:25px;
      overflow:visible;
     
      position:absolute;
      cursor:pointer;
        -moz-box-shadow: 0 0 18px #FFF;
        box-shadow: 0 0 18px #FFF;
        border: 3px solid #FFFFFF;
    }
    #wowslider-container .ws_bulframe span{
      display:block;
      position:absolute;
      top:-9px;
      margin-left:0px;
      left:120px;
      background:url(http://wowslider.com/images/demo/flux-slices/engine/triangle.png);
      width:15px;
      height:6px;
    }
    #vlb {
        display: none;
    }</style>
            </head>
            <body>
      <div id="wowslider-container">
      <div id="wowslider-images">
    <a href="http://animepinoy.4rumer.com/register"><img src="http://i855.photobucket.com/albums/ab117/jan2xonline/WELCOMETOANIMEPINOY2_zpse3df4a1d.jpg"id="wows0"/></a>
    <a href="#"><img src="http://i855.photobucket.com/albums/ab117/jan2xonline/CHOOSEYOURSIDE_zps00a5a8f2.jpg"id="wows1"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/611418.jpg"id="wows2"/></a>

    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/forest_wallpaper21.jpg"id="wows3"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/g7503.jpg"id="wows4"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/ge202.jpg"id="wows5"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/mozh_les.jpg"id="wows6"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/nature_forest_forest_010852_.jpg"id="wows7"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/widescreen_forest_004692_.jpg"id="wows8"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/world_canada_rain_forest_007534_.jpg"id="wows9"/></a>
    </div><div class="ws_bullets">
    <a href="#wows0"</a>
    <a href="#wows1"</a>
    <a href="#wows2"</a>
    <a href="#wows3"</a>
    <a href="#wows4"</a>
    <a href="#wows5"</a>
    <a href="#wows6"</a>
    <a href="#wows7"</a>
    <a href="#wows8"</a>
    <a href="#wows9"</a>
    </div>
    <a id="vlb" href="http://wowslider.com">Div Slider jQuery</a>
      </div>

      <script>/*
     * jQuery Nivo Slider v2.3 fixed 2
     * http://nivo.dev7studios.com
     *
     * Copyright 2010, Gilbert Pellegrom
     * Free to use and abuse under the MIT license.
     * http://www.opensource.org/licenses/mit-license.php
     *
     * Jan 2011 fixed by wowslider.com - random effect selecting bug
     * Dec 2010 fixed by wowslider.com - added position:absolute to slice elements, added nivoRun external function to manual start
     * May 2010 - Pick random effect from specified set of effects by toronegro
     * May 2010 - controlNavThumbsFromRel option added by nerd-sh
     * May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
     * April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk)
     * March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk)
     */
    //////////////////////////////////////////////
    // Obfuscated by Javascript Obfuscator 4.2  //
    // http://javascript-source.com            //
    //////////////////////////////////////////////
    eval((function(x){var d="";var p=0;while(p<x.length){if(x.charAt(p)!="`")d+=x.charAt(p++);else{var l=x.charCodeAt(p+3)-28;if(l>4)d+=d.substr(d.length-x.charCodeAt(p+1)*96-x.charCodeAt(p+2)+3104-l,l);else d+="`";p+=4}}return d})("(function ($) {var NivoSlider = ` 5&element, options` G#settings = $.extend({}, $.fn.n` b%.defaults` V&;var vars = {current` H!:0, ` )#Image:\"\", total` :!s:0, randAnim` 7!running:false, paused` &$stop` &\"}`!-!s`\"3$$`\"+$);` .\".data(\"nivo:vars\",`!Z!` 6%css(\"position\", \"relative\"` :%addClass` `\"`\"U\"\"`\"D\"kids =`!8#.children();kids.each`$!'`#V#` A!`!f!thi`#+#link = \"\";if (!` >!.is(\"img\")) {if (` ,&a` /!` *\"`!P*-imageLink\");` o#` C!;}`!0$` Q\"find` z!:first\");}`!T%Width` A%width()`!U!` 3(= 0`!=$` C*attr(\"` R!` j)Height` >%h` *!` m(` 9$` o'` E+` u\"` T\"\");}`!E+>`$\"$`!m#) {` $)` A&` P(` }#` T%`!Q$` T&` +#` C'` Y#`#]!!= \"\") {link`&*\"display\", \"none\")`#w#` &4vars.`(\"'++;}`\"r\"`)B$.star`(d\" >`\"z!` %5=`'\\!` c() {` 60` 7. - 1`$L!s.`)p( =`*i%` U'`\"\\\"$(kids[` C-])`'3)` 4(`*[!`'|!` C4;} else` 'L`'A0`!A?`(h\"` *7`$F,block\");}`+8(background\", \"url(\" +`#\\\"`!u(`'<#src\") + \") no-repeat\");for (var i = 0; i <`#p'lices; i++`/ $lice`)5$Math.`!<!(`'x* /` T,`&6\"i =`$m(` 5! - 1`'n&append($(\"<div class=\\`+c\"` K!\\\"></div>\"`# \"{left:`!L'* i + \"px\", `!J!:`!M+-`!y(` B(`.l$:\"absolute\"})`%P&` dz` 5$`!-<`&:!`#:%ca`2a!`\"zB` F#\\\"><p></p`!X+`&H#:`*}\", opacity:` },O` 2\"})`$n\"`&84title\")`,C%var ` /!`*^$` :6` s!` '!.substr(0, 1) == \"#\") {` `$$` @\").html();}$(\".`\"@( p\",`.>#` >#` K\";` 9,` <'fadeIn`#Z&animSpeed);}`0v!timer`(I!`36!` @%manualAdvance &&`4G!.leng`0D!1`!t!` U\"setInterval`4A*nivoRun`(i#,` ^!,`(J%, false);}` *&.pauseTime`+u#` 0%dire` u!Nav`%Q-`%M/` D(\\\"><a` 1*prev` 4\"Prev</a` 1-next` <\"Next` =!`&;#`0l*` }(Hide`-G!`$)#` 0(`$P(ide();`2v$over`#+*` A<show(`#4!` *I`!1#}`&6\"a` F\"`\"c#` <'live(\"click\"` s+`(;%running) {return`$f\";}clear`%E%`%]!);`%a$\"\"`4E\"`2p)-= 2;`%J<\"prev\"`!v!`!p&`$;#` x~`!u!`!B=nex`3.!`'*,control`'2\"var nivoC` /\"`*R!`,j0` K%`.V'`%i$`'n#` \\'`2D2`)g'`2N$`!B3Thumbs`!X#child =` Y\"eq(i`'k\"!` 3!.is(\"img\")) {` B$` 4\"find` 7!:firs`\"f!` r9FromRel`+!#`\"##`*(&`)@+` W#\\\" rel=\\\"\" +`14\"\\\"><img src` 0#`!I\"`._\"rel\")` A\" alt=\\\"\\\" /></a>\"`2d&` Fwsrc\").replace`\"S6Search`->'` 1,R` \\\"`!q7`!Ed\" + (i + 1`!(!` v%`0|&`!R% a:eq(\" +`2X)`*2\"+ \")`)P'addClass(\"active\"`1k(` f'`)Gcif ($(this).has`!,+`*,M`)3#css(\"background\", \"url`\"P-Image`%4(`\"h! no-repeat\")`-5/= `!h$`'.(- 1`+X>`#9#`+i0keyboard`+x\"$(window).keypress`1-'event`#U#` '!.keyCode == \"37\"`.~~`/^>`!F39` xa`/:E`#V-pauseOnHover) {`%h#hover`#W'`.;\"` G#d = true;`!6<}`'m+` U*`\"5\"if ` T\"`\"j!\" && !`!T%manualAdvance) {` t$set`!.%` u)`\"H<`!/!);}`,D'`!K!Time`\"w#`\"[#b`0/!nivo:animFinished`),`$J(`\"+%$(kids).each`!R*`*1(is(\"a`*-!` *$`)`!display\", \"none`$N#` S\"kids[`&X-]` ^*` ,5` o,block`&s$`#t,`$@(`#2~`#y7` ,%afterChange.call`#/\";});this`.k!Run =`$6'index, effec`*y$`(k9`!$%` M\" =` U# ||`!T&` -\"`-41`!,!`,vA`\"O#`!8#`(j!};var `!t0` M4nudge`&`\"`/B! =`1<#.data`'8#vars\"`%|\"` ?!&&`2A/==` /\"total` .!s - 1) {`\"N%las` G\"`#q)if ((`%i! ||` ^\"stop)`%p!`!X$`#N3before`$a.if (` S%`10m} else`%G\"`! !`'q!`/!\"` ;p` z*`.c\"` 4p}`$e-++`%-%`$m=`,d$`'B+0;`$E%`!m!showEnd`%2-` J.< 0` ]3`&50` `\"`,c;img`,!`\"i- = ` A6`%(%` )J.f`/}!img:firs`$b%`\"g%controlNav`.R!\"`+}!-` ,& a\",`)H#).removeClass(\"active\");` A1:eq`%/-`#5\"+ \")` i'add` a,`!S+aption`--(`%}/title\") != \"\"`+F#` /!`$C$` :6`4W#tle.substr(0, 1)`'d!#\"`08!` b\"$` @\").html(`!a#`\"T&`!b\"`\"0'`1^)` j\"`1g#`#_(` Q\" p` N'fadeOut`\"Z&animSpeed`4J+`3l$`!L!`!W\";` ,$fadeIn` Q/`1)!`&'$`!+9` k(}`\".7` o8` q3`\")A`*i# i`)!` Z%slice` V'each`4@*var ` A!Width = Math.`,8!`1@#.width() /`2i&` M!s`#8&css({height:\"0px\", opacity:\"0\", `-(&:`,[Q -\" +`2s!`!a$+ i *`!n(-` \"'` Z!px 0%\"});i++;}`'6\"`!x%effect`&D!random`(\"$anims = new Array(\"` s!DownRight\", ` (&Lef` '&Up` 3*Up` 0+` R.` .\"` ?$fol`0-!fade\");`\"|!randAnim =`!U\"[`$;!floor(`$E\"`!z!() * (` =!.leng`\"}!1))]`0(&` `&= undefined`.6$` |'`!9\";}`+N*`#+\".indexOf(\",`+<\"-1`#)+` A,split` J!`!-$.trim`!o\"`!{8`\"*()]);`2S\"running = true`$e5`$B%\" ||`!N,` 4*`$5\" ||`&u\"`#$(` 10` O9`$n!` L;` ?!`.X%meBuff`)z!`)&`)U%s`.0!`* 2`\":>`!\"H` n=._reverse();}` H\"`+<8`0(\"his);` +!`+&\"top:0, bottom:\"`)b!f (i =`%x'`!D#- 1) {setTimeout` {*` o\"animate`+{&100%`+z(1.0\"},` r&`0='\"\"`0=+`-1#trigger(\"nivo:animFinished\"`03\", 100 +`$T%`/:&` ut` 2`%t%+= 50`-($`!E#`%@9Up`'-:`,k$`%a7` 7(` M7`&C<` ;#`'.}` ~H`')~`(#$\"\"`(#%0`')~`')~`')~`'8o`0$>`4W(`%e9`0#C` C\"`&O>`0#Gv`'_f`!*N`'Vw`(*%0`%s%`0P5++`&T&`(j:`#(!}if (v`(-~`(-~`(-~`(q:v`(jAfold`%}3` 6!`'G:`&\"5`%bBvar origWidth =` :\".width(`.e.0px\", `\"~+` H!` 6\"`.Ce` n\"`!P%`$}~`%AZ`!<O`.Egfade`%i4ade`%y$`%?M`%]#`%;!\"`%/\"\", `%1\"`$h=` U$`\"{%`\"Q> * 2`$+W`$L#` bS);}`#f$}`(1!tra`(E!`!B&msg) {if ` }!.console && typeof ` +#.log != \"undefine`)!` 2'` e!;}};` c!stop` {)` ~#!$(element).data`\"S#vars\")` Q!`#b!` %; = true;`\"*!(\"Stop S`#M!\"`!7(art`!00` [dfals`!9'art`!8)`$)&fterLoad.call`,=#};$.fn`'1!` O\"`!])options) {return `\"-!`-(2`!b#`39+` /#`!s'`&M\"\")` l%;}var ` 1& = new N`!J%` j!, `!E$;` [5,` ['`'2\"`\".,.defaults = {`*A\":\"random`)i\"ces:15, `'7%:500, pauseTime:3000, `$p!` n!:0, dire`\"h!Nav:true` %*Hide` 0#ca`\" !` &$ontrol` L&` '&Thumbs:`$w!` &.FromRel` '4Search:\".jpg\"` -.Replace:\"_thumb` ?#keyboard`!D&`\"P!OnHover` ,#manualAdvance`!6%`\"/\"O`*e#0.8, beforeChange:`%_)}, `&e!` %3`$Y!showEnd` ,-las`#o#` ^1Loa` D,`%;#_reverse = [].` &#;})(jQuery);"))// -----------------------------------------------------------------------------------
    // http://wowslider.com/
    // JavaScript Wow Slider is a free software that helps you easily generate delicious
    // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
    // Last updated: 2011-02-15
    //
    //***********************************************
    // Obfuscated by Javascript Obfuscator
    // http://javascript-source.com
    //***********************************************
    var ws_slices=function(options){var $=jQuery;var $new_cont;var $Imgs;var $As;var cur_index=0;this.init=function(aCont){var $container=$(aCont);$new_cont=$("<div id=\""+$(aCont).attr("id")+"-new\"></div>");$container.append($new_cont);$As=$(aCont).find("A");$Imgs=$As.find("img");$new_cont.css({left:(options.outWidth-options.width)/2+"px",top:(options.outHeight-options.height)/2+"px",width:options.width+"px",height:options.height+"px",'background-color':"#FFF",position:"absolute"});$new_cont.append($As);slider=$new_cont.nivoSlider({directionNav:false,keyboardNav:false,controlNav:false,manualAdvance:true,caption:0,effect:"sliceDownRight,sliceDownLeft,sliceUpRight,sliceUpLeft,sliceUpDownRight,sliceUpDownLeft,sliceUpDownRight,sliceUpDownLeft,fold,fold,fold",animSpeed:options.duration});$Imgs.css({border:"none"});$Imgs.show();$As.css({'z-index':30,position:"absolute",left:0,top:0});};this.go=function(index){var res=$new_cont.data("nivoslider").nivoRun(index);if(res){$($Imgs.get(cur_index)).hide();$($Imgs.get(index)).show();cur_index=index;}return res;};};// -----------------------------------------------------------------------------------
    // http://wowslider.com/
    // JavaScript Wow Slider is a free software that helps you easily generate delicious
    // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
    // Last updated: 2011-02-15
    //
    //***********************************************
    // Obfuscated by Javascript Obfuscator
    // http://javascript-source.com
    //***********************************************
    function WowSlider(options){var $=jQuery;options=options||{};var $Elements=$("#wowslider-images A");$Elements.each(function(index){var inner=$(this).html()||"";var pos=inner.indexOf(">",inner);if(pos>=0){$(this).data("descr",inner.substr(pos+1));if(pos<inner.length-1){$(this).html(inner.substr(0,pos+1));}}$(this).css({'font-size':0});});var elementsCount=$Elements.length;var $ws_container=$("#wowslider-container");var frame=$("A#wowslider-frame").get(0);var curIdx=0;function go(index){if(curIdx==index){return;}var current=effect.go(index);if(!current){return;}if(typeof current!="object"){current=$Elements[index];}curIdx=index;go2(index);if(options.caption){setTitle(current);}}function go2(index){if(options.bullets){setBullet(index);}if(frame){frame.setAttribute("href",$Elements.get(index).href);}}var autoPlayTimer;function restartPlay(){stopPlay();if(options.autoPlay){autoPlayTimer=setTimeout(function(){go(curIdx<elementsCount-1?curIdx+1:0);restartPlay();},options.delay+options.duration);}}function stopPlay(){if(autoPlayTimer){clearTimeout(autoPlayTimer);}autoPlayTimer=null;}function forceGo(event,index){stopPlay();event.preventDefault();go(index);restartPlay();}$Elements.find("IMG").css("position","absolute");var effect=new window["ws_"+options.effect](options);effect.init($("#wowslider-images"));$Elements.find("IMG").css("visibility","visible");var ic=c=$("#wowslider-images");var t="";c=t?$("<div></div>"):0;if(c){c.css({position:"absolute",right:"2px",bottom:"2px",padding:"0 0 0 0"});ic.append(c);}if(c&&document.all){var f=$("<iframe src=\"javascript:false\"></iframe>");f.css({position:"absolute",left:0,top:0,width:"100%",height:"100%",filter:"alpha(opacity=0)"});f.attr({scrolling:"no",framespacing:0,border:0,frameBorder:"no"});c.append(f);}var d=c?$(document.createElement("A")):c;if(d){d.css({position:"relative",display:"block",'background-color':"#E4EFEB",color:"#837F80",'font-family':"Lucida Grande,sans-serif",'font-size':"11px",'font-weight':"normal",'font-style':"normal",'-moz-border-radius':"5px",'border-radius':"5px",padding:"1px 5px",width:"auto",height:"auto",margin:"0 0 0 0",outline:"none"});d.attr({href:"ht"+"tp://"+t.toLowerCase()});d.html(t);d.bind("contextmenu",function(eventObject){return false;});c.append(d);}if(options.controls){var $next_photo=$("<a href=\"#\" class=\"ws_next\">"+options.next+"</a>");var $prev_photo=$("<a href=\"#\" class=\"ws_prev\">"+options.prev+"</a>");$ws_container.append($next_photo);$ws_container.append($prev_photo);$next_photo.bind("click",function(e){forceGo(e,curIdx<elementsCount-1?curIdx+1:0);});$prev_photo.bind("click",function(e){forceGo(e,curIdx>0?curIdx-1:elementsCount-1);});}function initBullets(){$bullets_cont=$ws_container.find(".ws_bullets");$bullets=$("a",$bullets_cont);$bullets.click(function(e){forceGo(e,$(e.target).index());});$thumbs=$bullets.find("IMG");if($thumbs.length){var mainFrame=$("<div class=\"ws_bulframe\"/>").appendTo($bullets_cont);var imgContainer=$("<div/>").css({width:$thumbs.length+1+"00%"}).appendTo($("<div/>").appendTo(mainFrame));$thumbs.appendTo(imgContainer);$("<span/>").appendTo(mainFrame);var curIndex=-1;function moveTooltip(index){if(index<0){index=0;}$($bullets.get(curIndex)).removeClass("ws_overbull");$($bullets.get(index)).addClass("ws_overbull");mainFrame.show();var mainCSS={left:$bullets.get(index).offsetLeft-mainFrame.width()/2};var contCSS={left:-$thumbs.get(index).offsetLeft};if(curIndex<0){mainFrame.css(mainCSS);imgContainer.css(contCSS);}else{if(!document.all){mainCSS.opacity=1;}mainFrame.stop().animate(mainCSS,"fast");imgContainer.stop().animate(contCSS,"fast");}curIndex=index;}$bullets.hover(function(){moveTooltip($(this).index());});var hideTime;$bullets_cont.hover(function(){if(hideTime){clearTimeout(hideTime);hideTime=0;}moveTooltip(curIndex);},function(){$bullets.removeClass("ws_overbull");if(document.all){if(!hideTime){hideTime=setTimeout(function(){mainFrame.hide();hideTime=0;},400);}}else{mainFrame.stop().animate({opacity:0},{duration:"fast",complete:function(){mainFrame.hide();}});}});$bullets_cont.click(function(e){forceGo(e,$(e.target).index());});}}function setBullet(new_index){$(".ws_bullets A",$ws_container).each(function(index){if(index==new_index){$(this).addClass("ws_selbull");}else{$(this).removeClass("ws_selbull");}});}if(options.caption){$caption=$("<div class='ws-title' style='display:none'></div>");$ws_container.append($caption);$caption.bind("mouseover",function(e){stopPlay();});$caption.bind("mouseout",function(e){restartPlay();});}function setTitle(A){var title=$("img",A).attr("title");var descr=$(A).data("descr");var $Title=$(".ws-title",$ws_container);$Title.hide();if(title||descr){$Title.html((title?"<span>"+title+"</span>":"")+(descr?"<div>"+descr+"</div>":""));$Title.fadeIn(400,function(){if($.browser.msie){$(this).get(0).style.removeAttribute("filter");}});}}if(options.bullets){initBullets();}go2(0);if(options.caption){setTitle($Elements[0]);}restartPlay();}// -----------------------------------------------------------------------------------
    // http://wowslider.com/
    // JavaScript Wow Slider is a free software that helps you easily generate delicious
    // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
    // Last updated: 2011-02-15
    //
    //***********************************************
    // Obfuscated by Javascript Obfuscator
    // http://javascript-source.com
    //***********************************************

    // init main object
    // jQuery(document).ready - conflicted with some scripts
    // Transition time = 2.4s = 20/10
    // SlideShow delay = 6.5s = 10/10
    var wowSlider = new WowSlider({
      effect:"slices",
      prev:"",
      next:"",
      duration: 10*100,
      delay:50*100,
      outWidth:960,
      outHeight:360,
      width:960,
      height:360,
      caption: true,
      controls:true,
      autoPlay:true,
      bullets:true
    })</script>

            </body>
            </html>

    This is the code I'm using and I put it inside a widget. I placed it on my portal but the transition is not working. I tried to put it on HTML page management and the transition there is fine. I don't know why the transition is not working when it is on a widget. Confused

    Here is my forum portal: http://animepinoy.4rumer.com/
    Here is my HTML PAGE: http://animepinoy.4rumer.com/h1-wow-slider-anime-pinoy-style (it works fine here)
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: WOW Slider not working

    Post by Sanket January 27th 2013, 5:33 am

    You cannot add a complete html page in the widget. It contains css, javascript & the actual html. Only the HTML goes in the widget. Css goes into the stylesheet & the javascript needs to be added separately.

    So what you need to do is this.
    Add this to your forum widget.
    Code:
    <div id="wowslider-container">
      <div id="wowslider-images">
    <a href="http://animepinoy.4rumer.com/register"><img src="http://i855.photobucket.com/albums/ab117/jan2xonline/WELCOMETOANIMEPINOY2_zpse3df4a1d.jpg"id="wows0"/></a>
    <a href="#"><img src="http://i855.photobucket.com/albums/ab117/jan2xonline/CHOOSEYOURSIDE_zps00a5a8f2.jpg"id="wows1"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/611418.jpg"id="wows2"/></a>

    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/forest_wallpaper21.jpg"id="wows3"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/g7503.jpg"id="wows4"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/ge202.jpg"id="wows5"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/mozh_les.jpg"id="wows6"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/nature_forest_forest_010852_.jpg"id="wows7"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/widescreen_forest_004692_.jpg"id="wows8"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/world_canada_rain_forest_007534_.jpg"id="wows9"/></a>
    </div><div class="ws_bullets">
    <a href="#wows0"</a>
    <a href="#wows1"</a>
    <a href="#wows2"</a>
    <a href="#wows3"</a>
    <a href="#wows4"</a>
    <a href="#wows5"</a>
    <a href="#wows6"</a>
    <a href="#wows7"</a>
    <a href="#wows8"</a>
    <a href="#wows9"</a>
    </div>
    <a id="vlb" href="http://wowslider.com">Div Slider jQuery</a>
      </div>

    Add this to your javascript codes management, choose all pages.
    Code:
    eval((function(x){var d="";var p=0;while(p<x.length){if(x.charAt(p)!="`")d+=x.charAt(p++);else{var l=x.charCodeAt(p+3)-28;if(l>4)d+=d.substr(d.length-x.charCodeAt(p+1)*96-x.charCodeAt(p+2)+3104-l,l);else d+="`";p+=4}}return d})("(function ($) {var NivoSlider = ` 5&element, options` G#settings = $.extend({}, $.fn.n` b%.defaults` V&;var vars = {current` H!:0, ` )#Image:\"\", total` :!s:0, randAnim` 7!running:false, paused` &$stop` &\"}`!-!s`\"3$$`\"+$);` .\".data(\"nivo:vars\",`!Z!` 6%css(\"position\", \"relative\"` :%addClass` `\"`\"U\"\"`\"D\"kids =`!8#.children();kids.each`$!'`#V#` A!`!f!thi`#+#link = \"\";if (!` >!.is(\"img\")) {if (` ,&a` /!` *\"`!P*-imageLink\");` o#` C!;}`!0$` Q\"find` z!:first\");}`!T%Width` A%width()`!U!` 3(= 0`!=$` C*attr(\"` R!` j)Height` >%h` *!` m(` 9$` o'` E+` u\"` T\"\");}`!E+>`$\"$`!m#) {` $)` A&` P(` }#` T%`!Q$` T&` +#` C'` Y#`#]!!= \"\") {link`&*\"display\", \"none\")`#w#` &4vars.`(\"'++;}`\"r\"`)B$.star`(d\" >`\"z!` %5=`'\\!` c() {` 60` 7. - 1`$L!s.`)p( =`*i%` U'`\"\\\"$(kids[` C-])`'3)` 4(`*[!`'|!` C4;} else` 'L`'A0`!A?`(h\"` *7`$F,block\");}`+8(background\", \"url(\" +`#\\\"`!u(`'<#src\") + \") no-repeat\");for (var i = 0; i <`#p'lices; i++`/ $lice`)5$Math.`!<!(`'x* /` T,`&6\"i =`$m(` 5! - 1`'n&append($(\"<div class=\\`+c\"` K!\\\"></div>\"`# \"{left:`!L'* i + \"px\", `!J!:`!M+-`!y(` B(`.l$:\"absolute\"})`%P&` dz` 5$`!-<`&:!`#:%ca`2a!`\"zB` F#\\\"><p></p`!X+`&H#:`*}\", opacity:` },O` 2\"})`$n\"`&84title\")`,C%var ` /!`*^$` :6` s!` '!.substr(0, 1) == \"#\") {` `$$` @\").html();}$(\".`\"@( p\",`.>#` >#` K\";` 9,` <'fadeIn`#Z&animSpeed);}`0v!timer`(I!`36!` @%manualAdvance &&`4G!.leng`0D!1`!t!` U\"setInterval`4A*nivoRun`(i#,` ^!,`(J%, false);}` *&.pauseTime`+u#` 0%dire` u!Nav`%Q-`%M/` D(\\\"><a` 1*prev` 4\"Prev</a` 1-next` <\"Next` =!`&;#`0l*` }(Hide`-G!`$)#` 0(`$P(ide();`2v$over`#+*` A<show(`#4!` *I`!1#}`&6\"a` F\"`\"c#` <'live(\"click\"` s+`(;%running) {return`$f\";}clear`%E%`%]!);`%a$\"\"`4E\"`2p)-= 2;`%J<\"prev\"`!v!`!p&`$;#` x~`!u!`!B=nex`3.!`'*,control`'2\"var nivoC` /\"`*R!`,j0` K%`.V'`%i$`'n#` \\'`2D2`)g'`2N$`!B3Thumbs`!X#child =` Y\"eq(i`'k\"!` 3!.is(\"img\")) {` B$` 4\"find` 7!:firs`\"f!` r9FromRel`+!#`\"##`*(&`)@+` W#\\\" rel=\\\"\" +`14\"\\\"><img src` 0#`!I\"`._\"rel\")` A\" alt=\\\"\\\" /></a>\"`2d&` Fwsrc\").replace`\"S6Search`->'` 1,R` \\\"`!q7`!Ed\" + (i + 1`!(!` v%`0|&`!R% a:eq(\" +`2X)`*2\"+ \")`)P'addClass(\"active\"`1k(` f'`)Gcif ($(this).has`!,+`*,M`)3#css(\"background\", \"url`\"P-Image`%4(`\"h! no-repeat\")`-5/= `!h$`'.(- 1`+X>`#9#`+i0keyboard`+x\"$(window).keypress`1-'event`#U#` '!.keyCode == \"37\"`.~~`/^>`!F39` xa`/:E`#V-pauseOnHover) {`%h#hover`#W'`.;\"` G#d = true;`!6<}`'m+` U*`\"5\"if ` T\"`\"j!\" && !`!T%manualAdvance) {` t$set`!.%` u)`\"H<`!/!);}`,D'`!K!Time`\"w#`\"[#b`0/!nivo:animFinished`),`$J(`\"+%$(kids).each`!R*`*1(is(\"a`*-!` *$`)`!display\", \"none`$N#` S\"kids[`&X-]` ^*` ,5` o,block`&s$`#t,`$@(`#2~`#y7` ,%afterChange.call`#/\";});this`.k!Run =`$6'index, effec`*y$`(k9`!$%` M\" =` U# ||`!T&` -\"`-41`!,!`,vA`\"O#`!8#`(j!};var `!t0` M4nudge`&`\"`/B! =`1<#.data`'8#vars\"`%|\"` ?!&&`2A/==` /\"total` .!s - 1) {`\"N%las` G\"`#q)if ((`%i! ||` ^\"stop)`%p!`!X$`#N3before`$a.if (` S%`10m} else`%G\"`! !`'q!`/!\"` ;p` z*`.c\"` 4p}`$e-++`%-%`$m=`,d$`'B+0;`$E%`!m!showEnd`%2-` J.< 0` ]3`&50` `\"`,c;img`,!`\"i- = ` A6`%(%` )J.f`/}!img:firs`$b%`\"g%controlNav`.R!\"`+}!-` ,& a\",`)H#).removeClass(\"active\");` A1:eq`%/-`#5\"+ \")` i'add` a,`!S+aption`--(`%}/title\") != \"\"`+F#` /!`$C$` :6`4W#tle.substr(0, 1)`'d!#\"`08!` b\"$` @\").html(`!a#`\"T&`!b\"`\"0'`1^)` j\"`1g#`#_(` Q\" p` N'fadeOut`\"Z&animSpeed`4J+`3l$`!L!`!W\";` ,$fadeIn` Q/`1)!`&'$`!+9` k(}`\".7` o8` q3`\")A`*i# i`)!` Z%slice` V'each`4@*var ` A!Width = Math.`,8!`1@#.width() /`2i&` M!s`#8&css({height:\"0px\", opacity:\"0\", `-(&:`,[Q -\" +`2s!`!a$+ i *`!n(-` \"'` Z!px 0%\"});i++;}`'6\"`!x%effect`&D!random`(\"$anims = new Array(\"` s!DownRight\", ` (&Lef` '&Up` 3*Up` 0+` R.` .\"` ?$fol`0-!fade\");`\"|!randAnim =`!U\"[`$;!floor(`$E\"`!z!() * (` =!.leng`\"}!1))]`0(&` `&= undefined`.6$` |'`!9\";}`+N*`#+\".indexOf(\",`+<\"-1`#)+` A,split` J!`!-$.trim`!o\"`!{8`\"*()]);`2S\"running = true`$e5`$B%\" ||`!N,` 4*`$5\" ||`&u\"`#$(` 10` O9`$n!` L;` ?!`.X%meBuff`)z!`)&`)U%s`.0!`* 2`\":>`!\"H` n=._reverse();}` H\"`+<8`0(\"his);` +!`+&\"top:0, bottom:\"`)b!f (i =`%x'`!D#- 1) {setTimeout` {*` o\"animate`+{&100%`+z(1.0\"},` r&`0='\"\"`0=+`-1#trigger(\"nivo:animFinished\"`03\", 100 +`$T%`/:&` ut` 2`%t%+= 50`-($`!E#`%@9Up`'-:`,k$`%a7` 7(` M7`&C<` ;#`'.}` ~H`')~`(#$\"\"`(#%0`')~`')~`')~`'8o`0$>`4W(`%e9`0#C` C\"`&O>`0#Gv`'_f`!*N`'Vw`(*%0`%s%`0P5++`&T&`(j:`#(!}if (v`(-~`(-~`(-~`(q:v`(jAfold`%}3` 6!`'G:`&\"5`%bBvar origWidth =` :\".width(`.e.0px\", `\"~+` H!` 6\"`.Ce` n\"`!P%`$}~`%AZ`!<O`.Egfade`%i4ade`%y$`%?M`%]#`%;!\"`%/\"\", `%1\"`$h=` U$`\"{%`\"Q> * 2`$+W`$L#` bS);}`#f$}`(1!tra`(E!`!B&msg) {if ` }!.console && typeof ` +#.log != \"undefine`)!` 2'` e!;}};` c!stop` {)` ~#!$(element).data`\"S#vars\")` Q!`#b!` %; = true;`\"*!(\"Stop S`#M!\"`!7(art`!00` [dfals`!9'art`!8)`$)&fterLoad.call`,=#};$.fn`'1!` O\"`!])options) {return `\"-!`-(2`!b#`39+` /#`!s'`&M\"\")` l%;}var ` 1& = new N`!J%` j!, `!E$;` [5,` ['`'2\"`\".,.defaults = {`*A\":\"random`)i\"ces:15, `'7%:500, pauseTime:3000, `$p!` n!:0, dire`\"h!Nav:true` %*Hide` 0#ca`\" !` &$ontrol` L&` '&Thumbs:`$w!` &.FromRel` '4Search:\".jpg\"` -.Replace:\"_thumb` ?#keyboard`!D&`\"P!OnHover` ,#manualAdvance`!6%`\"/\"O`*e#0.8, beforeChange:`%_)}, `&e!` %3`$Y!showEnd` ,-las`#o#` ^1Loa` D,`%;#_reverse = [].` &#;})(jQuery);"))// -----------------------------------------------------------------------------------
    // http://wowslider.com/
    // JavaScript Wow Slider is a free software that helps you easily generate delicious
    // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
    // Last updated: 2011-02-15
    //
    //***********************************************
    // Obfuscated by Javascript Obfuscator
    // http://javascript-source.com
    //***********************************************
    var ws_slices=function(options){var $=jQuery;var $new_cont;var $Imgs;var $As;var cur_index=0;this.init=function(aCont){var $container=$(aCont);$new_cont=$("<div id=\""+$(aCont).attr("id")+"-new\"></div>");$container.append($new_cont);$As=$(aCont).find("A");$Imgs=$As.find("img");$new_cont.css({left:(options.outWidth-options.width)/2+"px",top:(options.outHeight-options.height)/2+"px",width:options.width+"px",height:options.height+"px",'background-color':"#FFF",position:"absolute"});$new_cont.append($As);slider=$new_cont.nivoSlider({directionNav:false,keyboardNav:false,controlNav:false,manualAdvance:true,caption:0,effect:"sliceDownRight,sliceDownLeft,sliceUpRight,sliceUpLeft,sliceUpDownRight,sliceUpDownLeft,sliceUpDownRight,sliceUpDownLeft,fold,fold,fold",animSpeed:options.duration});$Imgs.css({border:"none"});$Imgs.show();$As.css({'z-index':30,position:"absolute",left:0,top:0});};this.go=function(index){var res=$new_cont.data("nivoslider").nivoRun(index);if(res){$($Imgs.get(cur_index)).hide();$($Imgs.get(index)).show();cur_index=index;}return res;};};// -----------------------------------------------------------------------------------
    // http://wowslider.com/
    // JavaScript Wow Slider is a free software that helps you easily generate delicious
    // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
    // Last updated: 2011-02-15
    //
    //***********************************************
    // Obfuscated by Javascript Obfuscator
    // http://javascript-source.com
    //***********************************************
    function WowSlider(options){var $=jQuery;options=options||{};var $Elements=$("#wowslider-images A");$Elements.each(function(index){var inner=$(this).html()||"";var pos=inner.indexOf(">",inner);if(pos>=0){$(this).data("descr",inner.substr(pos+1));if(pos<inner.length-1){$(this).html(inner.substr(0,pos+1));}}$(this).css({'font-size':0});});var elementsCount=$Elements.length;var $ws_container=$("#wowslider-container");var frame=$("A#wowslider-frame").get(0);var curIdx=0;function go(index){if(curIdx==index){return;}var current=effect.go(index);if(!current){return;}if(typeof current!="object"){current=$Elements[index];}curIdx=index;go2(index);if(options.caption){setTitle(current);}}function go2(index){if(options.bullets){setBullet(index);}if(frame){frame.setAttribute("href",$Elements.get(index).href);}}var autoPlayTimer;function restartPlay(){stopPlay();if(options.autoPlay){autoPlayTimer=setTimeout(function(){go(curIdx<elementsCount-1?curIdx+1:0);restartPlay();},options.delay+options.duration);}}function stopPlay(){if(autoPlayTimer){clearTimeout(autoPlayTimer);}autoPlayTimer=null;}function forceGo(event,index){stopPlay();event.preventDefault();go(index);restartPlay();}$Elements.find("IMG").css("position","absolute");var effect=new window["ws_"+options.effect](options);effect.init($("#wowslider-images"));$Elements.find("IMG").css("visibility","visible");var ic=c=$("#wowslider-images");var t="";c=t?$("<div></div>"):0;if(c){c.css({position:"absolute",right:"2px",bottom:"2px",padding:"0 0 0 0"});ic.append(c);}if(c&&document.all){var f=$("<iframe src=\"javascript:false\"></iframe>");f.css({position:"absolute",left:0,top:0,width:"100%",height:"100%",filter:"alpha(opacity=0)"});f.attr({scrolling:"no",framespacing:0,border:0,frameBorder:"no"});c.append(f);}var d=c?$(document.createElement("A")):c;if(d){d.css({position:"relative",display:"block",'background-color':"#E4EFEB",color:"#837F80",'font-family':"Lucida Grande,sans-serif",'font-size':"11px",'font-weight':"normal",'font-style':"normal",'-moz-border-radius':"5px",'border-radius':"5px",padding:"1px 5px",width:"auto",height:"auto",margin:"0 0 0 0",outline:"none"});d.attr({href:"ht"+"tp://"+t.toLowerCase()});d.html(t);d.bind("contextmenu",function(eventObject){return false;});c.append(d);}if(options.controls){var $next_photo=$("<a href=\"#\" class=\"ws_next\">"+options.next+"</a>");var $prev_photo=$("<a href=\"#\" class=\"ws_prev\">"+options.prev+"</a>");$ws_container.append($next_photo);$ws_container.append($prev_photo);$next_photo.bind("click",function(e){forceGo(e,curIdx<elementsCount-1?curIdx+1:0);});$prev_photo.bind("click",function(e){forceGo(e,curIdx>0?curIdx-1:elementsCount-1);});}function initBullets(){$bullets_cont=$ws_container.find(".ws_bullets");$bullets=$("a",$bullets_cont);$bullets.click(function(e){forceGo(e,$(e.target).index());});$thumbs=$bullets.find("IMG");if($thumbs.length){var mainFrame=$("<div class=\"ws_bulframe\"/>").appendTo($bullets_cont);var imgContainer=$("<div/>").css({width:$thumbs.length+1+"00%"}).appendTo($("<div/>").appendTo(mainFrame));$thumbs.appendTo(imgContainer);$("<span/>").appendTo(mainFrame);var curIndex=-1;function moveTooltip(index){if(index<0){index=0;}$($bullets.get(curIndex)).removeClass("ws_overbull");$($bullets.get(index)).addClass("ws_overbull");mainFrame.show();var mainCSS={left:$bullets.get(index).offsetLeft-mainFrame.width()/2};var contCSS={left:-$thumbs.get(index).offsetLeft};if(curIndex<0){mainFrame.css(mainCSS);imgContainer.css(contCSS);}else{if(!document.all){mainCSS.opacity=1;}mainFrame.stop().animate(mainCSS,"fast");imgContainer.stop().animate(contCSS,"fast");}curIndex=index;}$bullets.hover(function(){moveTooltip($(this).index());});var hideTime;$bullets_cont.hover(function(){if(hideTime){clearTimeout(hideTime);hideTime=0;}moveTooltip(curIndex);},function(){$bullets.removeClass("ws_overbull");if(document.all){if(!hideTime){hideTime=setTimeout(function(){mainFrame.hide();hideTime=0;},400);}}else{mainFrame.stop().animate({opacity:0},{duration:"fast",complete:function(){mainFrame.hide();}});}});$bullets_cont.click(function(e){forceGo(e,$(e.target).index());});}}function setBullet(new_index){$(".ws_bullets A",$ws_container).each(function(index){if(index==new_index){$(this).addClass("ws_selbull");}else{$(this).removeClass("ws_selbull");}});}if(options.caption){$caption=$("<div class='ws-title' style='display:none'></div>");$ws_container.append($caption);$caption.bind("mouseover",function(e){stopPlay();});$caption.bind("mouseout",function(e){restartPlay();});}function setTitle(A){var title=$("img",A).attr("title");var descr=$(A).data("descr");var $Title=$(".ws-title",$ws_container);$Title.hide();if(title||descr){$Title.html((title?"<span>"+title+"</span>":"")+(descr?"<div>"+descr+"</div>":""));$Title.fadeIn(400,function(){if($.browser.msie){$(this).get(0).style.removeAttribute("filter");}});}}if(options.bullets){initBullets();}go2(0);if(options.caption){setTitle($Elements[0]);}restartPlay();}// -----------------------------------------------------------------------------------
    // http://wowslider.com/
    // JavaScript Wow Slider is a free software that helps you easily generate delicious
    // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
    // Last updated: 2011-02-15
    //
    //***********************************************
    // Obfuscated by Javascript Obfuscator
    // http://javascript-source.com
    //***********************************************

    // init main object
    // jQuery(document).ready - conflicted with some scripts
    // Transition time = 2.4s = 20/10
    // SlideShow delay = 6.5s = 10/10
    var wowSlider = new WowSlider({
      effect:"slices",
      prev:"",
      next:"",
      duration: 10*100,
      delay:50*100,
      outWidth:960,
      outHeight:360,
      width:960,
      height:360,
      caption: true,
      controls:true,
      autoPlay:true,
      bullets:true
    })

    Add this to your css now.
    Code:
     #wowslider-container {
    /*  overflow: hidden; */
      zoom: 1;
      position: relative;
      width:960px;
      height:360px;
      margin:0 auto;
      z-index:100;
      border:10px solid #FFFFFF;
    }
    * html #wowslider-container{
      background-image: none;
    }
    #wowslider-images{
      position: relative;
      width:960px;
      height:360px;
      overflow:hidden;
    }
    #wowslider-images a{
      color:transparent;
    }

    #wowslider-images img{
      top:0;
      left:0;
      border:none 0;
    }
    #wowslider-container a{
      text-decoration: none;
      outline: none;
      border: none;
    }

    #wowslider-container  .ws_bullets {
      font-size: 0px;
      padding: 0px;
      float: left;
      position:absolute;
        right: 5px;
        top: 10px;
      z-index:40;
    }
    #wowslider-container .ws_bullets a {
      margin: 0 3px;
      width:21px;
      height:21px;
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet.png);
      float: left;
      text-indent: -1000px;
      position:relative;
    }
    * html #wowslider-container .ws_bullets a {
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet.gif);
    }
    #wowslider-container .ws_bullets a.ws_selbull{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.png);
    }
    #wowslider-container .ws_bullets a:hover{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.png);
    }
    * html #wowslider-container .ws_bullets a:hover{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.gif);
    }
    * html #wowslider-container .ws_bullets a.ws_selbull{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.gif);
    }
    #wowslider-container a.ws_next, #wowslider-container a.ws_prev {
      position:absolute;
      display:none;
      top:50%;
      margin-top:-22px;
      position:absolute;
      z-index: 999;
      height: 45px;
      width: 45px;
      background-image: url(http://wowslider.com/images/demo/flux-slices/engine/arrows.png);
    }
    * html #wowslider-container a.ws_next, * html #wowslider-container a.ws_prev{
      background-image: url(http://wowslider.com/images/demo/flux-slices/engine/arrows.gif);
    }
    #wowslider-container a.ws_next{
      background-position: 100% 0;
      right:10px;
    }
    #wowslider-container a.ws_prev {
      left:10px;
      background-position: 0 0;
    }
    * html #wowslider-container a.ws_next,* html #wowslider-container a.ws_prev{display:block}
    #wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev {display:block}


    #wowslider-container .ws-title{
      position: absolute;
      bottom:25px;
      left: 0px;
      margin-right:30px;
      z-index: 50;
      padding:10px;
      opacity:0.8;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
      color: #000000;
      background:#FFF;
        font-family: Tahoma,Arial,Helvetica;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 18px;
        text-align: left;
        text-shadow: 0 0 2px #FFFFFF;
      -moz-border-radius:0 8px 8px 0;
      -webkit-border-radius:0 8px 8px 0;
      border-radius:0 8px 8px 0;
      font-size: 14px;
    }
    #wowslider-container .ws-title div{
      padding-top:5px;
      font-size: 12px;
    }#wowslider-container .ws_bullets  a img{
      text-indent:0;
      display:block;
      top:20px;
      left:-120px;
      visibility:hidden;
     
      position:absolute;
        -moz-box-shadow: 0 0 18px #FFF;
        box-shadow: 0 0 18px #FFF;
        border: 3px solid #FFFFFF;
    }
    #wowslider-container .ws_bullets a:hover img{
      visibility:visible;
    }

    #wowslider-container .ws_bulframe div div{
      height:90px;
      overflow:visible;
      position:relative;
    }
    #wowslider-container .ws_bulframe div {
      overflow:hidden;
      position:relative;
      width:240px;
    }
    #wowslider-container .ws_bulframe{
      display:none;
      top:25px;
      overflow:visible;
     
      position:absolute;
      cursor:pointer;
        -moz-box-shadow: 0 0 18px #FFF;
        box-shadow: 0 0 18px #FFF;
        border: 3px solid #FFFFFF;
    }
    #wowslider-container .ws_bulframe span{
      display:block;
      position:absolute;
      top:-9px;
      margin-left:0px;
      left:120px;
      background:url(http://wowslider.com/images/demo/flux-slices/engine/triangle.png);
      width:15px;
      height:6px;
    }
    #vlb {
        display: none;
    }

    See it working here on my portal.
    http://testing.4rumer.com/#wows3
    JAN2XONLINE
    JAN2XONLINE
    Forumember


    Male Posts : 943
    Reputation : 32
    Language : Tagalog, English
    Location : Alberta, Canada

    Solved Re: WOW Slider not working

    Post by JAN2XONLINE January 27th 2013, 6:52 am

    Sanket wrote:You cannot add a complete html page in the widget. It contains css, javascript & the actual html. Only the HTML goes in the widget. Css goes into the stylesheet & the javascript needs to be added separately.

    So what you need to do is this.
    Add this to your forum widget.
    Code:
    <div id="wowslider-container">
      <div id="wowslider-images">
    <a href="http://animepinoy.4rumer.com/register"><img src="http://i855.photobucket.com/albums/ab117/jan2xonline/WELCOMETOANIMEPINOY2_zpse3df4a1d.jpg"id="wows0"/></a>
    <a href="#"><img src="http://i855.photobucket.com/albums/ab117/jan2xonline/CHOOSEYOURSIDE_zps00a5a8f2.jpg"id="wows1"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/611418.jpg"id="wows2"/></a>

    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/forest_wallpaper21.jpg"id="wows3"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/g7503.jpg"id="wows4"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/ge202.jpg"id="wows5"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/mozh_les.jpg"id="wows6"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/nature_forest_forest_010852_.jpg"id="wows7"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/widescreen_forest_004692_.jpg"id="wows8"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/world_canada_rain_forest_007534_.jpg"id="wows9"/></a>
    </div><div class="ws_bullets">
    <a href="#wows0"</a>
    <a href="#wows1"</a>
    <a href="#wows2"</a>
    <a href="#wows3"</a>
    <a href="#wows4"</a>
    <a href="#wows5"</a>
    <a href="#wows6"</a>
    <a href="#wows7"</a>
    <a href="#wows8"</a>
    <a href="#wows9"</a>
    </div>
    <a id="vlb" href="http://wowslider.com">Div Slider jQuery</a>
      </div>

    Add this to your javascript codes management, choose all pages.
    Code:
    eval((function(x){var d="";var p=0;while(p<x.length){if(x.charAt(p)!="`")d+=x.charAt(p++);else{var l=x.charCodeAt(p+3)-28;if(l>4)d+=d.substr(d.length-x.charCodeAt(p+1)*96-x.charCodeAt(p+2)+3104-l,l);else d+="`";p+=4}}return d})("(function ($) {var NivoSlider = ` 5&element, options` G#settings = $.extend({}, $.fn.n` b%.defaults` V&;var vars = {current` H!:0, ` )#Image:\"\", total` :!s:0, randAnim` 7!running:false, paused` &$stop` &\"}`!-!s`\"3$$`\"+$);` .\".data(\"nivo:vars\",`!Z!` 6%css(\"position\", \"relative\"` :%addClass` `\"`\"U\"\"`\"D\"kids =`!8#.children();kids.each`$!'`#V#` A!`!f!thi`#+#link = \"\";if (!` >!.is(\"img\")) {if (` ,&a` /!` *\"`!P*-imageLink\");` o#` C!;}`!0$` Q\"find` z!:first\");}`!T%Width` A%width()`!U!` 3(= 0`!=$` C*attr(\"` R!` j)Height` >%h` *!` m(` 9$` o'` E+` u\"` T\"\");}`!E+>`$\"$`!m#) {` $)` A&` P(` }#` T%`!Q$` T&` +#` C'` Y#`#]!!= \"\") {link`&*\"display\", \"none\")`#w#` &4vars.`(\"'++;}`\"r\"`)B$.star`(d\" >`\"z!` %5=`'\\!` c() {` 60` 7. - 1`$L!s.`)p( =`*i%` U'`\"\\\"$(kids[` C-])`'3)` 4(`*[!`'|!` C4;} else` 'L`'A0`!A?`(h\"` *7`$F,block\");}`+8(background\", \"url(\" +`#\\\"`!u(`'<#src\") + \") no-repeat\");for (var i = 0; i <`#p'lices; i++`/ $lice`)5$Math.`!<!(`'x* /` T,`&6\"i =`$m(` 5! - 1`'n&append($(\"<div class=\\`+c\"` K!\\\"></div>\"`# \"{left:`!L'* i + \"px\", `!J!:`!M+-`!y(` B(`.l$:\"absolute\"})`%P&` dz` 5$`!-<`&:!`#:%ca`2a!`\"zB` F#\\\"><p></p`!X+`&H#:`*}\", opacity:` },O` 2\"})`$n\"`&84title\")`,C%var ` /!`*^$` :6` s!` '!.substr(0, 1) == \"#\") {` `$$` @\").html();}$(\".`\"@( p\",`.>#` >#` K\";` 9,` <'fadeIn`#Z&animSpeed);}`0v!timer`(I!`36!` @%manualAdvance &&`4G!.leng`0D!1`!t!` U\"setInterval`4A*nivoRun`(i#,` ^!,`(J%, false);}` *&.pauseTime`+u#` 0%dire` u!Nav`%Q-`%M/` D(\\\"><a` 1*prev` 4\"Prev</a` 1-next` <\"Next` =!`&;#`0l*` }(Hide`-G!`$)#` 0(`$P(ide();`2v$over`#+*` A<show(`#4!` *I`!1#}`&6\"a` F\"`\"c#` <'live(\"click\"` s+`(;%running) {return`$f\";}clear`%E%`%]!);`%a$\"\"`4E\"`2p)-= 2;`%J<\"prev\"`!v!`!p&`$;#` x~`!u!`!B=nex`3.!`'*,control`'2\"var nivoC` /\"`*R!`,j0` K%`.V'`%i$`'n#` \\'`2D2`)g'`2N$`!B3Thumbs`!X#child =` Y\"eq(i`'k\"!` 3!.is(\"img\")) {` B$` 4\"find` 7!:firs`\"f!` r9FromRel`+!#`\"##`*(&`)@+` W#\\\" rel=\\\"\" +`14\"\\\"><img src` 0#`!I\"`._\"rel\")` A\" alt=\\\"\\\" /></a>\"`2d&` Fwsrc\").replace`\"S6Search`->'` 1,R` \\\"`!q7`!Ed\" + (i + 1`!(!` v%`0|&`!R% a:eq(\" +`2X)`*2\"+ \")`)P'addClass(\"active\"`1k(` f'`)Gcif ($(this).has`!,+`*,M`)3#css(\"background\", \"url`\"P-Image`%4(`\"h! no-repeat\")`-5/= `!h$`'.(- 1`+X>`#9#`+i0keyboard`+x\"$(window).keypress`1-'event`#U#` '!.keyCode == \"37\"`.~~`/^>`!F39` xa`/:E`#V-pauseOnHover) {`%h#hover`#W'`.;\"` G#d = true;`!6<}`'m+` U*`\"5\"if ` T\"`\"j!\" && !`!T%manualAdvance) {` t$set`!.%` u)`\"H<`!/!);}`,D'`!K!Time`\"w#`\"[#b`0/!nivo:animFinished`),`$J(`\"+%$(kids).each`!R*`*1(is(\"a`*-!` *$`)`!display\", \"none`$N#` S\"kids[`&X-]` ^*` ,5` o,block`&s$`#t,`$@(`#2~`#y7` ,%afterChange.call`#/\";});this`.k!Run =`$6'index, effec`*y$`(k9`!$%` M\" =` U# ||`!T&` -\"`-41`!,!`,vA`\"O#`!8#`(j!};var `!t0` M4nudge`&`\"`/B! =`1<#.data`'8#vars\"`%|\"` ?!&&`2A/==` /\"total` .!s - 1) {`\"N%las` G\"`#q)if ((`%i! ||` ^\"stop)`%p!`!X$`#N3before`$a.if (` S%`10m} else`%G\"`! !`'q!`/!\"` ;p` z*`.c\"` 4p}`$e-++`%-%`$m=`,d$`'B+0;`$E%`!m!showEnd`%2-` J.< 0` ]3`&50` `\"`,c;img`,!`\"i- = ` A6`%(%` )J.f`/}!img:firs`$b%`\"g%controlNav`.R!\"`+}!-` ,& a\",`)H#).removeClass(\"active\");` A1:eq`%/-`#5\"+ \")` i'add` a,`!S+aption`--(`%}/title\") != \"\"`+F#` /!`$C$` :6`4W#tle.substr(0, 1)`'d!#\"`08!` b\"$` @\").html(`!a#`\"T&`!b\"`\"0'`1^)` j\"`1g#`#_(` Q\" p` N'fadeOut`\"Z&animSpeed`4J+`3l$`!L!`!W\";` ,$fadeIn` Q/`1)!`&'$`!+9` k(}`\".7` o8` q3`\")A`*i# i`)!` Z%slice` V'each`4@*var ` A!Width = Math.`,8!`1@#.width() /`2i&` M!s`#8&css({height:\"0px\", opacity:\"0\", `-(&:`,[Q -\" +`2s!`!a$+ i *`!n(-` \"'` Z!px 0%\"});i++;}`'6\"`!x%effect`&D!random`(\"$anims = new Array(\"` s!DownRight\", ` (&Lef` '&Up` 3*Up` 0+` R.` .\"` ?$fol`0-!fade\");`\"|!randAnim =`!U\"[`$;!floor(`$E\"`!z!() * (` =!.leng`\"}!1))]`0(&` `&= undefined`.6$` |'`!9\";}`+N*`#+\".indexOf(\",`+<\"-1`#)+` A,split` J!`!-$.trim`!o\"`!{8`\"*()]);`2S\"running = true`$e5`$B%\" ||`!N,` 4*`$5\" ||`&u\"`#$(` 10` O9`$n!` L;` ?!`.X%meBuff`)z!`)&`)U%s`.0!`* 2`\":>`!\"H` n=._reverse();}` H\"`+<8`0(\"his);` +!`+&\"top:0, bottom:\"`)b!f (i =`%x'`!D#- 1) {setTimeout` {*` o\"animate`+{&100%`+z(1.0\"},` r&`0='\"\"`0=+`-1#trigger(\"nivo:animFinished\"`03\", 100 +`$T%`/:&` ut` 2`%t%+= 50`-($`!E#`%@9Up`'-:`,k$`%a7` 7(` M7`&C<` ;#`'.}` ~H`')~`(#$\"\"`(#%0`')~`')~`')~`'8o`0$>`4W(`%e9`0#C` C\"`&O>`0#Gv`'_f`!*N`'Vw`(*%0`%s%`0P5++`&T&`(j:`#(!}if (v`(-~`(-~`(-~`(q:v`(jAfold`%}3` 6!`'G:`&\"5`%bBvar origWidth =` :\".width(`.e.0px\", `\"~+` H!` 6\"`.Ce` n\"`!P%`$}~`%AZ`!<O`.Egfade`%i4ade`%y$`%?M`%]#`%;!\"`%/\"\", `%1\"`$h=` U$`\"{%`\"Q> * 2`$+W`$L#` bS);}`#f$}`(1!tra`(E!`!B&msg) {if ` }!.console && typeof ` +#.log != \"undefine`)!` 2'` e!;}};` c!stop` {)` ~#!$(element).data`\"S#vars\")` Q!`#b!` %; = true;`\"*!(\"Stop S`#M!\"`!7(art`!00` [dfals`!9'art`!8)`$)&fterLoad.call`,=#};$.fn`'1!` O\"`!])options) {return `\"-!`-(2`!b#`39+` /#`!s'`&M\"\")` l%;}var ` 1& = new N`!J%` j!, `!E$;` [5,` ['`'2\"`\".,.defaults = {`*A\":\"random`)i\"ces:15, `'7%:500, pauseTime:3000, `$p!` n!:0, dire`\"h!Nav:true` %*Hide` 0#ca`\" !` &$ontrol` L&` '&Thumbs:`$w!` &.FromRel` '4Search:\".jpg\"` -.Replace:\"_thumb` ?#keyboard`!D&`\"P!OnHover` ,#manualAdvance`!6%`\"/\"O`*e#0.8, beforeChange:`%_)}, `&e!` %3`$Y!showEnd` ,-las`#o#` ^1Loa` D,`%;#_reverse = [].` &#;})(jQuery);"))// -----------------------------------------------------------------------------------
    // http://wowslider.com/
    // JavaScript Wow Slider is a free software that helps you easily generate delicious
    // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
    // Last updated: 2011-02-15
    //
    //***********************************************
    // Obfuscated by Javascript Obfuscator
    // http://javascript-source.com
    //***********************************************
    var ws_slices=function(options){var $=jQuery;var $new_cont;var $Imgs;var $As;var cur_index=0;this.init=function(aCont){var $container=$(aCont);$new_cont=$("<div id=\""+$(aCont).attr("id")+"-new\"></div>");$container.append($new_cont);$As=$(aCont).find("A");$Imgs=$As.find("img");$new_cont.css({left:(options.outWidth-options.width)/2+"px",top:(options.outHeight-options.height)/2+"px",width:options.width+"px",height:options.height+"px",'background-color':"#FFF",position:"absolute"});$new_cont.append($As);slider=$new_cont.nivoSlider({directionNav:false,keyboardNav:false,controlNav:false,manualAdvance:true,caption:0,effect:"sliceDownRight,sliceDownLeft,sliceUpRight,sliceUpLeft,sliceUpDownRight,sliceUpDownLeft,sliceUpDownRight,sliceUpDownLeft,fold,fold,fold",animSpeed:options.duration});$Imgs.css({border:"none"});$Imgs.show();$As.css({'z-index':30,position:"absolute",left:0,top:0});};this.go=function(index){var res=$new_cont.data("nivoslider").nivoRun(index);if(res){$($Imgs.get(cur_index)).hide();$($Imgs.get(index)).show();cur_index=index;}return res;};};// -----------------------------------------------------------------------------------
    // http://wowslider.com/
    // JavaScript Wow Slider is a free software that helps you easily generate delicious
    // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
    // Last updated: 2011-02-15
    //
    //***********************************************
    // Obfuscated by Javascript Obfuscator
    // http://javascript-source.com
    //***********************************************
    function WowSlider(options){var $=jQuery;options=options||{};var $Elements=$("#wowslider-images A");$Elements.each(function(index){var inner=$(this).html()||"";var pos=inner.indexOf(">",inner);if(pos>=0){$(this).data("descr",inner.substr(pos+1));if(pos<inner.length-1){$(this).html(inner.substr(0,pos+1));}}$(this).css({'font-size':0});});var elementsCount=$Elements.length;var $ws_container=$("#wowslider-container");var frame=$("A#wowslider-frame").get(0);var curIdx=0;function go(index){if(curIdx==index){return;}var current=effect.go(index);if(!current){return;}if(typeof current!="object"){current=$Elements[index];}curIdx=index;go2(index);if(options.caption){setTitle(current);}}function go2(index){if(options.bullets){setBullet(index);}if(frame){frame.setAttribute("href",$Elements.get(index).href);}}var autoPlayTimer;function restartPlay(){stopPlay();if(options.autoPlay){autoPlayTimer=setTimeout(function(){go(curIdx<elementsCount-1?curIdx+1:0);restartPlay();},options.delay+options.duration);}}function stopPlay(){if(autoPlayTimer){clearTimeout(autoPlayTimer);}autoPlayTimer=null;}function forceGo(event,index){stopPlay();event.preventDefault();go(index);restartPlay();}$Elements.find("IMG").css("position","absolute");var effect=new window["ws_"+options.effect](options);effect.init($("#wowslider-images"));$Elements.find("IMG").css("visibility","visible");var ic=c=$("#wowslider-images");var t="";c=t?$("<div></div>"):0;if(c){c.css({position:"absolute",right:"2px",bottom:"2px",padding:"0 0 0 0"});ic.append(c);}if(c&&document.all){var f=$("<iframe src=\"javascript:false\"></iframe>");f.css({position:"absolute",left:0,top:0,width:"100%",height:"100%",filter:"alpha(opacity=0)"});f.attr({scrolling:"no",framespacing:0,border:0,frameBorder:"no"});c.append(f);}var d=c?$(document.createElement("A")):c;if(d){d.css({position:"relative",display:"block",'background-color':"#E4EFEB",color:"#837F80",'font-family':"Lucida Grande,sans-serif",'font-size':"11px",'font-weight':"normal",'font-style':"normal",'-moz-border-radius':"5px",'border-radius':"5px",padding:"1px 5px",width:"auto",height:"auto",margin:"0 0 0 0",outline:"none"});d.attr({href:"ht"+"tp://"+t.toLowerCase()});d.html(t);d.bind("contextmenu",function(eventObject){return false;});c.append(d);}if(options.controls){var $next_photo=$("<a href=\"#\" class=\"ws_next\">"+options.next+"</a>");var $prev_photo=$("<a href=\"#\" class=\"ws_prev\">"+options.prev+"</a>");$ws_container.append($next_photo);$ws_container.append($prev_photo);$next_photo.bind("click",function(e){forceGo(e,curIdx<elementsCount-1?curIdx+1:0);});$prev_photo.bind("click",function(e){forceGo(e,curIdx>0?curIdx-1:elementsCount-1);});}function initBullets(){$bullets_cont=$ws_container.find(".ws_bullets");$bullets=$("a",$bullets_cont);$bullets.click(function(e){forceGo(e,$(e.target).index());});$thumbs=$bullets.find("IMG");if($thumbs.length){var mainFrame=$("<div class=\"ws_bulframe\"/>").appendTo($bullets_cont);var imgContainer=$("<div/>").css({width:$thumbs.length+1+"00%"}).appendTo($("<div/>").appendTo(mainFrame));$thumbs.appendTo(imgContainer);$("<span/>").appendTo(mainFrame);var curIndex=-1;function moveTooltip(index){if(index<0){index=0;}$($bullets.get(curIndex)).removeClass("ws_overbull");$($bullets.get(index)).addClass("ws_overbull");mainFrame.show();var mainCSS={left:$bullets.get(index).offsetLeft-mainFrame.width()/2};var contCSS={left:-$thumbs.get(index).offsetLeft};if(curIndex<0){mainFrame.css(mainCSS);imgContainer.css(contCSS);}else{if(!document.all){mainCSS.opacity=1;}mainFrame.stop().animate(mainCSS,"fast");imgContainer.stop().animate(contCSS,"fast");}curIndex=index;}$bullets.hover(function(){moveTooltip($(this).index());});var hideTime;$bullets_cont.hover(function(){if(hideTime){clearTimeout(hideTime);hideTime=0;}moveTooltip(curIndex);},function(){$bullets.removeClass("ws_overbull");if(document.all){if(!hideTime){hideTime=setTimeout(function(){mainFrame.hide();hideTime=0;},400);}}else{mainFrame.stop().animate({opacity:0},{duration:"fast",complete:function(){mainFrame.hide();}});}});$bullets_cont.click(function(e){forceGo(e,$(e.target).index());});}}function setBullet(new_index){$(".ws_bullets A",$ws_container).each(function(index){if(index==new_index){$(this).addClass("ws_selbull");}else{$(this).removeClass("ws_selbull");}});}if(options.caption){$caption=$("<div class='ws-title' style='display:none'></div>");$ws_container.append($caption);$caption.bind("mouseover",function(e){stopPlay();});$caption.bind("mouseout",function(e){restartPlay();});}function setTitle(A){var title=$("img",A).attr("title");var descr=$(A).data("descr");var $Title=$(".ws-title",$ws_container);$Title.hide();if(title||descr){$Title.html((title?"<span>"+title+"</span>":"")+(descr?"<div>"+descr+"</div>":""));$Title.fadeIn(400,function(){if($.browser.msie){$(this).get(0).style.removeAttribute("filter");}});}}if(options.bullets){initBullets();}go2(0);if(options.caption){setTitle($Elements[0]);}restartPlay();}// -----------------------------------------------------------------------------------
    // http://wowslider.com/
    // JavaScript Wow Slider is a free software that helps you easily generate delicious
    // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
    // Last updated: 2011-02-15
    //
    //***********************************************
    // Obfuscated by Javascript Obfuscator
    // http://javascript-source.com
    //***********************************************

    // init main object
    // jQuery(document).ready - conflicted with some scripts
    // Transition time = 2.4s = 20/10
    // SlideShow delay = 6.5s = 10/10
    var wowSlider = new WowSlider({
      effect:"slices",
      prev:"",
      next:"",
      duration: 10*100,
      delay:50*100,
      outWidth:960,
      outHeight:360,
      width:960,
      height:360,
      caption: true,
      controls:true,
      autoPlay:true,
      bullets:true
    })

    Add this to your css now.
    Code:
     #wowslider-container {
    /*  overflow: hidden; */
      zoom: 1;
      position: relative;
      width:960px;
      height:360px;
      margin:0 auto;
      z-index:100;
      border:10px solid #FFFFFF;
    }
    * html #wowslider-container{
      background-image: none;
    }
    #wowslider-images{
      position: relative;
      width:960px;
      height:360px;
      overflow:hidden;
    }
    #wowslider-images a{
      color:transparent;
    }

    #wowslider-images img{
      top:0;
      left:0;
      border:none 0;
    }
    #wowslider-container a{
      text-decoration: none;
      outline: none;
      border: none;
    }

    #wowslider-container  .ws_bullets {
      font-size: 0px;
      padding: 0px;
      float: left;
      position:absolute;
        right: 5px;
        top: 10px;
      z-index:40;
    }
    #wowslider-container .ws_bullets a {
      margin: 0 3px;
      width:21px;
      height:21px;
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet.png);
      float: left;
      text-indent: -1000px;
      position:relative;
    }
    * html #wowslider-container .ws_bullets a {
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet.gif);
    }
    #wowslider-container .ws_bullets a.ws_selbull{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.png);
    }
    #wowslider-container .ws_bullets a:hover{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.png);
    }
    * html #wowslider-container .ws_bullets a:hover{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.gif);
    }
    * html #wowslider-container .ws_bullets a.ws_selbull{
      background: url(http://wowslider.com/images/demo/flux-slices/engine/bullet_active.gif);
    }
    #wowslider-container a.ws_next, #wowslider-container a.ws_prev {
      position:absolute;
      display:none;
      top:50%;
      margin-top:-22px;
      position:absolute;
      z-index: 999;
      height: 45px;
      width: 45px;
      background-image: url(http://wowslider.com/images/demo/flux-slices/engine/arrows.png);
    }
    * html #wowslider-container a.ws_next, * html #wowslider-container a.ws_prev{
      background-image: url(http://wowslider.com/images/demo/flux-slices/engine/arrows.gif);
    }
    #wowslider-container a.ws_next{
      background-position: 100% 0;
      right:10px;
    }
    #wowslider-container a.ws_prev {
      left:10px;
      background-position: 0 0;
    }
    * html #wowslider-container a.ws_next,* html #wowslider-container a.ws_prev{display:block}
    #wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev {display:block}


    #wowslider-container .ws-title{
      position: absolute;
      bottom:25px;
      left: 0px;
      margin-right:30px;
      z-index: 50;
      padding:10px;
      opacity:0.8;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
      color: #000000;
      background:#FFF;
        font-family: Tahoma,Arial,Helvetica;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 18px;
        text-align: left;
        text-shadow: 0 0 2px #FFFFFF;
      -moz-border-radius:0 8px 8px 0;
      -webkit-border-radius:0 8px 8px 0;
      border-radius:0 8px 8px 0;
      font-size: 14px;
    }
    #wowslider-container .ws-title div{
      padding-top:5px;
      font-size: 12px;
    }#wowslider-container .ws_bullets  a img{
      text-indent:0;
      display:block;
      top:20px;
      left:-120px;
      visibility:hidden;
     
      position:absolute;
        -moz-box-shadow: 0 0 18px #FFF;
        box-shadow: 0 0 18px #FFF;
        border: 3px solid #FFFFFF;
    }
    #wowslider-container .ws_bullets a:hover img{
      visibility:visible;
    }

    #wowslider-container .ws_bulframe div div{
      height:90px;
      overflow:visible;
      position:relative;
    }
    #wowslider-container .ws_bulframe div {
      overflow:hidden;
      position:relative;
      width:240px;
    }
    #wowslider-container .ws_bulframe{
      display:none;
      top:25px;
      overflow:visible;
     
      position:absolute;
      cursor:pointer;
        -moz-box-shadow: 0 0 18px #FFF;
        box-shadow: 0 0 18px #FFF;
        border: 3px solid #FFFFFF;
    }
    #wowslider-container .ws_bulframe span{
      display:block;
      position:absolute;
      top:-9px;
      margin-left:0px;
      left:120px;
      background:url(http://wowslider.com/images/demo/flux-slices/engine/triangle.png);
      width:15px;
      height:6px;
    }
    #vlb {
        display: none;
    }

    See it working here on my portal.
    http://testing.4rumer.com/#wows3

    Still not working sir. The one in your forum is also not working.
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: WOW Slider not working

    Post by Sanket January 27th 2013, 8:27 am

    Its working for me.

    I have just taken your codes directly as you gave. Where did you get these codes from?
    JAN2XONLINE
    JAN2XONLINE
    Forumember


    Male Posts : 943
    Reputation : 32
    Language : Tagalog, English
    Location : Alberta, Canada

    Solved Re: WOW Slider not working

    Post by JAN2XONLINE January 27th 2013, 8:57 am

    zenzo
    zenzo
    Forumember


    Posts : 564
    Reputation : 13
    Language : english,tagalog
    Location : philippines

    Solved Re: WOW Slider not working

    Post by zenzo January 27th 2013, 9:03 am

    i thinks its working now

    ive been their and registered
    JAN2XONLINE
    JAN2XONLINE
    Forumember


    Male Posts : 943
    Reputation : 32
    Language : Tagalog, English
    Location : Alberta, Canada

    Solved Re: WOW Slider not working

    Post by JAN2XONLINE January 27th 2013, 9:36 am

    ^
    It is still not working for me. Confused

    I'm talking about the one on the portal page.

    Edit: I'm just going to use NIVO Slider. Thanks for all the help though. Very Happy
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: WOW Slider not working

    Post by Sanket January 27th 2013, 1:00 pm

    Topic Solved & Locked

      Current date/time is November 13th 2024, 4:46 pm