vBulletin CMS Widgets - [WIDGET] Slider

Widget Slider - Frontpage Slide Show.

Demo: http://demo.webdeveloperplus.com/fea...ontent-slider/

This is based on the demo above. OK this is my first mod and I know the coding really sucks! But I thought I would get this out and see if anyone want to improve on it.
This is one of those frontpage slide shows that pulls your attachment and data from specified forums.

I hope this works for you.

Install:

Edit slider.php and at line 100:

$forumid - set the forum to pull slides
$limit - set the number of posts
$chars - set the total number of characters
$words - set total number of words

Upload Files.

Create PHP Widget and inser the following code:

ob_start();
echo '<div>';
echo '<center>';
require_once './clientscript/slider/slider.php';
echo '</center>';
echo '</div>';
$output=ob_get_contents();
ob_end_clean();

[Wordplay]

whoops error

[DS MrSinister]

not sure why the tabs are showing on the left hand side.. it must be your CSS.. with out looking at your css code in the slider.php file. so please post your css code.

Sin

[Wordplay]

i don't mind that it's on the left anymore, it can stay there, i just want to get rid of the space between the column with the thumbs and the actual image.

and can you help me make the descripton align on the left rather than center, and make it take away 600px rather than what it is taking away right now?

<style>
#featured{
	width:830px;
	padding-right:0px;
	position:relative;
	border:0px solid #ccc;
	height:350px;
	background:#fff;
}
#featured ul.ui-tabs-nav{
	position:absolute;
	top:0; left:0px;
	list-style:none;
	padding:0; margin:0;
	width:200px;
}
#featured ul.ui-tabs-nav li{
	padding:0px 0; padding-left:3px;
	font-size:10px;
	color:#666;
}
#featured ul.ui-tabs-nav li img{
	float:left; margin:2px 5px;
	background:#fff;
	padding:0px;
	border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
	font-size:10px; font-family:Verdana;
	line-height:18px;
    border-color: #000;
}
#featured li.ui-tabs-nav-item a{
	display:block;
	height:70px;
	color:#333;  background:#fff;
	line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
	background:#f2f2f2;
}
#featured li.ui-tabs-selected{
	background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
	background:#ccc;
}
#featured .ui-tabs-panel{
	width:400px;
    height:350px;
	background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
	position:absolute;
	top:180px; left:0;
	height:70px;
	background: url('images/transparent-bg.png');
    color:#fff;
}
#featured .info h2{
	font-size:18px; font-family:Georgia, serif;
	color:#fff; padding:2px; margin:0;
	overflow:hidden;
}
#featured .info p{
	margin:0 5px;
	font-family:Verdana; font-size:11px;
	line-height:15px; color:#f0f0f0;
}
#featured .info a{
	text-decoration:none;
	color:#fff;
}
#featured .info a:hover{
	text-decoration:underline;
}
#featured .ui-tabs-hide{
	display:none;
}
</style>
<!-- jQuery - Do you already load this javascript?  (i.e. cometchat) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>

<!-- Rotating Code -->
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
<!-- / Rotating Code -->
<?php
global $db,$vbulletin,$sess, $std, $INFO, $vboptions, $session, $bbcode;
// vBulletin: Parse BBCode
if (!is_object($bbcode_parser)){
	require_once('./includes/class_bbcode.php');
	$bbcode_parser =& new vB_BbCodeParser($vbulletin, fetch_tag_list());
}

$forumid				= array(4);			// Set forum IDs here.
$limit					= '5';				// Limit the displayed slides
$chars					= 130;			// Character limit for the slide text, e.g. 100 is 100 characters limit.
$words					= 25;			// Word limit for the slide text, e.g. 20 is 20 words limit
/* ------------------------------ NOTHING TO CHANGE BELOW THIS LINE ------------------------------ */


// Start loop
$forumid = implode(',',$forumid);
$getnews = $db->query_read("SELECT threadid from ".TABLE_PREFIX."thread WHERE attach !='0' AND forumid in($forumid) ORDER by sticky DESC, threadid DESC LIMIT $limit");
while ($news = $db->fetch_array($getnews)) {
	$myid[]=$news['threadid'];
}
$tabhtml="";
$contenthtml="";
$div_id = 1;

