Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
pinstripesc (New Admin) 3/27/2012 3:25 AM EST : Slider doable? (jquery)
pinstripesc
Posts: 4895
Zomgawsh Poster

Heya,

I'm messing with a slider gallery "news feed" type thing.

I managed to get most of the CSS stuffed into the HTML, but don't know what to do with the jquery. It works fine on my local but GP doesn't seem to like it. There are 2 jquery files, basic library (jquery-1.7.1.min.js) and a slider one (jquery.nivo.slider.pack.js). At the moment I have the jqueries in guild files. I read the sticky mentioning not putting <style> open and close tags, I dunno if that has anything to do with it..or if this is just something GP really doesn't want to do.

Thanks much
TopBottom

Mottie (MVP) 3/27/2012 8:42 AM EST : RE: Slider doable? (jquery)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Pinstripesc!

GuildPortal already uses jquery, so you don't need to include that library file. The nivo slider js and css files should be added to your guild files.

Now in your free form text/html widget, add links to both of those files. I wouldn't add the css to your html or into the custom css area as it just makes everything look messy when you go back and try to work on stuff.

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.
TopBottom

pinstripesc (New Admin) 3/27/2012 7:57 PM EST : RE: Slider doable? (jquery)
pinstripesc
Posts: 4895
Zomgawsh Poster

So close I can taste it..

So I uploaded the CSS and JS to GP and put this in a freeform HTML -

<script>
$(window).load(function() {
  $('#slider').nivoSlider({
    effect: 'random'
  });
});
</script>
<div id="slider" class="nivoSlider">
  <img src="http://shadowcompany.guildportal.com/GuildFiles/42293/up.jpg" alt="" title="This is an example of a caption" />
</div>


I also tried minus the shadowcompany.guildportal.... so it was just /Guildfiles for sources. Previewing local I get the first image showing up (locally it's not attached to jquery's library so it doesn't do anything). On GP, nothing shows up. It also deletes everything following the first script closing tag once I hit "save".
TopBottom

Mottie (MVP) 3/27/2012 9:25 PM EST : RE: Slider doable? (jquery)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

It's the editor... if you switch the editor into RAW mode (upper right corner), it won't erase the other script tags.

TopBottom

pinstripesc (New Admin) 3/28/2012 2:49 AM EST : RE: Slider doable? (jquery)
pinstripesc
Posts: 4895
Zomgawsh Poster

If I ever get a cat, I'm gonna name it Mottie...thanks!
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%