vb.org Archive - Forum Home Enhancements - Dynamic News Slider Plugin (RSS Driven) jQuery

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

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

- - Forum Home Enhancements - Dynamic News Slider Plugin (RSS Driven) jQuery (https://vborg.vbsupport.ru/showthread.php?t=281012)

Dynamic News Slider Plugin (RSS Driven) jQuery

This mod is not written by me. It was written by Muhammad Shahbaz Saleem of egrappler.com

If you like this, you can show your support by Rating it, Marking it as installed, Nominating for MOTM. Thanks!

What is Dynamic News Slider Plugin?
Dynamic News is a jQuery news slider plugin that makes news integration to your CMS and forum very easy. Dynamic News plugin supports two ways to add news data. You can either enter your news via HTML mark-ups manually or let Dynamic News plugin load the news from rss feed and build the necessary HTML mark-ups automatically. One cool feature of Dynamic News slider plugin is the news preview or news summary pane, hovering over news headline will show news summary in a tool tip like pop up, which also provides link to news detail page. All the features of Dynamic News slider plugin are configurable. It?s up to you whether you want to display news preview pane, display control bar, auto hide control bar or keep it always visible.

http://img820.imageshack.us/img820/8...iderplugin.jpg
Demo on vbulletin forum - http://www.policywala.com/forum/
Demo on vbulletin CMS - http://www.policywala.com/
Working on Vbulletin Forum/CMS version ? 4.1.11 P1

Dynamic News Plugin Features
1. Dynamic/RSS Driven
2. Can set the no of news entries to be fetched from RSS
3. Supports manual entry of headlines and news detail via HTML markups
4. Supports news preview

Dynamic News Slider Plugin Parameters (You can set these as per your need)
? feedurl: URL of rss feed, default is ''. If 'feedurl' is empty then plugin will look for headlines within HTML markup.
? entries: Total no or news entries to be used by Dynamic News Plugins
? switchinterval: No of milliseconds single headline stays, default is 5000 ms or 5 secs.
? controls: Boolean value if true the news plugin will display the controls bar, default is true.
? showdetail: Boolean value if true, hovering over headline will pop up news summary, default is true.
? moretext: The text that will be displayed on news detail link within news summary pop up, default is 'more detail'.
? controlsalwaysvisible: Boolean value if true the control bar will remain visible, auto hide otherwise, default is false.

How to set up?
1. Download ? dnews folder

2. Upload ?dnews? folder in your public_html folder

3. Add below code in ad_global_header1

Admin CP -> Styles & Templates -> Style Manager -> Edit Templates -> Ad Location Templates -> ad_global_header1

Change -
1- Yourwebsite.com

PHP Code:


		
			
 <script src="yourwebsite.com/dnews/jquery-1.4.4.min.js" type="text/javascript"></script>



    <script src="www.yourwebsite.com/dnews/dnews.js" type="text/javascript"></script>



    <link href="http://www.yourwebsite.com/dnews/dnews.css" rel="stylesheet" type="text/css" />



    <script type="text/javascript">

        google.load("feeds", "1");

        $(document).ready(function() {

            $('#snews').dnews({ feedurl: 'Your Website.com RSS Feed', showdetail: false, controlsalwaysvisible: false,entries:10,controls:false});

        });

    </script>





    <style type="text/css">

        #container

        {

            width: 668px;

            top: 10px;

            margin: auto;

        }

        .demo

        {

            position: relative;

            margin-top: 10px;

        }

    </style>

      <div id="container">

        <div class="demo">

            <div class="news-wrapper" id="snews">

                <div class="news">

                    <div class="headline">

                        <a href="#" title="Title 1: Title 1 ">

                            JTitle 1</a>

                    </div>

                    <div class="headline">

                        <a href="#" title="Title 2 ">

                            Title 2.</a>

                    </div>

                    <div class="headline">

                        <a href="#" title="Title 3">

                            Title 3</a>

                    </div>

                    <div class="headline">

                        <a href="#" title="Title 4">

                            Title 4.</a>

                    </div>

                 </div>

            </div>

        </div>

     </div>

2- Add RSS Feed of your CMS/ Forum [In my CMS it is - http://www.policywala.com/external.p...s=120&count=10
3- OR If you want to change any of the Dynamic News Slider Plugin Parameters setting as specified above.

Others changes (if you need)

1- Commented ?remember me? box so that the news slider look good.

PHP Code:


		
			
<div id="remember" class="remember">

                    <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>

                </div>

How to change Remember me - https://vborg.vbsupport.ru/showthrea...+button&page=4

2- Edit the Additional CSS
Admin CP -> Styles & Templates -> Style Manager -> Edit Templates -> CSS Templates -> additional.css

Edit the additional.css template and add this code:

A- To adjust the logo (if needed)

HTML Code:

.logo-image {

clear:both;

display:block;

float:none;

padding-top: 35px;

padding-bottom: 8px;

}

Note: You can adjust the top and bottom values as needed to fine tune the logo placement.

B- To adjust the ad global header (if needed)

HTML Code:

.ad_global_header {

float:right;

position:absolute;

right:40px;

top:40px;

}

Note: You can adjust the right and top values as needed to fine tune the News Slider placement.

I am not an expert in this slider. I just really liked it for my forum, it looks the best and works quite well for me. I thought I would share it. If anyone has any suggestions on how to make it better, let me know. I will update the files accordingly.

Please Mark as Installed if you use this. :)

* Keeping this thread for any update.

Google API Key not required (plugin updated) -
The Google Loader no longer requires keys. You don't need to make any changes if you're already using one, but if you choose you may simply remove the key parameter from your requests. Remember that some API calls still require proper identification through HTTP referer as per the documentation and Terms of Service.

Source -
https://developers.google.com/loader/signup

Do you have some screenshots?

The demos you provided do not use the plugin.

Quote:

Originally Posted by lapiervb (Post 2316033)

Do you have some screenshots?

The demos you provided do not use the plugin.

It's in the header.

For some reason I am not see the google feed API in the Google API's Console?

I will try later...It looks like some things are being moved around.

Quote:

Originally Posted by Mr_Running (Post 2316053)

For some reason I am not see the google feed API in the Google API's Console?

Pluging updated. Google API Key not required.

Quote:

Originally Posted by lapiervb (Post 2316033)

Do you have some screenshots?

The demos you provided do not use the plugin.

See the image - http://img820.imageshack.us/img820/8...iderplugin.jpg

Reason why people don't see it is because it's being blocked by the adblocker.

Quote:

Originally Posted by tarzan22 (Post 2316395)

It works for me but thanks

http://img809.imageshack.us/img809/6...nshot003ax.gif

That's what mine looked like too.
No News ???

Quote:

Originally Posted by Mr_Running (Post 2316418)

That's what mine looked like too.
No News ???

Did you added RSS Feed?

Quote:

Add RSS Feed of your CMS/ Forum [In my CMS it is - http://www.policywala.com/external.p...s=120&count=10

Quote:

Originally Posted by ptceuro (Post 2316166)

Thanks Installed

Could you please share the weblinks with us?

rss actived y no funciona

http://www.foroxd.com/

Quote:

Originally Posted by tarzan22 (Post 2316439)

rss actived y no funciona

http://www.foroxd.com/

You have not uploaded dnews folder in your public_html - http://www.foroxd.com/dnews/
Also update RSS Feed Link

Sorry, I got on the wrong website.

There is no way they are in Spanish?

thanks

Quote:

Originally Posted by tarzan22 (Post 2316456)

Sorry, I got on the wrong website.

There is no way they are in Spanish?

thanks

It is just picking RSS feed of your website. It support all languages. :up:

I did everything as in the manual and it does not work

Quote:

Originally Posted by rtyagis (Post 2316432)

Did you added RSS Feed?

How can I add rss feed?
By changing the url of this code?

Code:

<script type="text/javascript"> 

        google.load("feeds", "1"); 

        $(document).ready(function() { 

            $('#snews').dnews({ feedurl: 'Your Website.com RSS Feed', showdetail: false, controlsalwaysvisible: false,entries:10,controls:false});

        }); 

    </script>

Quote:

Originally Posted by lovevn (Post 2330624)

How can I add rss feed?
By changing the url of this code?

Code:

<script type="text/javascript"> 

        google.load("feeds", "1"); 

        $(document).ready(function() { 

            $('#snews').dnews({ feedurl: 'Your Website.com RSS Feed', showdetail: false, controlsalwaysvisible: false,entries:10,controls:false});

        }); 

    </script>

Add RSS Feed of your CMS/ Forum [In my CMS it is - http://www.policywala.com/external.p...s=120&count=10

Quote:

Originally Posted by pesclub (Post 2328374)

I did everything as in the manual and it does not work

Could you pls tell in detail?

Thanks for your reply. I have more questions:

Quote:

Dynamic News Plugin Features
1. Dynamic/RSS Driven
2. Can set the no of news entries to be fetched from RSS
3. Supports manual entry of headlines and news detail via HTML markups
4. Supports news preview

Do I have to manually put the headlines and news details? If not what should I do with the following:

Quote:

<div id="container">
<div class="demo">
<div class="news-wrapper" id="snews">
<div class="news">
<div class="headline">
<a href="#" title="Title 1: Title 1 ">
JTitle 1</a>
</div>
<div class="headline">
<a href="#" title="Title 2 ">
Title 2.</a>
</div>
<div class="headline">
<a href="#" title="Title 3">
Title 3</a>
</div>
<div class="headline">
<a href="#" title="Title 4">
Title 4.</a>
</div>
</div>
</div>
</div>
</div>

Quote:

Originally Posted by tarzan22 (Post 2316395)

It works for me but thanks

http://img809.imageshack.us/img809/6...nshot003ax.gif

Mine also looks like this. And yes, I did add the RSS feed like you suggested. Here is my ad_global_header1 template:

Code:

<script src="the-back-alley.com/dnews/jquery-1.4.4.min.js" type="text/javascript"></script> 



    <script src="www.the-back-alley.com/dnews/dnews.js" type="text/javascript"></script> 



    <link href="http://www.the-back-alley.com/dnews/dnews.css" rel="stylesheet" type="text/css" />



    <script type="text/javascript"> 

        google.load("feeds", "1"); 

        $(document).ready(function() { 

            $('#snews').dnews({ feedurl: 'http://www.the-back-alley.com/forum/external.php?do=rss&type=newcontent&sectionid=1&days=120&count=10', showdetail: false, controlsalwaysvisible: false,entries:10,controls:false});

        }); 

    </script> 





    <style type="text/css"> 

        #container 

        { 

            width: 668px; 

            top: 10px; 

            margin: auto; 

        } 

        .demo 

        { 

            position: relative; 

            margin-top: 10px; 

        } 

    </style> 

      <div id="container"> 

        <div class="demo"> 

            <div class="news-wrapper" id="snews"> 

                <div class="news"> 

                    <div class="headline"> 

                        <a href="#" title="Title 1: Title 1 "> 

                            JTitle 1</a> 

                    </div> 

                    <div class="headline"> 

                        <a href="#" title="Title 2 "> 

                            Title 2.</a> 

                    </div> 

                    <div class="headline"> 

                        <a href="#" title="Title 3"> 

                            Title 3</a> 

                    </div> 

                    <div class="headline"> 

                        <a href="#" title="Title 4"> 

                            Title 4.</a> 

                    </div> 

                 </div> 

            </div> 

        </div> 

     </div>

Add

Code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

to the top of the ad_global_header1 template (according to my browser console the script had problems with the google.load("feeds", "1"); part).

https://developers.google.com/feed/v1/devguide

Thanks, but that didn't work.

will this mod work on vb 4.2 and if so will it get news by itself as updated on forum or only specific news can be added?

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01438 seconds Memory Usage 1,857KB 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 (4)bbcode_code_printable (2)bbcode_html_printable (2)bbcode_php_printable (15)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (28)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 bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: