Slider Widget s3slider

[CrazyProgrammer]

Here is a lite slider for vbulletin CMS
Login into Admin Panel(Admincp)
Open up vBulletin CMS in Sidebar click Widgets when page opens click Create New Widget near bottom page
Then a new page will come up and choose the following options:
Widget Type: Static HTML
Title: Slider
Description: Content Slider

click save
now you will see a widget called slider click configure and paste the following into the Enter Static HTML Box Edit the pictures you want and then Click save and you done.
Edit your Layout to show the widget where you want i would choose the Middle box in Home Layout :)

<style type="text/css">
ul#slider {
width: 430px;
height: 270px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

ul#slider li {
float: left;
position: relative;
/*display: none;*/
}

ul#slider li div {
position: absolute;
width: 373px;
background-color: #000;
color: #fff;
left: 0;
/*display: none;*/
padding: 10px;
}

.top {
top: 0;
}

.bottom {
bottom: 0;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mySlider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").mySlider({
timeOut: 4000,
captionOpacity: .7
});
});
</script>
<ul id="slider">

<li>
<img src="images/slider/2.jpg" alt="" />
<div class="top">
Some nice text captions..
</div>
</li>
<li>
<img src="images/slider/3.jpg" alt="" />
<div class="bottom">

Some nice text captions..
</div>
</li>
<li>

