The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

WOW Slider on forumotion

View previous topic View next topic Go down

Solved WOW Slider on forumotion

Post by JAN2XONLINE on January 18th 2013, 7:17 am

How do you add wow slider on a forumotion forum?

JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by Akkii on January 18th 2013, 8:57 am


Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by JAN2XONLINE on January 18th 2013, 10:00 am


Thanks, so that's the code that I need to put in a HTML box right?



Which JS do I need? Where should I put it in AP?

JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by Akkii on January 18th 2013, 10:04 am

In the link that i gave you , you have all codes that u need in one.

Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by JAN2XONLINE on January 18th 2013, 10:15 am

@Akkii wrote:In the link that i gave you , you have all codes that u need in one.

Where should I put that code? groar

EDIT*

I got it! But my problem now is my pictures' dimensions are 256x400 like this one: so I want to change the width and height of the slider but I don't know which width and height I must change.

Spoiler:
<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`!Cool`$)&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>


JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by Akkii on January 18th 2013, 10:18 am

ACP > Modules > HTML > HTML pages management

Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by JAN2XONLINE on January 18th 2013, 10:19 am

@Akkii wrote:ACP > Modules > HTML > HTML pages management

Yup, I got that now, thanks to you! But I got another problem. See my previous post. Very Happy

JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by Akkii on January 18th 2013, 10:27 am

#wowslider-container {
#wowslider-images {

Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by JAN2XONLINE on January 18th 2013, 10:37 am

@Akkii wrote:#wowslider-container {
#wowslider-images {

Thanks! Another question Confused How can I add links on images?

JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by Akkii on January 18th 2013, 10:48 am

Code:
<a href="HERE PUT LINK"><img src="HERE IS IMAGE LINK" alt="DESC IF YOU WANT" title="TITLE IF YOU WANT" id="wows3"/></a>

Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by JAN2XONLINE on January 18th 2013, 11:02 am

@Akkii wrote:
Code:
<a href="HERE PUT LINK"><img src="HERE IS IMAGE LINK" alt="DESC IF YOU WANT" title="TITLE IF YOU WANT" id="wows3"/></a>

Thanks, I'll try it later. Can you also tell me where should I put that inside the code? Confused I'm sorry, I really don't know. I might messed up the codes if I just put it somewhere. :3

JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by Akkii on January 18th 2013, 11:07 am

Send me image and url links on PM , i will make you code for all.

Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by JAN2XONLINE on January 18th 2013, 11:15 am

@Akkii wrote:Send me image and url links on PM , i will make you code for all.

Ohhhh, no need but thanks. I just need to know it because I might use it later but not now. I'm still thinking about replacing the accordion I have in my forum right now on the welcome page (portal) [ CLICK HERE TO SEE ].

JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by Sanket on January 18th 2013, 7:49 pm

Solved?

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by JAN2XONLINE on January 18th 2013, 10:42 pm

[quote="Sanket"]Solved?[/quote

Yes.

JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: WOW Slider on forumotion

Post by SLGray on January 18th 2013, 11:31 pm

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35674
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum