The Arcive of Official vBulletin Modifications Site.

vFCoders - Featured Content Slider Widget · **Released**: 08-19-2011

.::vFCoders - Featured Content Slider Widget::.

Content Slider Source: http://webdeveloperplus.com/jquery/f...ing-jquery-ui/

What is it?
=====================================

Featured Content Slider Widget for VBulletin CMS to feature latest (or popular) articles in a block that displays as a slideshow.

Features
=====================================

1. Fully Integrated With VBulletin CMS.
2. Option To Select Sections.
3. Option To Select Categories.
4. Option to Sort Articles by date or views.
5. No Template or File Edits.
6. Can Add Seperate Widget for Different Sections.
7. Can Add more than 1 Featured Content Slider Widget in a page.
8. Option To Set Width For Each Content Slider Widget New!

New Installation Instructions
=====================================

1. Upload all the files in "Upload" Folder to forumroot.
2. In the Product Manager in AdminCP, import the product XML file.
3. Then Go To -> Admincp -> vBulletin CMS -> Widgets

Widget Type: CMS featured Content slider
and enter other details and save it..

5. Then Rest of the things are as it is which you do for other widgets.

a): Configure The Widget in VBulletin CMS -> widgets
b): Add the widget in page through layout manager.

Upgrade Instructions
=====================================

1. Unzip the attachment and upload all files in upload folder to forumroot.
2. Upload the xml through product manager. (Overwrite)
3. Delete all the old content slider widgets and make new ones.

Uninstallation Instructions
=====================================

1. Delete all the Content Slider Widgets in vBulletin CMS -> Widgets
2. Uninstall the product through product manager.

Mod History:

v1.0 : 20 Aug 2011 : First Release.
v2.0 : 21 Aug 2011 : Width Feature Added.
v2.1 : 21 Aug 2011 : Fixed Uninstall Bug.
v2.2 : 26 Aug 2011 : Improved mouseover effect of content slider.
v2.3: 28 Aug 2011 : Fixed Package ID issue.
v2.4: 18 Apr 2011 : Fix typo in install code and Updated for vBulletin 4.1.x.

-> Click On Mark As Installed If You Have Installed This Mod.
-> You Can Nominate it also for Mod Of The Month.
-> If u like my work, you can Donate me also.

mitch84 · #**102** 08-28-2011, 05:47 AM

after upgrade number to 2.3 version don't change, stay on 2.2

Taurus1 · #**103** 08-28-2011, 05:53 AM

I am sorry, but I cannot use it like this. It looks terrible on the left like now when using a widescreen monitor. If there is no easy way to just center the entire widget then I cannot use it. Great idea though.

Badshah93 · #**104** 08-28-2011, 06:14 AM

Quote:

Originally Posted by Taurus1

I am sorry, but I cannot use it like this. It looks terrible on the left like now when using a widescreen monitor. If there is no easy way to just center the entire widget then I cannot use it. Great idea though.

Open vbcms_widget_cmsfcs_page template

And

Replace all template code to this

Code:

<vb:if condition="$output">
<style type="text/css">
.cmsfcs_{vb:raw id} { 
	position:relative; 
	height:290px; 
        
}
.cmsfcs_{vb:raw id} ul.ui-tabs-nav{ 
        position:absolute; 
        top:0; 
        left:9px;
        list-style:none; 
	padding:0; 
        margin-top:2px; 
        width:76px;
}
.cmsfcs_{vb:raw id} ul.ui-tabs-nav li{ 
        font-size:12px; 
	color:#666; 
        margin-left:2px;
        margin-top:3px;
        }

.cmsfcs_{vb:raw id} ul.ui-tabs-nav li span{ 
	font-size:11px; font-family:Verdana; 
	line-height:14px; 
}
.cmsfcs_{vb:raw id} li.ui-tabs-nav-item a{ 
	display:block; 
	height:55px; 
	color:#333;  
	line-height:12px;
}

.cmsfcs_{vb:raw id} ul.ui-tabs-nav li img { 
	float:left;  
	}

.cmsfcs_{vb:raw id} ul.ui-tabs-nav li.ui-tabs-selected img { 
 border:3px solid #FF7400;       
}


.cmsfcs_{vb:raw id} .ui-tabs-panel{ 
	width:{vb:raw width}px; 
        height:290px; 
        margin: 0 auto; 
}

.cmsfcs_{vb:raw id} .ui-tabs-panel img { 
	width:{vb:raw width}px; 
        height:290px; 
        margin: 0 auto; 
	}

.cmsfcs_{vb:raw id} .ui-tabs-panel .info{ 
	position:absolute; 
	top:220px; 
        left:85px; 
	height:70px;
        width:{vb:math {vb:raw width}-85}px;
        opacity: .75;
        background: black; 
}
.cmsfcs_{vb:raw id} .info h2{ 
	font-size: 20px; font-family:Georgia, serif; 
	color:#fff; padding:5px; margin:0 5px;
	overflow:hidden; 
}
.cmsfcs_{vb:raw id} .info p{ 
	margin:0 10px; 
	font-family:Verdana; font-size:11px; 
	line-height:14px; color:#f0f0f0;
}
.cmsfcs_{vb:raw id} .info a{ 
	text-decoration:none; 
	color:#fff; 
}
.cmsfcs_{vb:raw id} .info a:hover{ 
	text-decoration:underline; 
}
.cmsfcs_{vb:raw id} .ui-tabs-hide{ 
	display:none; 
}
</style>


