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.

jquery imageslider Question(PHBB2)

View previous topic View next topic Go down

jquery imageslider Question(PHBB2)

Post by giannismoll7 on October 12th 2011, 12:47 pm

Hello Smile

how i can add this imageslider in my forum?
http://nivo.dev7studios.com/

i think in forumotion forums we can add jquery codes...

giannismoll7
Forumember

Male Posts : 234
Reputation : 0
Language : Greek,Albanian and some english
Location : Greece,Athens

http://www.onepiecegr-rpg.com/forum.htm

Back to top Go down

Re: jquery imageslider Question(PHBB2)

Post by shadowz au on October 14th 2011, 8:12 am

U can add it. I saw some forum got it.

Just host jquery ( nivo-slider.js )

put this html anywhere you want

Code:
<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

put css in
Code:

#slider {
  position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/loadin10.gif) no-repeat 50% 50%;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
#slider a {
  border:0;
  display:block;
}

.nivo-controlNav {
  position:absolute;
  left:260px;
  bottom:-42px;
}
.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/bullet10.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.nivo-controlNav a.active {
  background-position:0 -22px;
}

.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/arrows10.png) no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

/* The Nivo Slider styles */
.nivoSlider {
  position:relative;
}
.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}
.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}
/* Caption styles */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background:#000;
  color:#fff;
  opacity:0.8; /* Overridden by captionOpacity setting */
  width:100%;
  z-index:8;
}
.nivo-caption p {
  padding:5px;
  margin:0;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
  position:absolute;
  top:45%;
  z-index:9;
  cursor:pointer;
}
.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
  position:relative;
  z-index:9;
  cursor:pointer;
}
.nivo-controlNav a.active {
  font-weight:bold;
}

Code:
<!-- Usually in the <head> section -->
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

try that

shadowz au
Forumember

Male Posts : 280
Reputation : 30
Language : Australia
Location : Sydney

http://tommyzserver.forummotion.com

Back to top Go down

Re: jquery imageslider Question(PHBB2)

Post by dmwdead909 on October 17th 2011, 11:13 am

Do you think you can give more details on how to exactly add this.

dmwdead909
Forumember

Male Posts : 124
Reputation : 0
Language : English
Location : Pomona

http://lmc-forums.inmyclan.com

Back to top Go down

Re: jquery imageslider Question(PHBB2)

Post by ioncube on October 17th 2011, 12:31 pm

not a good slider; extremely sluggish. Use this slider if you can SEO Friendly
http://www.socialpreys.blogspot.com/

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.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