vb.org Archive - vBulletin CMS Widgets

Page 1 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)

- - vBulletin CMS Widgets - Slider Widget s3slider (https://vborg.vbsupport.ru/showthread.php?t=238592)

CrazyProgrammer

03-18-2010 10:00 PM

Slider Widget s3slider

1 Attachment(s)

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:

Code:

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 :)

Code:

<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

CrazyProgrammer

03-18-2010 11:48 PM

Reserved

goyo	03-19-2010 12:02 AM

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 ?

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

Forum Lover

03-19-2010 12:23 AM

No demo?

Sleaklight

03-19-2010 12:33 AM

Thank you, looks good.

Jamie G

03-19-2010 12:47 AM

Quote:

Originally Posted by goyo (Post 2006179)

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

Cheers

AzzidReign

03-19-2010 02:49 AM

Perfect for those news posts we have :)

tafreeh

03-19-2010 03:47 AM

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

Preech

03-19-2010 04:11 AM

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

03-19-2010 06:53 AM

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

03-19-2010 07:06 AM

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

03-19-2010 03:45 PM

Quote:

Originally Posted by basilrath (Post 2006318)

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

03-19-2010 04:20 PM

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

03-19-2010 04:46 PM

Code:

<div class="bottom">

is for bottom make sure u remove

Code:

<div class="top">

NFLfbJunkie

03-19-2010 07:26 PM

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

03-19-2010 07:41 PM

pm me ur code u got there let me see

ZGeek

03-19-2010 09:22 PM

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

NFLfbJunkie

03-19-2010 10:07 PM

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

03-20-2010 02:32 PM

Where to put the folder js included in zip??

Thank's

Wild Bronco

04-13-2010 04:44 PM

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

Code:

<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

04-17-2010 05:20 PM

Great addition to the CMS!!

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

onesexforum

11-05-2010 12:10 AM

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

11-05-2010 04:19 PM

Quote:

Originally Posted by onesexforum (Post 2118107)

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

wander118

11-11-2010 08:40 PM

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

12-28-2010 10:30 AM

Quote:

Originally Posted by wander118 (Post 2120696)

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

01-06-2011 05:11 AM

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

01-13-2011 08:10 PM

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

01-17-2011 08:35 AM

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*

01-17-2011 04:06 PM

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

01-18-2011 12:21 AM

Is it available in forum?:confused:

Wood 20th*

01-18-2011 12:12 PM

Quote:

Originally Posted by tidus78 (Post 2150732)

Is it available in forum?:confused:

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

Wood 20th*

01-21-2011 03:31 PM

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

01-24-2011 03:17 AM

I'd like to see this one work on vb4: http://landofcoder.com/our-porfolios...ws-plugin.html

The Rocketeer

02-18-2011 10:42 PM

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

Gamelobby

03-11-2011 04:03 AM

Quote:

Originally Posted by wander118 (Post 2120696)

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.

Quote:

Originally Posted by ArcadeSyndicate (Post 2140056)

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

Quote:

Originally Posted by The Rocketeer (Post 2164124)

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

That 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

03-13-2011 01:58 PM

does this work with vb 4.1.2

Trystan^

03-13-2011 02:27 PM

Quote:

Originally Posted by fluidswork (Post 2172853)

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

04-18-2011 12:31 AM

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

04-21-2011 06:10 PM

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

Wayne Luke

04-22-2011 04:09 PM

Quote:

Originally Posted by Gamelobby (Post 2172167)

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:

Code:

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:

Code:

<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:

HTML Code:

<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

All times are GMT. The time now is 06:14 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01359 seconds Memory Usage 1,838KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (7)bbcode_code_printable (1)bbcode_html_printable (10)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: