vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)
-   -   vBulletin CMS Widgets - United-Forum Nivo Slider Widget (https://vborg.vbsupport.ru/showthread.php?t=267024)

Lazorbeam 07-19-2011 01:32 PM

I'm having trouble getting the slider to work (static version posted above). Here's the code I used;

Code:

<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/nivo/nivo-slider_uf_theme.css" type="text/css" media="screen" />
    <div style="height:250px;">
    <div id="wrapper">
        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="/nivo/1Test.png" alt="" title="#htmlcaption1"
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>Items that should be on your snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>
    </div>

Note, the page already loads jquery 1.4.2 for TWS notifications. Does this have any implications?

Here's the test page where I've tried to load the widget: http://consortium.stormspire.net/con...The-Consortium

Mooff 07-19-2011 01:48 PM

Img tag is not closed.

Code:

<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/nivo/nivo-slider_uf_theme.css" type="text/css" media="screen" />
    <div style="height:250px;">
    <div id="wrapper">
        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="nivo/1Test.png" alt="" title="#htmlcaption1" /></a>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>Items that should be on your snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>
    </div>

try this one.

Ah i see, was my blunder in the code above - sorry


Edit:
If you have jquery 1.4 or higher allready running on your site you can delete that line:
<script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>

Lazorbeam 07-19-2011 02:29 PM

Quote:

Originally Posted by Mooff (Post 2222426)
Img tag is not closed.

Code:

<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/nivo/nivo-slider_uf_theme.css" type="text/css" media="screen" />
    <div style="height:250px;">
    <div id="wrapper">
        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="nivo/1Test.png" alt="" title="#htmlcaption1" /></a>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>Items that should be on your snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>
    </div>

try this one.

Ah i see, was my blunder in the code above - sorry


Edit:
If you have jquery 1.4 or higher allready running on your site you can delete that line:
<script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>

Fantastico. Looks like it's working. As you pointed out I needed to remove the line that calls jquery.

Next step is to add additional slides. I tried duplicating some code but failed miserably.

Also, it seems that the arrows are somewhat pixelated. Do the "overlay" graphics look normal to you?

Link again for convenience: http://consortium.stormspire.net/con...The-Consortium

Edit: Hang tight, I'll first go through the nivo site and see if I can fix my own problem.

Mooff 07-19-2011 02:48 PM

Quote:

Originally Posted by Lazorbeam (Post 2222440)
Also, it seems that the arrows are somewhat pixelated. Do the "overlay" graphics look normal to you?

No, they do not. I uploaded the wrong png by mistake in the zip file. New version is up, should look better.

ah well, since i'm typing anyway :p
Code:

        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="nivo/1Test.png" alt="" title="#htmlcaption1" /></a>
                  <a href="http://consortium.stormspire.net"><img src="nivo/2Test.png" alt="" title="#htmlcaption2" /></a>
                  <a href="http://consortium.stormspire.net"><img src="nivo/3Test.png" alt="" title="#htmlcaption3" /></a>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>Items that should be on your snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            <div id="htmlcaption2" class="nivo-html-caption">
                <b>Items that should be on your second snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            <div id="htmlcaption3" class="nivo-html-caption">
                <b>Items that should be on your third snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            </div>
        </div>


Lazorbeam 07-19-2011 02:49 PM

For anyone looking to add slides to static pages, add the following bold code;

Code:

<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/nivo/nivo-slider_uf_theme.css" type="text/css" media="screen" />
    <div style="height:250px;">
    <div id="wrapper">
        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="/nivo/1Test.png" alt="" title="#htmlcaption1" /></a>
                  <a href="http://consortium.stormspire.net"><img src="/nivo/2Test.png" alt="" title="#htmlcaption2" /></a>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>First slide..</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            <div id="htmlcaption2" class="nivo-html-caption">
                <b>Second slide..</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>

            </div>
        </div>

    </div>
    <script type="text/javascript" src="/nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>
    </div>

You also need to rename htmlcaption1 to htmlcaption2.

Alfa1 07-20-2011 03:26 AM

Im only getting the date, but no slider. Im using the code in the 1st post.

Mooff 07-20-2011 08:27 AM

Per default the execution code in a cms-php widget is returning the date.

After you create the widget you have to click on "Configure" on the right and insert my code.


edit: let me clarify that one.
You have to delete that code, which is in there by default:
Code:

$output = date(vB::$vbulletin->options['dateformat']) . "<br />\n";
If you post additional code below that line nothing will happen. It just takes the output value - and doesn't even evaluate the rest.

starman? 07-20-2011 01:52 PM

This would be awesome if I could get it to work. I get the title and text from the article but no images. I've followed your instructions precisely and have tried different sized images and still only the title and text shows. Any ideas?

Mooff 07-20-2011 02:05 PM

Some ideas:
  • set the fallback image switches to true:
    $show_articles_without_image = true;
    $fallback_img = 'external/unitedforum/slider/uf_fallback_slider.png'; //path to an existing picture

    If the images show up we at least know the slider is working correctly and the bug is somewhere in the vb4 implementation
  • the images are resized using the php GD package (vbulletin does support both GD and ImageMagick) - the slider currently has no ImageMagick support. Do you have the GD package installed?
  • comment out the first and the last line
    Code:

    //ob_start();

    //ob_end_clean();

    You will then see error messages and warnings (given there are some), once you load the cms page where your slider is active. Please send me this output.

starman? 07-20-2011 02:42 PM

GD already installed. I've done all the other changes you have suggested and still the same. Title and text - no image. No error messages or warnings.


All times are GMT. The time now is 03:41 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01711 seconds
  • Memory Usage 1,769KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (7)bbcode_code_printable
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (1)pagenav_pagelinkrel
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete