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.

Nivo Slider Help

View previous topic View next topic Go down

Solved Nivo Slider Help

Post by Kite Trojan on March 13th 2014, 8:17 pm

http://help.forumotion.com/t105173-how-can-i-get-nivo-slider-with-orman-theme-box-animations#686395I followed this.
Code:
<div style="width:700px;margin:40px auto;">
   
   <div class="slider-wrapper theme-default">
      
      <div class="ribbon">
      </div>
      
      <div style="width:700px;height:300px;" class="nivoSlider" id="nivoslider-125">
          <img alt="http://i57.servimg.com/u/f57/18/53/34/66/untitl17.jpg" title="Welcome To GDA!" src="http://i57.servimg.com/u/f57/18/53/34/66/untitl17.jpg" /><img alt="http://i56.servimg.com/u/f56/18/64/06/01/14021410.jpg" title="GDA V.1 Update" src="http://i56.servimg.com/u/f56/18/64/06/01/14021410.jpg" /><img alt="http://i56.servimg.com/u/f56/18/64/06/01/untitl22.jpg" title="Tournaments" src="http://i56.servimg.com/u/f56/18/64/06/01/untitl22.jpg" /> <img alt="http://i56.servimg.com/u/f56/18/64/06/01/untitl23.jpg" title="Roleplay" src="http://i56.servimg.com/u/f56/18/64/06/01/untitl23.jpg" />
      </div>
      
   </div>
   
   <p>
       <script type="text/javascript">
jQuery(window).load(function(){
    jQuery("#nivoslider-125").nivoSlider({
        effect:"random",
        slices:15,
        boxCols:8,
        boxRows:4,
        animSpeed:500,
        pauseTime:3000,
        startSlide:0,
        directionNav:true,
        directionNavHide:true,
        controlNav:true,
        controlNavThumbs:false,
        controlNavThumbsFromRel:true,
        keyboardNav:true,
        pauseOnHover:true,
        manualAdvance:false
    });
});
</script>
   </p>
</div>
this my code in my homepage. but it messes up and turns out bad

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Pizza Boi on March 13th 2014, 9:46 pm

Hi Very Happy

Please post a screen shot of your problem and your forum URL please.

Also, did you try adjusting its width and height? If you wish, you can just add width: #px; and height: #px; but as I said, post a screen shot so we can see your problem as well as your link Smile.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Kite Trojan on March 13th 2014, 9:48 pm

here is screenie

http://galacticda.forumotion.com/ my link

right now, i removed it because my members dont like it.

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Pizza Boi on March 13th 2014, 9:53 pm

Hi Very Happy

Can you please put it back up? I need to see it myself. Thank you.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Kite Trojan on March 13th 2014, 10:01 pm

Done.

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Pizza Boi on March 13th 2014, 10:17 pm

Hi Very Happy

Yes, it is messed up. Please paste your whole code and I'll compare it, including the CSS installed and the Javascript as well. Thank you.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Kite Trojan on March 13th 2014, 10:29 pm


The CSS and Javascript is avaliabe at the Original Post

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Pizza Boi on March 14th 2014, 3:48 am

Hi Very Happy

I will paste the answer code later on or before 00:00 my time. I'm currently in the university so I'm unable to help because of their suckish connection so please be patient Smile.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Kite Trojan on March 15th 2014, 12:39 am

bump

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Pizza Boi on March 15th 2014, 1:08 am

Hi Very Happy

This is weird, when I tried it, it won't stop loading but my connection's okay too. Anyway, if you want, this is almost a similar style to Nivo slider and you can just change the ones I input with IMG Link and URL Link into the links you want.

Code:
<center>
   <style type="text/css">

/* CSS for jQuery Orbit Plugin 1.2.3
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php



/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
================================================== */
#featured {
   width: 717px;
   height: 280px;
   background: #000 url('http://i48.servimg.com/u/f48/15/88/79/24/loadin10.gif') no-repeat center center;
   overflow: hidden; }
#featured>img,
#featured>div,
#featured>a { display: none; }




/* CONTAINER
================================================== */

div.orbit-wrapper {
width: 1px;
height: 1px;
position: relative; }

div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden }

div.orbit>img {
position: absolute;
top: 0;
left: 0;
display: none; }

div.orbit>a {
border: none;
position: absolute;
top: 0;
left: 0;
line-height: 0;
display: none; }

.orbit>div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */


/* TIMER
================================================== */

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right: 10px;
opacity: .6;
cursor: pointer;
z-index: 1001; }

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(http://i48.servimg.com/u/f48/15/88/79/24/rotato10.png) no-repeat;
z-index: 3; }

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden; }

span.rotator.move {
left: 0 }

span.mask.move {
width: 40px;
left: 0;
background: url(http://i48.servimg.com/u/f48/15/88/79/24/timer-10.png) repeat 0 0; }

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background: url(http://i48.servimg.com/u/f48/15/88/79/24/pause-10.png) no-repeat;
z-index: 4;
opacity: 0; }

span.pause.active {
background: url(http://i48.servimg.com/u/f48/15/88/79/24/pause-10.png) no-repeat 0 -40px }

div.timer:hover span.pause,
span.pause.active {
opacity: 1 }


/* CAPTIONS
================================================== */

.orbit-caption {
display: none;
font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }

.orbit-wrapper .orbit-caption {
background: #000;
background: rgba(0,0,0,.6);
z-index: 1000;
color: #fff;
   text-align: center;
   padding: 7px 0;
font-size: 13px;
position: absolute;
right: 0;
bottom: 0;
width: 100%; }


/* DIRECTIONAL NAV
================================================== */

div.slider-nav {
display: block }

div.slider-nav span {
width: 78px;
height: 100px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 50%;
margin-top: -50px;
cursor: pointer; }

div.slider-nav span.right {
background: url(http://i48.servimg.com/u/f48/15/88/79/24/right-10.png);
right: 0; }

div.slider-nav span.left {
background: url(http://i48.servimg.com/u/f48/15/88/79/24/left-a10.png);
left: 0; }

/* BULLET NAV
================================================== */

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
bottom: -40px;
left: 50%;
   margin-left: -50px;
padding: 0; }

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background: url(http://i48.servimg.com/u/f48/15/88/79/24/bullet10.jpg) no-repeat 4px 0;
width: 13px;
height: 12px;
overflow: hidden; }

.orbit-bullets li.active {
color: #222;
background-position: -8px 0; }

.orbit-bullets li.has-thumb {
background: none;
width: 100px;
height: 75px; }

.orbit-bullets li.active.has-thumb {
background-position: 0 0;
border-top: 2px solid #000; }

</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=1.5.1"></script><script type="text/javascript">
/*
* jQuery Orbit Plugin 1.2.3
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(d){d.fn.orbit=function(a){a=d.extend({animation:"horizontal-push",animationSpeed:600,timer:!0,advanceSpeed:6E3,pauseOnHover:!1,startClockOnMouseOut:!1,startClockOnMouseOutAfter:1E3,directionalNav:!0,captions:!0,captionAnimation:"fade",captionAnimationSpeed:600,bullets:!1,bulletThumbs:!1,bulletThumbLocation:"",afterSlideChange:function(){}},a);return this.each(function(){function q(){if(!a.timer||a.timer=="false")return!1;else r.is(":hidden")?s=setInterval(function(){l("next")},a.advanceSpeed):
(o=!0,x.removeClass("active"),s=setInterval(function(){var a="rotate("+m+"deg)";m+=3;t.css({"-webkit-transform":a,"-moz-transform":a,"-o-transform":a});m>180&&(t.addClass("move"),y.addClass("move"));m>360&&(t.removeClass("move"),y.removeClass("move"),m=0,l("next"))},a.advanceSpeed/180))}function n(){if(!a.timer||a.timer=="false")return!1;else o=!1,clearInterval(s),x.addClass("active")}function z(){if(!a.captions||a.captions=="false")return!1;else{var c=e.eq(b).data("caption");(_captionHTML=d(c).html())?
(j.attr("id",c).html(_captionHTML),a.captionAnimation=="none"&&j.show(),a.captionAnimation=="fade"&&j.fadeIn(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideDown(a.captionAnimationSpeed)):(a.captionAnimation=="none"&&j.hide(),a.captionAnimation=="fade"&&j.fadeOut(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideUp(a.captionAnimationSpeed))}}function A(){if(a.bullets)C.children("li").removeClass("active").eq(b).addClass("active");else return!1}function l(c){function d(){e.eq(f).css({"z-index":1});
u=!1;a.afterSlideChange.call(this)}var f=b,g=c;if(f==g)return!1;if(e.length=="1")return!1;u||(u=!0,c=="next"?(b++,b==p&&(b=0)):c=="prev"?(b--,b<0&&(b=p-1)):(b=c,f<b?g="next":f>b&&(g="prev")),A(),e.eq(f).css({"z-index":2}),a.animation=="fade"&&e.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,d),a.animation=="horizontal-slide"&&(g=="next"&&e.eq(b).css({left:h,"z-index":3}).animate({left:0},a.animationSpeed,d),g=="prev"&&e.eq(b).css({left:-h,"z-index":3}).animate({left:0},a.animationSpeed,
d)),a.animation=="vertical-slide"&&(g=="prev"&&e.eq(b).css({top:v,"z-index":3}).animate({top:0},a.animationSpeed,d),g=="next"&&e.eq(b).css({top:-v,"z-index":3}).animate({top:0},a.animationSpeed,d)),a.animation=="horizontal-push"&&(g=="next"&&(e.eq(b).css({left:h,"z-index":3}).animate({left:0},a.animationSpeed,d),e.eq(f).animate({left:-h},a.animationSpeed)),g=="prev"&&(e.eq(b).css({left:-h,"z-index":3}).animate({left:0},a.animationSpeed,d),e.eq(f).animate({left:h},a.animationSpeed))),z())}var b=0,
p=0,h,v,u,f=d(this).addClass("orbit"),c=f.wrap('<div class="orbit-wrapper" />').parent();f.add(h).width("1px").height("1px");var e=f.children("img, a, div");e.each(function(){var a=d(this),b=a.width(),a=a.height();b>f.width()&&(f.add(c).width(b),h=f.width());a>f.height()&&(f.add(c).height(a),v=f.height());p++});if(e.length==1)a.directionalNav=!1,a.timer=!1,a.bullets=!1;e.eq(b).css({"z-index":3}).fadeIn(function(){e.css({display:"block"})});if(a.timer){c.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');
var r=c.children("div.timer"),o;if(r.length!=0){var t=d("div.timer span.rotator"),y=d("div.timer span.mask"),x=d("div.timer span.pause"),m=0,s;q();r.click(function(){o?n():q()});if(a.startClockOnMouseOut){var B;c.mouseleave(function(){B=setTimeout(function(){o||q()},a.startClockOnMouseOutAfter)});c.mouseenter(function(){clearTimeout(B)})}}}a.pauseOnHover&&c.mouseenter(function(){n()});if(a.captions){c.append('<div class="orbit-caption"></div>');var j=c.children(".orbit-caption");z()}if(a.directionalNav){if(a.directionalNav==
"false")return!1;c.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');var k=c.children("div.slider-nav").children("span.left"),w=c.children("div.slider-nav").children("span.right");k.click(function(){n();l("prev")});w.click(function(){n();l("next")})}if(a.bullets){c.append('<ul class="orbit-bullets"></ul>');var C=c.children("ul.orbit-bullets");for(i=0;i<p;i++){k=d("<li>"+(i+1)+"</li>");if(a.bulletThumbs&&(w=e.eq(i).data("thumb")))k=d('<li class="has-thumb">'+
i+"</li>"),k.css({background:"url("+a.bulletThumbLocation+w+") no-repeat"});c.children("ul.orbit-bullets").append(k);k.data("index",i);k.click(function(){n();l(d(this).data("index"))})}A()}})}})(jQuery);
</script><script type="text/javascript">
jQuery(window).load(function() {
jQuery('#featured').orbit();
});
</script>
   <div id="featured"> <a href="URL Link"><img src="IMG Link" alt="" style="height: 308px;" /></a><a href="URL Link"><img src="IMG Link" alt="" /></a><a href="URL Link"><img src="IMG Link" alt="" /></a><a href="URL Link"><img src="IMG Link" alt="" /></a>
   </div>
</center>

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Kite Trojan on March 15th 2014, 5:12 pm

Could you add some captions?

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Pizza Boi on March 16th 2014, 12:28 pm

Hi Very Happy

Captions? As in title? If yes, then you can. Here's how:

Change this part:

Code:
 <div id="featured"> <a href="URL Link"><img src="IMG Link" alt="" style="height: 308px;" /></a><a href="URL Link"><img src="IMG Link" alt="" /></a><a href="URL Link"><img src="IMG Link" alt="" /></a><a href="URL Link"><img src="IMG Link" alt="" /></a>
  </div>
</center>

Into this:

Code:
 <div id="featured"> <a href="URL Link"><img src="IMG Link" alt="" style="height: 308px;" title="Caption" /></a><a href="URL Link"><img src="IMG Link" alt="" title="Caption" /></a><a href="URL Link"><img src="IMG Link" alt="" title="Caption" /></a><a href="URL Link"><img src="IMG Link" alt="" title="Caption" /></a>
  </div>
</center>

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Kite Trojan on March 16th 2014, 2:42 pm

What is URL Link?

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Pizza Boi on March 16th 2014, 7:31 pm

Hi Very Happy

URL Link is the page where you will be taken once you click the image Smile.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Kite Trojan on March 16th 2014, 8:07 pm

Thank you so much. This is the slide I love!

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by Pizza Boi on March 16th 2014, 10:32 pm

Hi Very Happy

The pizza's here! That'd be 2.99 Wink .

No problem~

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Help

Post by SLGray on March 16th 2014, 10:57 pm

Topic Solved & Archived


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


SLGray
Administrator
Administrator

Male Posts : 35666
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