Page 1 of 2 12 LastLast
Results 1 to 20 of 28

Thread: [Module] Integrating WebDeveloperPlus' Featured Content Slider in vba

  1. #1
    Join Date
    Apr 2005
    Posts
    12

    Default [Module] Integrating WebDeveloperPlus' Featured Content Slider in vba

    Hi All,

    I have been waiting for the stand alone version of frontpage slide show to get it integrate it with vba. However the creators have been very disappointing in terms of delivering it. Hence, I have started searching for alternative and finally got one.

    This hack was written by webdeveloperplus and I am only giving instructions in how to integrate it to vba.

    So let the fun begin and integrate this in ONLY THREE STEPS

    First go to vBulleting ACP --> Style Manager --> Edit Templates

    Open "headinclude" and ADD the following code at the end of it
    Code:
    <!-- Rotating Code -->
    <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 -->
    Second go to vBulleting ACP --> Style Manager --> Main CSS

    Scroll to the bottom of the page where it says "Additional CSS Definitions"; which is partitioned in to two parts ADD the following code to the second partition.
    Code:
    /* ***** Rotating Articles ***** */
    #featured{
        width:400px;
        padding-right:250px;
        position:relative;
        height:250px;
        background:#fff;
        border:5px solid #ccc;
    }
    
    #featured ul.ui-tabs-nav{
        position:absolute;
        top:0; left:400px;
        list-style:none;
        padding:0; margin:0;
        width:250px;
    }
    #featured ul.ui-tabs-nav li{
        padding:1px 0; padding-left:13px;
        font-size:12px;
        color:#666;
    }
    #featured ul.ui-tabs-nav li span{
        font-size:11px; font-family:Verdana;
        line-height:18px;
    }
    #featured .ui-tabs-panel{
        width:400px; height:250px;
        background:#999; position:relative;
            overflow:hidden;
    }
    #featured .ui-tabs-hide{
        display:none;
    }
    #featured li.ui-tabs-nav-item a{/*On Hover Style*/
        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{ /*Selected tab style*/
        background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif') top left no-repeat;
    }
    #featured ul.ui-tabs-nav li.ui-tabs-selected a{
        background:#ccc;
    }
    #featured ul.ui-tabs-nav li img{
        float:left; margin:2px 5px;
        background:#fff;
        padding:2px;
        border:1px solid #eee;
    }
    #featured .ui-tabs-panel .info{
        position:absolute;
        top:180px; left:0;
        height:70px;
        background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');
    }
    #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;
    }
    Third and Last, go to vBulleting ACP --> vBa CMPS --> Add Module --> Template Module

    Ok now we'll have to create the actual box

    Module Title: Rotating Articles
    Active: Yes
    Template to incluce: adv_portal_rotating_articles
    Style: "Pick the Style you would like to add it to" Please note if you are adding it to more than one style make sure that you do the previous two steps to all of them.

    Template Content: ADD the following code
    Code:
    <div id="featured" >
        <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
        </ul>
        <!-- First Content -->
        <div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="images/image1.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
            </div>
        </div>
        <!-- Second Content -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image2.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
            <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
            </div>
        </div>
        <!-- Third Content -->
        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image3.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >35 Amazing Logo Designs</a></h2>
            <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
            </div>
        </div>
        <!-- Fourth Content -->
        <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image4.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
            <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
            </div>
        </div>
    </div>
    
    <!-- Rotating Code -->
    <script type="text/javascript">
        $(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
        });
    </script>
    <!-- / Rotating Code -->
    Use Module Wrapper Template: No
    Then just SAVE.

    Then just add it to whatever page you would like it to show in vba

    ok now it will be working perfectly except for the pictures which needs to be changed as well as the TEXT

    To change the small Pictures please change the green text above
    To change the small picture' texts please change the dark green text above
    To change the larger pictures please change the orange text above
    To change the Larger text in the larger pictures please change the brown text above
    To change the smaller text in the larger pictures please change the purple text above

    I hope you all are familiar with the <a href="..."> as a the larger text has one to link to the thread or whatever you want as well as the smaller text has one right after it with a click-able "read more"

    I hope this is easy to follow.

    ENJOY
    Last edited by qtrcafe; 07-31-2009 at 06:06 AM.

  2. #2
    Join Date
    Nov 2008
    Posts
    3

    Default

    IT works perfect

    Thanks a lot!

  3. #3
    Join Date
    Apr 2009
    Posts
    21

  4. #4
    Join Date
    Aug 2009
    Posts
    13

    Default

    Is there a way to modify this so the navigation is on the left instead of the right?

  5. #5

    Default

    may I ask whether this can pull threads from your forums with the image, please?

    Or do you have to do that manually?

    Thanks

  6. #6
    Join Date
    Aug 2009
    Posts
    13

    Default

    You have to do it manually.

  7. #7
    Join Date
    Apr 2007
    Posts
    1

    Default

    Almost everything is working fine, except the articles are not rotating.

    What did I do wrong?

    Thanks.

  8. #8
    Join Date
    Mar 2004
    Location
    A galaxy far, far away...
    Posts
    6,609

    Default

    Any places to see this module in action?

  9. #9

  10. #10
    Join Date
    Feb 2009
    Posts
    10

    Default Pulling Posts and Assistance

    I saw this post and decided to see if I could make something work and I was able to use some concepts from FPSS (which I purchased a while ago) as well as the info provided here.

    This now will pull posts from designated forums.

    What I need help with is better control and code review by someone better than me...

    Can someone check this out and see if this can be re-written into something more professional?

    One thing I need help with is:
    to keep the script from cutting off a posting midway through a BB or HTML tag and causing errors, I set all BB Parsing to false.

    This leave the tag in place (i.e. [ATTACH], [IMG], etc...)
    Is there a method to drop these tags out of the parsed text (similar to how the email system works or archive) ???



    PHP Code:
    <style>
    #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('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('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;
    }
    </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
    $curdir 
    getcwd ();
    chdir('/home/yourdomian/public_html');

    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($vbulletinfetch_tag_list());
    }

    $forumid                = array(184,149);            // Set forum IDs here.
    $limit                    '2';                // 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'];

     
    // 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($introtext0$chars).'...';
    } else {
     
    $introtext substr($introtext0$chars).'...';
    }
    }
    // if word limitation is defined
    if ($words) {
    $word_arr str_word_count($introtext2);
    $c 0;
    foreach (
    $word_arr AS $k => $v) {
    if (
    $c == $words) {
    if(
    function_exists("mb_string")) {
    $introtext mb_substr($introtext0$k).'...';
    } else {
    $introtext substr($introtext0$k).'...';
    }
    break;
    }
    $c++;
    }
    }

    $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>";
    }
    ?>

  11. #11
    Join Date
    Jan 2010
    Posts
    2

  12. #12
    Join Date
    Oct 2008
    Posts
    13

    Default

    Works great! Thanks!!

    Anyway to add a <br> tag in the css so it isn't stuck with the module under it?

    Edit: Nevermind, you just add it on the last div tag of the style (3rd step)
    Last edited by Andio; 02-14-2010 at 12:48 AM.

  13. #13
    Join Date
    May 2007
    Location
    dis_United Kingdom
    Posts
    27

    Default

    @Andio, where exactly is the 3rd step so we can place the <br> tag? I to have it sticking!

    Thanks!

    Moorehead Enterprise Forums
    http://www.moorehead.tk
    Home Coffee Roasters Network
    Reedswood's Blog

  14. #14
    Join Date
    Oct 2008
    Posts
    13

    Default

    This is what I used for the third step the author provided. The <br> is at the very end of the last <div> tag.

    Code:
    <div id="featured" >
        <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
        </ul>
        <!-- First Content -->
        <div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="images/image1.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
            </div>
        </div>
        <!-- Second Content -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image2.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
            <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
            </div>
        </div>
        <!-- Third Content -->
        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image3.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >35 Amazing Logo Designs</a></h2>
            <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
            </div>
        </div>
        <!-- Fourth Content -->
        <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image4.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
            <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
            </div>
        </div>
    </div><br>
    
    <!-- Rotating Code -->
    <script type="text/javascript">
        $(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
        });
    </script>
    <!-- / Rotating Code -->

  15. #15
    Join Date
    May 2007
    Location
    dis_United Kingdom
    Posts
    27

    Default

    thanks, Andio...found what to insert, but still sticks; not changing image! Tried IE and FF!

    Moorehead Enterprise Forums
    http://www.moorehead.tk
    Home Coffee Roasters Network
    Reedswood's Blog

  16. #16
    Join Date
    Oct 2008
    Posts
    13

    Default

    Are you using the module wrapper?? If you are turn it off.

    If you are, I'm not sure how to help you. Try adding 2 <br> tags and see if that helps.

  17. #17
    Join Date
    May 2007
    Location
    dis_United Kingdom
    Posts
    27

    Default

    nah, doesn't work, still stickin' on vB4 despite your suggestions. Thanks anyhow!

    Moorehead Enterprise Forums
    http://www.moorehead.tk
    Home Coffee Roasters Network
    Reedswood's Blog

  18. #18
    Join Date
    Oct 2008
    Posts
    13

    Default

    Might be vB4 then.I 'm using vB3 and it's working fine. No problem.

  19. #19
    Join Date
    Jun 2007
    Posts
    4

    Default

    Mine isn't rotating for some odd reason... It shows the first picture, but not the next 3. It just seems to be stuck.
    Last edited by Bojangles6; 05-05-2010 at 11:00 PM.

  20. #20

    Default

    upgraded to vb 4.0.3 and the slideshow is on the page I need it to be on but it's not changing images....in the vBa admin where you edit the modules-where you click "preview"-it works fine but not on the page....weird...any ideas?

Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Need help adding new module (Featured Content Slider)
    By BenIsrael in forum "How Do I..." Questions
    Replies: 1
    Last Post: 03-09-2009, 11:45 AM
  2. Featured Module
    By CasualConvo in forum "How Do I..." Questions
    Replies: 1
    Last Post: 05-30-2008, 01:40 PM
  3. Featured Module in CMPS 3.0
    By juinjuin in forum "How Do I..." Questions
    Replies: 1
    Last Post: 03-31-2008, 01:03 PM
  4. Featured Module
    By ManagerJosh in forum Troubleshooting & Problems
    Replies: 2
    Last Post: 11-28-2007, 09:38 PM
  5. Featured Blog module
    By ludachris in forum Module & Modification Discussion & Requests
    Replies: 0
    Last Post: 11-07-2007, 05:30 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •