Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Layout & Theme > Adding a Slider
Mottie (SuperAdmin) 3/27/2012 9:17 AM EST : Adding a Slider
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Adding a Slider

GuildPortal admin site link to the original post

Determine if the slider you want to use will contain images only or other content - then refer to the section below. We will use Nivo Slider for images only and AnythingSlider for a mix of content and images.

In a free form text/html widget, add the code from the appropriate section below, then update the HTML (image urls and/or slide content) as desired.

Image only slider
<script src="/GuildFiles/258012/jquery.nivo.slider.pack.js"></script>
<link href="/GuildFiles/258012/nivo-slider.css" rel="stylesheet">
<script>
$(window).load(function() {
  $('#slider').nivoSlider({
    effect: 'random'
  });
});
</script>
<div id="slider" class="nivoSlider">
  <img src="/GuildFiles/######/slide1.jpg" alt="" />
  <img src="/GuildFiles/######/slide2.jpg" alt="" />
  <img src="/GuildFiles/######/slide3.jpg" alt="" title="This is an example of a caption" />
  <img src="/GuildFiles/######/slide4.jpg" alt="" />
</div>
You can choose from any of these effects (instead of random):
  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

See a demo of the slide effects here.

Content Slider

I've also added AnythingSlider which allows you to add more than just images:
<script src="/GuildFiles/258012/jquery.anythingslider.all.min.js"></script>
<link href="/GuildFiles/258012/anythingslider.combo.css" rel="stylesheet">
<script>
$(function() {
  $('#slider').anythingSlider({
    theme: 'theme1', // choose from default '', 'theme1' or 'theme2'
    autoPlay: false    // set to true to start a slideshow
  });
});
</script>
<ul id="slider" class="AnythingSlider">

  <li class="slide1">
    <div class="text">Put anything you want here</div>
  </li>

  <li class="slide2">
    <img src="/GuildFiles/######/slide1.jpg" alt="" />
  </li>

  <li class="slide3">
   <div class="list">
    <h4>Title</h4>
    <ul>
     <li>List item #1</li>
     <li>List item #2</li>
    </ul>

   </div>

  </li>

 </ul>
You can get a lot more information on settings and see demos here.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%