<img src="images/slider/4.jpg" alt="" />
<div class="bottom">
Some nice text captions..
</div>
</li>
</ul>
Developer of the slider is Creative Commons Attribution (http://www.serie3.info/s3slider/)

[CrazyProgrammer]

Reserved

[goyo]

Not here to "diss" your hard work but why would anyone want to load an extra 100kbyte javascript framework (jquery) to an already slow cms page when vB already using the yui framework.

Why not integrate one of the Yui slideshows like this one (http://freshcutsd.com/yui-slideshow/#demo) ?

(Also in theory css should load in head and javascript in the bottom of the rendered page.)

[Forum Lover]

No demo?

[Sleaklight]

Thank you, looks good.

[Jamie G]

Not here to "diss" your hard work but why would anyone want to load an extra 100kbyte javascript framework (jquery) to an already slow cms page when vB already using the yui framework.

Why not integrate one of the Yui slideshows like this one (http://freshcutsd.com/yui-slideshow/#demo) ?

(Also in theory css should load in head and javascript in the bottom of the rendered page.)


If you can develop such a system to go on top of some forums then install it, I'd give ?? for it!

Cheers

[AzzidReign]

Perfect for those news posts we have :)

[tafreeh]

yea its really good for news and announcement ... Thanks

[Preech]

I see the difference now after completely reading the thread. This won't pull the images from a thread like the other one. I'm good fam. I don't have enough time to change them. Thank you.

[basilrath]

Theres a nifty software that creates the effect im using ..........diplayed here on my cms

http://www.tabletennistalk.co.uk/forum/content.php

the only downside up to now until i sort the threads it pulls from is it has to be done manually but the effect is fine

[CrazyProgrammer]

This was intial release will try to get article slider rather than a thread slider give some time thank u for comments so far

[NFLfbJunkie]

Theres a nifty software that creates the effect im using ..........diplayed here on my cms

Where can one find the software you're using on your message board? Thanks.

[NFLfbJunkie]

How do you get the caption to show on the bottom? Your existing code only shows a top caption for the first image; the other two don't have a caption.

[CrazyProgrammer]

<div class="bottom">

is for bottom make sure u remove <div class="top">

[NFLfbJunkie]

I have changed all three instances of <div class="top"> to <div class="bottom"> but now no captions show. Your existing code outputs the first image with a top caption and the other two images don't have captions.

[CrazyProgrammer]

pm me ur code u got there let me see

[ZGeek]

Does this pull content automatically? From the code it looks like you have to manually ad it.

[NFLfbJunkie]

You have to manually add the images, but would be nice if it would pull from image attachments in a specified forum, and making the image link to the forum thread the image is in.

[pablete]

Where to put the folder js included in zip??

Thank's

[Wild Bronco]

I got it to show the photos and I love it and you can add links to images and text like this

<a href="http://www.google.com"><img src="images/slider/2.jpg" alt="" /></a>

and to text like

<div class="top">
<a href="http://www.microsoft.com">Microsoft
</a></div>

[strudinox]

Great addition to the CMS!!

Is there a way for it to pull the images at random?

[onesexforum]

is there a way to get this to work only on the CMS homepage and no other pages. It's just that i think i may make the users annoyed that it comes up even on articles and things.

If you could possibly get back to me asap that would be amazing :D apart from that great mod :D

[Wayne Luke]

is there a way to get this to work only on the CMS homepage and no other pages. It's just that i think i may make the users annoyed that it comes up even on articles and things.

If you could possibly get back to me asap that would be amazing :D apart from that great mod :D

Create a layout specifically for your homepage. Assign this widget to it. Use a different layout for other pages.

[wander118]

update: ohhh i figured it out. you have to upload the js folder in the zip file. thanks!

****
Hi, really looking forward to using something like this! thanks. I put the widget on my CMS page, and one pic shows up with caption, but it doesnt switch to any of the other pictures i specified.

any help would be great.

[ArcadeSyndicate]

I put the widget on my CMS page, and one pic shows up with caption, but it doesnt switch to any of the other pictures i specified.


any help would be great.

had the same prob, just put it in an iframe.

[The Rocketeer]

Edit: seems to be working fine with vb 4.1..does LAG a lot though... next version should have to be more faster... thanks a lot, will post our demo / forum cms link showing it working

[eshrink]

Thank you for this, and I have it running successfully.

It works beautifully in Internet Explorer, but when using Safari on a Mac, only the first photo shows and then the area remains blank until the first photo is again called. Eg. it does not call the other photos.

Java is set to work in Safari Security.

Any idea of why it does not call other than the first photo?

Thank you once again.

[nacaruncr]

is it possible to installed in cmps??
because the cms doesn't like me.... and I'd like if it can do it too in cmps

If It is possible, can you help me, please??

thanks :D

[Wood 20th*]

Sorry but can someone tell me where I am suppose to place the two folders images and js.. Not sure where to place these..

Thanks in advance..

[tidus78]

Is it available in forum?:confused:

[Wood 20th*]

Is it available in forum?:confused:

If it is I can't find it..:(

[Wood 20th*]

Ok
I got it working. I was wondering if anyone could tell me how I would get pictures to pull from an created album instead of images/slider folder as it is now.

Anyone??

Thanks in advance

[SirSteve]

I'd like to see this one work on vb4: http://landofcoder.com/our-porfolios/jquery-plugins/item/10-the-lof-jsidernews-plugin.html

[The Rocketeer]

can you update it please? Currently we have to manually edit the images to a specific height..otherwise the text wont show

[Gamelobby]

I put the widget on my CMS page, and one pic shows up with caption, but it doesnt switch to any of the other pictures i specified.
any help would be great.
had the same prob, just put it in an iframe.
I'm having the same issues..
But i think i'd rather than put it in an iframe (cuz im not sure that will change anything), id rather just get it working like its supposed to.

Anyone know what causes it to stay still, & not rotate.?



can you update it please? Currently we have to manually edit the images to a specific height..otherwise the text wont showThat is what this is for, it is a slider that shows images that you put into it.
Did you want it to resize the images for you.? (you would still have to tell it what size, so you might as well just change the size of the images, or the slider window)

[fluidswork]

does this work with vb 4.1.2

[Trystan^]

does this work with vb 4.1.2

Just put it fine into 4.1.2 all seems to be working, will play around with images height etc and let you know if any problems

[The Rocketeer]

works on 4.1.3

to the dev or anyone that knows how to work with the javascript, can you please add a prevButton / previous button or something or give us the code to it? So that we are able to slide back and forward ?

[oddmud]

This is a great looking slider, just needs a little more work to be completed. I'd donate if it worked properly.

[Wayne Luke]

Anyone know what causes it to stay still, & not rotate.?

Javascript error. Make sure you upload it properly. The problem could be a conflict with the included javascript and the jQuery included with vBulletin.

I put the mySlider.js in my clientscript/jquery folder and changed the code slightly. I didn't upload the include jquery.js file.

Put the css in the additional.css template:

ul#slider {
width: 430px;
height: 270px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

ul#slider li {
float: left;
position: relative;
/*display: none;*/
}

ul#slider li div {
position: absolute;
width: 373px;
background-color: #000;
color: #fff;
left: 0;
/*display: none;*/
padding: 10px;
}

