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();

[LCN2007]

Is this able to be made fluid?

[Chalex4]

On a test version of my website www.atkcommunity.com I am trying out your content slider and have ALMOST made it completely work on my vBadvanced homepage .

However, I am having the problem that when the homepage loads, all of the images for the different slides appear beneath each other:



Once the site has finished loading, it appears as it's supposed to:



I would really appreciate any help you guys can give me that would eliminate this problem. This may mean making it so that the images are loaded progressively, but I wouldn't know how to do this. Maybe just ensuring that the images are always contained in the box would work?

Thanks!

[wickedstangs]

how do you set permissions? When I am logged off, I can't see the images on the my site. When I log in I can see everything.

[Reef Man]

Originally Posted by Chalex4

On a test version of my website www.atkcommunity.com I am trying out your content slider and have ALMOST made it completely work on my vBadvanced homepage .

However, I am having the problem that when the homepage loads, all of the images for the different slides appear beneath each other:



Once the site has finished loading, it appears as it's supposed to:



I would really appreciate any help you guys can give me that would eliminate this problem. This may mean making it so that the images are loaded progressively, but I wouldn't know how to do this. Maybe just ensuring that the images are always contained in the box would work?

Thanks!

where do you have it? I can not see it.

[Chalex4]

Originally Posted by Reef Man

where do you have it? I can not see it.

Sorry, it's only viewable for me right now because it's broken!

If you want to try and help me out then just sign up and I'll be happy to make it visable for you .

[Chalex4]

I looked at your slider on http://www.acuarios-marinos.com and it looks like you have the same problem. Luckily your forum isn't transparent though so you can only see a very small portion of the next image. Anyway, if you have any ideas I'd love to hear them!


EDIT: Sorry for the double post

[JMEWLS`]

<a href="http://www.nbadimensions.net" target="_blank">www.nbadimensions.net</a>

The slider isn't working on internet explorer. You can't chose the slide. How do I fix this?

[JMEWLS`]

<style>
#featured{
	width:441px;
	padding-right:145px;
	padding-left:10px;
	padding-bottom:10px;
	padding-top:10px;
	position:relative;
	height:250px;
	background:#F2F2F2;
}
#featured ul.ui-tabs-nav{
	position:absolute;
	left:465px;
	top: 10px;
	list-style:none;
	padding:0; margin:0;
	width:123px;
	height:70px;
	margin:2px 5px;
}
#featured ul.ui-tabs-nav li{
	padding:2px;
	background-color:#F2F2F2;
	font-size:12px;
	margin:2px 5px;
}
#featured ul.ui-tabs-nav li img{
	float:left; margin:2px 5px;
	background:#F2F2F2;
	padding:2px;
	border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
	font-size:9px; font-family:Arial, Helvetica, sans-serif;
	line-height:18px;
    border-color: #000;
}
#featured li.ui-tabs-nav-item a{
	display:block;
	height:60px;
	color:#333;  background:#fff;
	line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
	background:#C3222A;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
	background:#2D6294;
}
#featured .ui-tabs-panel{
	width:450px;
    height:250px;
	background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
	position:absolute;
	top:180px; left:0;
	height:70px;
	background: url('clientscript/slider/images/transparent-bg.png');
    color:#fff;
}
#featured .info h2{
	font-size:18px; font-family:Arial, Helvetica, sans-serif;
	color:#fff; padding:5px; margin:0;
	overflow:hidden;
}
#featured .info p{
	margin:0 5px;
	font-family:Arial, Helvetica, sans-serif; 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('../forums/includes/class_bbcode.php');
	$bbcode_parser =& new vB_BbCodeParser($vbulletin, fetch_tag_list());
}

$forumid				= array(79);			// Set forum IDs here.
$limit					= '4';				// Limit the displayed slides
$chars					= 120;			// Character limit for the slide text, e.g. 100 is 100 characters limit.
$words					= 20;			// 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 = "../forums/showthread.php?t=".$threadid."";
$imagepath = "../forums/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='56px' width='100px' alt='' />";

$centerhtml .="<div id='fragment-".$div_id."' class='ui-tabs-panel' style=''>";
$centerhtml .="<img src='".$imagepath."' height='254px' width='450px' alt=''/>";
$centerhtml .="<div class='info'>";
$centerhtml .="<h2><a href='".$link."'>".$titleContent."</a></h2>";
$centerhtml .="<p>".$introtext."</p></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>";
}
?>

That is my current code, it's also ruining my sidebar. Can someone please help me correct the code, I'm not good with .php.

[JMEWLS`]

Anyone? I'm keen to get this done ASAP.

[JMEWLS`]

...