On a test version of my website www.atkcommunity.com I am trying out a content slider. I found the original code here and have ALMOST made it completely work on my vBadvanced homepage .
It works by taking the most recent 4 posts from the "Announcements" forum (assuming they have image attachments) and displays them on the slider.
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?
Here's the code that I'm calling in my vBa module:
and here's the CSS:
It was all originally based on this: http://demo.webdeveloperplus.com/fea...ontent-slider/
Thanks!
It works by taking the most recent 4 posts from the "Announcements" forum (assuming they have image attachments) and displays them on the slider.
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?
Here's the code that I'm calling in my vBa module:
PHP Code:
<!-- 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('http://www.atkcommunity.com/includes/class_bbcode.php');
$bbcode_parser =& new vB_BbCodeParser($vbulletin, fetch_tag_list());
}
$forumid = array(2); // 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 = "../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, 20).'...';
} else {
$titleContent = substr($titleContent, 0, 20).'...';
}
// 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='25px' width='40px' alt='' />";
$tabhtml .="<span>".$titleContent." ".$update."</span></a></li>";
$centerhtml .="<div id='fragment-".$div_id."' class='ui-tabs-panel' style=''>";
$centerhtml .="<img src='".$imagepath."' 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>";
}
?>
Code:
#featured{ width:400px; padding-right:150px; position:relative; border:5px solid #ccc; height:250px; background:#fff; } #featured ul.ui-tabs-nav{ position:absolute; top:0; left:400px; list-style:none; padding:0; margin:0; width:150px; } #featured ul.ui-tabs-nav li{ padding:1px 0; padding-left:13px; font-size:12px; color:#666; } #featured ul.ui-tabs-nav li img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; } #featured ul.ui-tabs-nav li span{ font-size:9px; font-family:Verdana; 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:#f2f2f2; } #featured li.ui-tabs-selected{ background:url('clientscript/slider/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: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:Georgia, serif; color:#fff; padding:5px; 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; }
Thanks!