.top {
top: 0;
}

.bottom {
bottom: 0;
}


Put the javascript includes in my headinclude_bottom like this:

<vb:if condition="THIS_SCRIPT == 'vbcms'">
<script src="clientscript/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="clientscript/jquery/mySlider.js" type="text/javascript"></script>
</vb:if>


Finally my widget code looks like this:

<script type="text/javascript">
$(document).ready(function() {
$("#slider").mySlider({
timeOut: 4000,
captionOpacity: .7
});
});
</script>
<ul id="slider">

<li>
<img src="images/slider/thor_movie.jpg" width="100%" alt="" />
<div class="top">
The powerful but arrogant warrior Thor is cast out of the fantastic realm of Asgard and sent to live amongst humans on Earth, where he soon becomes one of their finest defenders.
</div>
</li>
<li>
<img src="images/slider/on_stranger_tides.jpg" width="100%" alt="" />
<div class="bottom">
After crossing paths with a woman from his past, Captain Jack Sparrow is swept aboard the Queen Anne's Revenge, the ship of the formidable pirate Blackbeard, on an unexpected mission to find the elusive fountain of youth.
</div>
</li>
<li>

<img src="images/slider/the-deathly-hallows.jpg" alt="" />
<div class="bottom">
The end begins as Harry, Ron, and Hermione go back to Hogwarts to find and destroy Voldemort's final horcruxes...
</div>
</li>
</ul>


Still needs a little work but you can see it at the site that I am working on here:
http://wayneflix.com/content/1-box-office

[The Rocketeer]

Javascript error. Make sure you upload it properly. The problem could be a conflict with the included javascript and the jQuery included with vBulletin.

I put the mySlider.js in my clientscript/jquery folder and changed the code slightly. I didn't upload the include jquery.js file.

Put the css in the additional.css template:

ul#slider {
width: 430px;
height: 270px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

ul#slider li {
float: left;
position: relative;
/*display: none;*/
}

ul#slider li div {
position: absolute;
width: 373px;
background-color: #000;
color: #fff;
left: 0;
/*display: none;*/
padding: 10px;
}

.top {
top: 0;
}

.bottom {
bottom: 0;
}


Put the javascript includes in my headinclude_bottom like this:

<vb:if condition="THIS_SCRIPT == 'vbcms'">
<script src="clientscript/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="clientscript/jquery/mySlider.js" type="text/javascript"></script>
</vb:if>


Finally my widget code looks like this:

<script type="text/javascript">
$(document).ready(function() {
$("#slider").mySlider({
timeOut: 4000,
captionOpacity: .7
});
});
</script>
<ul id="slider">

<li>
<img src="images/slider/thor_movie.jpg" width="100%" alt="" />
<div class="top">
The powerful but arrogant warrior Thor is cast out of the fantastic realm of Asgard and sent to live amongst humans on Earth, where he soon becomes one of their finest defenders.
</div>
</li>
<li>
<img src="images/slider/on_stranger_tides.jpg" width="100%" alt="" />
<div class="bottom">
After crossing paths with a woman from his past, Captain Jack Sparrow is swept aboard the Queen Anne's Revenge, the ship of the formidable pirate Blackbeard, on an unexpected mission to find the elusive fountain of youth.
</div>
</li>
<li>

<img src="images/slider/the-deathly-hallows.jpg" alt="" />
<div class="bottom">
The end begins as Harry, Ron, and Hermione go back to Hogwarts to find and destroy Voldemort's final horcruxes...
</div>
</li>
</ul>


Still needs a little work but you can see it at the site that I am working on here:
http://wayneflix.com/content/1-box-office