if ($myid) {
foreach ($myid as $threadid) {
$getpics = $db->query_read("SELECT t.threadid as tid, t.title as title,t.replycount as rcount, p.pagetext as pagetext,a.attachmentid as attach,f.forumid as forumid,f.title as forum from ".TABLE_PREFIX."thread as t
	LEFT JOIN ".TABLE_PREFIX."post as p on(t.firstpostid=p.postid)
	LEFT JOIN ".TABLE_PREFIX."attachment as a on(a.contentid=p.postid)
	LEFT JOIN ".TABLE_PREFIX."forum as f on(t.forumid=f.forumid)
	where t.threadid='$threadid'
	ORDER BY attach DESC
	LIMIT 1");

while ($pic = $db->fetch_array($getpics)) {
$replies=$pic['rcount'];
if ($replies=='1') {
$update="- (1 update)";
} elseif ($replies>'1') {
$update="- ($replies updates)";
} else {
$update="";
}

$pic['pagetext'] = $bbcode_parser->do_parse($pic['pagetext'],false,false,false,false,false,false);
$link = "../showthread.php?t=".$threadid."";
$imagepath = "../attachment.php?attachmentid=".$pic['attach'];
$titleContent = ucwords($pic['title']);
$introtext = $pic['pagetext'];
$pattern = '~\[([^\]]+?)(=[^\]]+?)?\](.+?)\[/\1\]~'; 
preg_replace($pattern, ' ' , $introtext); 
$OpenBrace = '\['; 
$CloseBrace = '\]'; 
$NotACloseBrace = "[^{$CloseBrace}]"; 
$Multiple = '+?'; 
$Optional = '?'; 
$Anything = "(.{$Multiple})"; 
$StartTag = "{$OpenBrace}({$NotACloseBrace}{$Multiple})(={$NotACloseBrace}{$Multiple}){$Optional}{$CloseBrace}"; 
$EndTag = "{$OpenBrace}/\\1{$CloseBrace}"; 
$FullPattern = "~{$StartTag}{$Anything}{$EndTag}~"; 
$String = $introtext;
$String = preg_replace($FullPattern, '', $String); 
$introtext = $String;

 // clean images
$introtext = preg_replace("/<img.+?>/", "", $introtext);
 // HTML cleanup
if ($striptags) {
$introtext = strip_tags($introtext, $allowed_tags);
}
// if character limitation is defined
 if ($chars) {
 if(function_exists("mb_string")) {
 $introtext = mb_substr($introtext, 0, $chars).'...';
} else {
 $introtext = substr($introtext, 0, $chars).'...';
}
}


if(function_exists("mb_string")) {
 $titleContent = mb_substr($titleContent, 0, 40).'...';
} else {
 $titleContent = substr($titleContent, 0, 40).'...';
}

// if word limitation is defined
if ($words) {
$word_arr = str_word_count($introtext, 2);
$c = 0;
foreach ($word_arr AS $k => $v) {
if ($c == $words) {
if(function_exists("mb_string")) {
$introtext = mb_substr($introtext, 0, $k).'...';
} else {
$introtext = substr($introtext, 0, $k).'...';
}
break;
}
$c++;
}
}
$introtext = unhtmlspecialchars($introtext, true);

$tabhtml .= "<li class='ui-tabs-nav-item' id='nav-fragment-".$div_id."'><a href='#fragment-".$div_id."'>";
$tabhtml .="<img src='".$imagepath."' height='35px' width='50px' alt='' />";
$tabhtml .="<span>".$titleContent." ".$update."</span></a></li>";

$centerhtml .="<div id='fragment-".$div_id."' class='ui-tabs-panel' style=''>";
$centerhtml .="<img src='".$imagepath."' width='630px' height='350px' alt=''/>";
$centerhtml .="<div class='info'>";
$centerhtml .="<br><br><br><br><br><br><br><br><b><a href='".$link."'>".$titleContent."</a> </b>";
$centerhtml .="".$introtext."</div></div>";


$div_id++;
}
}

$db->free_result($getpics);
unset($pic);
$db->free_result($getnews);
unset($news);
// End loop

$tabhtml = "<div id=\"featured\"><ul class=\"ui-tabs-nav\">".$tabhtml."</ul>";

echo $tabhtml.$centerhtml."</div>";
}
?>

[Budget101]

I have this installed in a "widget" like the directions show. However, currently all of my widgets have a "frame" with a title. I would like this to show without the "widget" style (basically to look like content without any frame at all, So it's blended.
How do I do that?

[victorvu]

Hello Cory Booth:

Thanks for the mod. I installed it according to the instructions, but got the empty shell, as shown below:

Attachment 131949

Do you have the complete code ?

Victor

[Wordplay]

Originally Posted by Budget101

I have this installed in a "widget" like the directions show. However, currently all of my widgets have a "frame" with a title. I would like this to show without the "widget" style (basically to look like content without any frame at all, So it's blended.
How do I do that?

just change the widget template.

[Budget101]

Originally Posted by Wordplay

just change the widget template.

thank you, I completely missed that the first time around. Got it now :-)

[Budget101]

Originally Posted by victorvu

Hello Cory Booth:

Thanks for the mod. I installed it according to the instructions, but got the empty shell, as shown below:

Attachment 131949

Do you have the complete code ?

Victor

Victor, the code is complete, I had the same error that you're experiencing, when you configure the widget to add it in, do not delete the existing code which is:

$output = date(vB::$vbulletin->options['dateformat']) . "<br />\n";

Instead, add the code for your slider directly after it. You should then be able to see your slider without any issue, provided everything else is installed/configured correctly.

[Budget101]

Ok, in setting this up I am seeing the following issue- the text description (preview text) doesn't appear in the bottom under the title of the CMS slider. (using recent_section_articles.php) Any ideas how to fix?

Thanks!

[Budget101]

Originally Posted by Wordplay

i don't mind that it's on the left anymore, it can stay there, i just want to get rid of the space between the column with the thumbs and the actual image.

Edit:

#featured ul.ui-tabs-nav li {
    color: #666666;
    font-size: 12px;
    padding: 1px 0 1px 13px;
}

change the padding line to:
padding: 1px 0 1px 0px;