GuildPortal will be going offline (permanently) by the end of the month.
Sign Up! Login: Password: New User? Forgot? Support
Forums : Layout & Theme > Adding a Slider
Mottie (SuperAdmin) 3/27/2012 9:17 AM EST : Adding a Slider
Posts: 3884



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">
$(window).load(function() {
    effect: 'random'
<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="" />
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">
$(function() {
    theme: 'theme1', // choose from default '', 'theme1' or 'theme2'
    autoPlay: false    // set to true to start a slideshow
<ul id="slider" class="AnythingSlider">

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

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

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



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

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!