WOW Slider - help Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

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
2 posters

    WOW Slider - help

    felicity4us2
    felicity4us2
    felicity4us2
    Forumember


    Posts : 345
    Reputation : 9
    Language : english
    • Post n°1

    In progress WOW Slider - help

    Post by felicity4us2 February 21st 2012, 11:34 pm

    Hi, I am trying to put a slide show from wowslider on our board in a new html page. Our url www.igdid.com/

    I have copied their code, css, and then -there is code for script.js and jquery.js - (I am not sure where to put these codes), but I have pretty much tried everywhere - and nothing seems to work. I have put this slide show on my website - no problem, but can't seem to figure out how to put it on our board - like I said, on an html page.

    Can anyone help - is this even possible?
    • Back to top
    Nera.
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -
    • Post n°2

    In progress Re: WOW Slider - help

    Post by Nera. February 23rd 2012, 10:21 am

    Hi,

    It is possible.

    Here is the whole setup/coding of for your HTML page. Just make sure that the dollar in the script at the bottom doesn't get deformed. If that happens save it a fiew times until it's saved correctly.

    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="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/1293441583_nature_forest_morning_in_the_forest_015232_.jpg" alt="Fallen tree: jQuery Image Slider HTML" title="Fallen tree" id="wows0"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/2685176_b18ba54c.jpg" alt="Forest glade : How To Add jQuery Slider To HTML" title="Forest glade" id="wows1"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/611418.jpg" alt="In the woods : jQuery Div Slider" title="In the woods" id="wows2"/>rays of light show through the trees</a>

    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/forest_wallpaper21.jpg" alt="The road in the woods : jQuery Slider Div Horizontal" title="The road in the woods" id="wows3"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/g7503.jpg" alt="Sapling : jQuery HTML Slider" title="Sapling" id="wows4"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/ge202.jpg" alt="Beauty spot : jQuery Slider HTML" title="Beauty spot" id="wows5"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/mozh_les.jpg" alt="Forested hills : HTML Slider jQuery" title="Forested hills" id="wows6"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/nature_forest_forest_010852_.jpg" alt="Swamp in the woods : Horizontal Div Slider jQuery" title="Swamp in the woods" id="wows7"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/widescreen_forest_004692_.jpg" alt="Fire in the woods: jQuery Div Slider Example" title="Fire in the woods" id="wows8"/></a>
    <a href="#"><img src="http://wowslider.com/images/demo/flux-slices/data/images/world_canada_rain_forest_007534_.jpg" alt="Morning mist over the forest : jQuery Div Slider Plugin" title="Morning mist over the forest" id="wows9"/></a>
    </div><div class="ws_bullets">
    <a href="#wows0" title="Fallen tree"><img src="http://wowslider.com/images/demo/flux-slices/data/tooltips/1293441583_nature_forest_morning_in_the_forest_015232_.jpg" alt="Fallen tree"/>jQuery Div Slider</a>
    <a href="#wows1" title="Forest glade"><img src="http://wowslider.com/images/demo/flux-slices/data/tooltips/2685176_b18ba54c.jpg" alt="Forest glade : jQuery HTML Page Slider"/>How To Add jQuery Slider To HTML</a>
    <a href="#wows2" title="In the woods"><img src="http://wowslider.com/images/demo/flux-slices/data/tooltips/611418.jpg" alt="In the woods :jQuery Slider For HTML"/>Simple jQuery HTML Slider</a>
    <a href="#wows3" title="The road in the woods"><img src="http://wowslider.com/images/demo/flux-slices/data/tooltips/forest_wallpaper21.jpg" alt="The road in the woods : Div Slider Using jQuery"/> jQuery HTML Content Slider</a>

    <a href="#wows4" title="Sapling"><img src="http://wowslider.com/images/demo/flux-slices/data/tooltips/g7503.jpg" alt="Sapling : jQuery Slider To Scroll Div"/>jQuery Slider To Scroll Div</a>
    <a href="#wows5" title="Beauty spot"><img src="http://wowslider.com/images/demo/flux-slices/data/tooltips/ge202.jpg" alt="Beauty spot : jQuery Ui Div Slider"/>jQuery Vertical Div Slider</a>
    <a href="#wows6" title="Forested hills"><img src="http://wowslider.com/images/demo/flux-slices/data/tooltips/mozh_les.jpg" alt="Forested hills : jQuery Div Slider Plugin"/>jQuery Slider For Div</a>
    <a href="#wows7" title="Swamp in the woods"><img src="http://wowslider.com/images/demo/flux-slices/data/tooltips/nature_forest_forest_010852_.jpg" alt="Swamp in the woods : jQuery Div Content Slider"/>Horizontal Div Slider jQuery</a>
    <a href="#wows8" title="Fire in the woods"><img src="images/demo/flux-slices/data/tooltips/widescreen_forest_004692_.jpg" alt="Fire in the woods : jQuery HTML Slider"/>jQuery Slider HTML</a>
    <a href="#wows9" title="Morning mist over the forest"><img src="images/demo/flux-slices/data/tooltips/world_canada_rain_forest_007534_.jpg" alt="Morning mist over the forest :jQuery Slider Div Horizontal"/>How To Add jQuery Slider To HTML</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:20*100,
       outWidth:960,
       outHeight:360,
       width:960,
       height:360,
       caption: true,
       controls:true,
       autoPlay:true,
       bullets:true
    })</script>

            </body>
            </html>

    Example of it working on an Forumotion HTML page:

    http://tiki.makingforum.com/h2-wow-igid

    Change the links of the images in CSS so they are not hotlinks.

    Regards.
    • Back to top