Dynamic News Slider Plugin (RSS Driven) jQuery

[rtyagis]

This mod is not written by me. It was written by Muhammad Shahbaz Saleem of egrappler.com (http://www.egrappler.com/rss-driven-dynamic-jquery-news-slider-plugin-dynamic-news/)

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/8107/dynamicnewssliderplugin.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
<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 http://www.policywala.com/external.php?do=rss&type=newcontent&sectionid=1&days=120&count=10[/url]
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.

<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/showthread.php?t=260341&highlight=login+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)

.logo-image {
clear:both;
display:block;
float:none;
padding-top: 35px;
padding-bottom: 8px;
}
[I]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)

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

[rtyagis]

* 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

[lapiervb]

Do you have some screenshots?

The demos you provided do not use the plugin.

[Mr_Running]

Do you have some screenshots?

The demos you provided do not use the plugin.

It's in the header.

[Mr_Running]

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

[Mr_Running]

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

[rtyagis]

For some reason I am not see the google feed API in the Google API's Console?
Pluging updated. Google API Key not required.

[rtyagis]

Do you have some screenshots?

The demos you provided do not use the plugin.
See the image - http://img820.imageshack.us/img820/8107/dynamicnewssliderplugin.jpg

[ptceuro]

Thanks Installed

[Skyrider]

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

[safakuygur]

very nice thanks

[tarzan22]

It works for me but thanks

http://img809.imageshack.us/img809/6646/screenshot003ax.gif

[Mr_Running]

It works for me but thanks

http://img809.imageshack.us/img809/6646/screenshot003ax.gif

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

[rtyagis]

That's what mine looked like too.
No News ???
Did you added RSS Feed?
Add RSS Feed of your CMS/ Forum [In my CMS it is - http://www.policywala.com/external.p...s=120&count=10

[rtyagis]

Thanks Installed
Could you please share the weblinks with us?

[tarzan22]

rss actived y no funciona

http://www.foroxd.com/

[rtyagis]

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

[tarzan22]

Sorry, I got on the wrong website.

There is no way they are in Spanish?

thanks

[rtyagis]

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:

[pesclub]

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

[lovevn]

Did you added RSS Feed?

How can I add rss feed?
By changing the url of this 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>

[rtyagis]

How can I add rss feed?
By changing the url of this 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

[rtyagis]

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

Could you pls tell in detail?

[lovevn]

Thanks for your reply. I have more questions:

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:

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

[DocZaius]

It works for me but thanks

http://img809.imageshack.us/img809/6646/screenshot003ax.gif

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

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

[bjornb]

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

[DocZaius]

Thanks, but that didn't work.

[Mark_Zuckerberg]

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?