WOW Slider not working

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)

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

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