<script type="text/javascript">
$(document).ready(function(){
$(".cmsfcs_{vb:raw id}").tabs({ fx: {opacity: 'toggle', duration:1} }).tabs({event: 'mouseover'}).tabs('rotate', 3000, true);

$('.cmsfcs_{vb:raw id}').mouseover(function(){
        $(this).tabs('rotate', 0, false);
    });
    $('.cmsfcs_{vb:raw id}').mouseout(function(){
        $(this).tabs({ fx: {opacity: 'none', duration:1} }).tabs({event: 'mouseover'}).tabs('rotate', 3000);
    });
});
</script>

<div class="block">

<div class="cms_widget_content widget_content">
		  <div id="featured" class="cmsfcs_{vb:raw id}">

{vb:raw output}
</div>
</div>
</div>
</vb:if>

i don't have widescreen monitor right now.. (waiting for my laptop to come from dell)
but i think above code should fix it.

Taurus1 · #**105** 08-28-2011, 06:44 AM

Thanks, that only works partially. The main part is centered but if you look on screenshot the small thumbnails and the part with the title in is still at the left.

Attachment 132436

Badshah93 · #**106** 08-28-2011, 06:59 AM

okk

try this code

Code:

<vb:if condition="$output">
<style type="text/css">
.cmsfcs_{vb:raw id} { 
	position:relative; 
	height:290px;
        width:{vb:raw width}px; 
        margin:0 auto;
        }
.cmsfcs_{vb:raw id} ul.ui-tabs-nav{ 
        position:absolute; 
        top:0; 
        left:1px;
        list-style:none; 
	padding:0;
        margin-top:2px; 
        width:76px;
}
.cmsfcs_{vb:raw id} ul.ui-tabs-nav li{ 
        font-size:12px; 
	color:#666; 
        margin-left:2px;
        margin-top:3px;
        }

.cmsfcs_{vb:raw id} ul.ui-tabs-nav li span{ 
	font-size:11px; font-family:Verdana; 
	line-height:14px; 
}
.cmsfcs_{vb:raw id} li.ui-tabs-nav-item a{ 
	display:block; 
	height:55px; 
	color:#333;  
	line-height:12px;
}

.cmsfcs_{vb:raw id} ul.ui-tabs-nav li img { 
	float:left;  
	}

.cmsfcs_{vb:raw id} ul.ui-tabs-nav li.ui-tabs-selected img { 
 border:3px solid #FF7400;       
}


.cmsfcs_{vb:raw id} .ui-tabs-panel{ 
	width:{vb:raw width}px; 
        height:290px; 
        
}

.cmsfcs_{vb:raw id} .ui-tabs-panel img { 
	width:{vb:raw width}px; 
        height:290px; 
        
	}

.cmsfcs_{vb:raw id} .ui-tabs-panel .info{ 
	position:absolute; 
	top:220px; 
        left:85px; 
	height:70px;
        width:{vb:math {vb:raw width}-85}px;
        opacity: .75;
        background: black; 
        margin: 0 auto;
}
.cmsfcs_{vb:raw id} .info h2{ 
	font-size: 20px; font-family:Georgia, serif; 
	color:#fff; padding:5px; margin:0 5px;
	overflow:hidden; 
}
.cmsfcs_{vb:raw id} .info p{ 
	margin:0 10px; 
	font-family:Verdana; font-size:11px; 
	line-height:14px; color:#f0f0f0;
}
.cmsfcs_{vb:raw id} .info a{ 
	text-decoration:none; 
	color:#fff; 
}
.cmsfcs_{vb:raw id} .info a:hover{ 
	text-decoration:underline; 
}
.cmsfcs_{vb:raw id} .ui-tabs-hide{ 
	display:none; 
}
</style>


<script type="text/javascript">
$(document).ready(function(){
$(".cmsfcs_{vb:raw id}").tabs({ fx: {opacity: 'toggle', duration:1} }).tabs({event: 'mouseover'}).tabs('rotate', 3000, true);

$('.cmsfcs_{vb:raw id}').mouseover(function(){
        $(this).tabs('rotate', 0, false);
    });
    $('.cmsfcs_{vb:raw id}').mouseout(function(){
        $(this).tabs({ fx: {opacity: 'none', duration:1} }).tabs({event: 'mouseover'}).tabs('rotate', 3000);
    });
});
</script>

<div class="block">

<div class="cms_widget_content widget_content">
		  <div id="featured" class="cmsfcs_{vb:raw id}">
{vb:raw output}

</div>
</div>
</div>
</vb:if>

Taurus1 · #**107** 08-28-2011, 07:29 AM

Perfect! Thank you very much for all the effort!

Badshah93 · #**108** 08-28-2011, 07:44 AM

Quote:

Originally Posted by mitch84

after upgrade number to 2.3 version don't change, stay on 2.2

i forgot to change version number in xml file..

Uploded New XML with correct version number.

doctorsexy · #**109** 08-28-2011, 08:51 AM

Woowhoow! working installed...thanks

mmorpgwelt · #**110** 08-28-2011, 01:51 PM

Genius, finally a good and easy to install slider ^^

sick adam · #**111** 08-28-2011, 03:30 PM

Ok, so when I replace the widget template with that code, it makes my webpage not load up.... could you be a little more specific? Do we delete a section of the code and replace it? This is an awesome slider btw, just REALLY want it centered

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.08306 seconds Memory Usage 2,364KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (2)bbcode_code (2)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)pagenav_pagelinkrel (11)post_thanks_box (14)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (2)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (4)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

13 благодарности(ей) от:
boydy, Bram H, chabit77, deverill2010, huevncom, LOGECT, mmorpgwelt, nacaruncr, Nassou, romaszek, sub_ubi, sweetpotato, Teascu Dorin

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!