Hey Wayne Do you know anyway to add like a forward or backward button to this thing?

[biancolaw]

Can someone tell me how I would center the picture? I tried making the pics 430x270 but my homepage uses 75% for the middle column so the pics are aligned left. No matter what I edit, it seems I cannot center the picture.

[Wayne Luke]

Hey Wayne Do you know anyway to add like a forward or backward button to this thing?

Sorry.. Haven't looked into this functionality yet. Have been busy building a movie library within the vBulletin Framework. It isn't quite complete yet but getting there.

http://www.wayneflix.com/movies.php

Once I get done with the movie library, I am going to rewrite this using some PHP to pull articles marked as "featured" in the database. Don't know if I'll be able to distribute it though.

Can someone tell me how I would center the picture? I tried making the pics 430x270 but my homepage uses 75% for the middle column so the pics are aligned left. No matter what I edit, it seems I cannot center the picture.

Enclose your slider within a div container and do something like:

<style>
.slcenter {width: 540px;margin-left: auto;margin-right: auto;}
</style>
Mine looks like:

<div class="slcenter">
<ul id="slider">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
</div>

[negrowarez]

This one work with the 4.1.5?

[stev35555]

Hi,

Slideshow works great in 4.1.6. How can I stop the title showing and the grey background http://www.thechristianchatroom.com/ ?

[pantani]

nice one thanks you

[Popa Andrei]

how can we make this rezise pictures to a predefined size bu us given?

[Dr.osamA]

thank you bro

installed

[Popa Andrei]

how can we make this rezise pictures to a predefined size bu us given?

anyone can help me with this?

[mrt12345]

works great on 4.1.12
but i found working with a photo 650x335 and play with the width and heit in the code and you will do fine, for fluid templates.

I don’t have any fixed but you would have to make adjustments.

[Gary Granaas]

Doesn't rotate banners in my 4.2.0

[Gary Granaas]

<a href="http://www.dbcnutrition.com/forum/content.php" target="_blank">http://www.dbcnutrition.com/forum/content.php</a>

What I did was use this for a single banner on the CMS page and change the code around so it changes the size how I see fit and links to another url and opens another browser. Wont work for me to rotate banners but this does have a good use for using that spot as a sponsor ad. Here's what I did with the code. Hope we can get a slider working here.

<style type="text/css">
ul#slider {
width: 705px;
height: 275px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

ul#slider li {
float: center;
position: relative;
/*display: none;*/
}

ul#slider li div {
position: absolute;
width: 705px;
background-color: #000;
color: #fff;
left: 0;
/*display: none;*/
padding: 10px;
}

.top {
top: 0;
}

.bottom {
bottom: 0;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mySlider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").mySlider({
timeOut: 4000,
captionOpacity: .7
});
});
</script>
<ul id="slider">

<li>
<a href="http://www.dbcnutrition.com/index.php?main_page=advanced_search_result&search_in_description=1&keyword=Evoge n&x=0&y=0" target="_blank"><img src="http://www.dbcnutrition.com/evogen.jpg" alt="Evogen" width="705" height="280" /></a>
<div class="top">
Steve Kuclo Mr USA
</div>
</li>
</ul>

[Greeksgal]

How do I quicken up the speed of the images rotating? Working great in 4.2.1. js folder goes into forum root as far as I can tell.

[Zippeh XF]

I was wondering if i could get some help, its ot working right for me, im using 4.2.2
I copied the information in the guide and did it right, uploaded the files and thisis what i see
https://vborg.vbsupport.ru/external/2014/04/47.png

[RichieBoy67]

I was wondering if i could get some help, its ot working right for me, im using 4.2.2
I copied the information in the guide and did it right, uploaded the files and thisis what i see
https://vborg.vbsupport.ru/external/2014/04/47.png
You have to paste the code into where it says Enter static html... Replace the image links with your own.

[Mecho]

is it really working on 4.2.2 ??? i have tried but no luck

[ArcadeSyndicate]

yes it still is working fine, also on 4.2.2

to make it even look better just wrap the whole code in <center> and adjust the px size in the css ;)