Topic: Content Slider Mod

[grimm93]

www.akatsuki-gaming.com

As you can see on my site, i have BlueDevil's Content Slider

I don't like the fact that it shows up on every page, so i was wondering how to place it in a block?
I have tried Placing it in a Custom php block; however, it doesn't work.

This is the code,

Code: [Select]

//SMF Slider v.1 by: bluedevilcustoms.com
global $modSettings;
if (!empty($modSettings['slider_enabled']) && (!empty($modSettings['slider_title1']) && !empty($modSettings['slider_img1']) || !empty($modSettings['slider_title2']) && !empty($modSettings['slider_img2']) || !empty($modSettings['slider_title3']) && !empty($modSettings['slider_img3']) || !empty($modSettings['slider_title4']) && !empty($modSettings['slider_img4']) || !empty($modSettings['slider_title5']) && !empty($modSettings['slider_img5']) || !empty($modSettings['slider_title6']) && !empty($modSettings['slider_img6'])))
{
echo '<br />
<div class="center">
<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="lof-main-wapper">
', !empty($modSettings['slider_title1']) && !empty($modSettings['slider_img1']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img1']. '" title="'. $modSettings['slider_title1']. '" alt="'. $modSettings['slider_title1']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title2']) && !empty($modSettings['slider_img2']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img2']. '" title="'. $modSettings['slider_title2']. '" alt="'. $modSettings['slider_title2']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title3']) && !empty($modSettings['slider_img3']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img3']. '" title="'. $modSettings['slider_title3']. '" alt="'. $modSettings['slider_title3']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title4']) && !empty($modSettings['slider_img4']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img4']. '" title="'. $modSettings['slider_title4']. '" alt="'. $modSettings['slider_title4']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title5']) && !empty($modSettings['slider_img5']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img5']. '" title="'. $modSettings['slider_title5']. '" alt="'. $modSettings['slider_title5']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title6']) && !empty($modSettings['slider_img6']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img6']. '" title="'. $modSettings['slider_title6']. '" alt="'. $modSettings['slider_title6']. '" height="300" width="900"></div>' : '', '
</div>   
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="lof-navigator-outer">
<ul class="lof-navigator">';
// Item One
if (!empty($modSettings['slider_title1']) && !empty($modSettings['slider_img1']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img1']))
echo '<img src="', $modSettings['slider_img1'], '" alt="', !empty($modSettings['slider_short_text1']) ? $modSettings['slider_short_text1'] : '*', '" />';
                echo '<h3>
', !empty($modSettings['slider_url1']) ? '<a href="'. $modSettings['slider_url1']. '" target="_self">'. $modSettings['slider_title1']. '</a>' : $modSettings['slider_title1'], '
</h3>
', !empty($modSettings['slider_short_text1']) ? '<span>'. $modSettings['slider_short_text1']. '</span>' : '', '
</div> 
</li>';
}
// Item Two
if (!empty($modSettings['slider_title2']) && !empty($modSettings['slider_img2']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img2']))
echo '<img src="', $modSettings['slider_img2'], '" alt="', !empty($modSettings['slider_short_text2']) ? $modSettings['slider_short_text2'] : '*', '" />';
                echo '<h3>
', !empty($modSettings['slider_url2']) ? '<a href="'. $modSettings['slider_url2']. '" target="_self">'. $modSettings['slider_title2']. '</a>' : $modSettings['slider_title2'], '
</h3>
', !empty($modSettings['slider_short_text2']) ? '<span>'. $modSettings['slider_short_text2']. '</span>' : '', '
</div> 
</li>';
}
// Item Three
if (!empty($modSettings['slider_title3']) && !empty($modSettings['slider_img3']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img3']))
echo '<img src="', $modSettings['slider_img3'], '" alt="', !empty($modSettings['slider_short_text3']) ? $modSettings['slider_short_text3'] : '*', '" />';
                echo '<h3>
', !empty($modSettings['slider_url3']) ? '<a href="'. $modSettings['slider_url3']. '" target="_self">'. $modSettings['slider_title3']. '</a>' : $modSettings['slider_title3'], '
</h3>
', !empty($modSettings['slider_short_text3']) ? '<span>'. $modSettings['slider_short_text3']. '</span>' : '', '
</div> 
</li>';
}
// Item Four
if (!empty($modSettings['slider_title4']) && !empty($modSettings['slider_img4']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img4']))
echo '<img src="', $modSettings['slider_img4'], '" alt="', !empty($modSettings['slider_short_text4']) ? $modSettings['slider_short_text4'] : '*', '" />';
                echo '<h4>
', !empty($modSettings['slider_url4']) ? '<a href="'. $modSettings['slider_url4']. '" target="_self">'. $modSettings['slider_title4']. '</a>' : $modSettings['slider_title4'], '
</h4>
', !empty($modSettings['slider_short_text4']) ? '<span>'. $modSettings['slider_short_text4']. '</span>' : '', '
</div> 
</li>';
}
// Item Five
if (!empty($modSettings['slider_title5']) && !empty($modSettings['slider_img5']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img5']))
echo '<img src="', $modSettings['slider_img5'], '" alt="', !empty($modSettings['slider_short_text5']) ? $modSettings['slider_short_text5'] : '*', '" />';
                echo '<h5>
', !empty($modSettings['slider_url5']) ? '<a href="'. $modSettings['slider_url5']. '" target="_self">'. $modSettings['slider_title5']. '</a>' : $modSettings['slider_title5'], '
</h5>
', !empty($modSettings['slider_short_text5']) ? '<span>'. $modSettings['slider_short_text5']. '</span>' : '', '
</div> 
</li>';
}
// Item Six
if (!empty($modSettings['slider_title6']) && !empty($modSettings['slider_img6']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img6']))
echo '<img src="', $modSettings['slider_img6'], '" alt="', !empty($modSettings['slider_short_text6']) ? $modSettings['slider_short_text6'] : '*', '" />';
                echo '<h6>
', !empty($modSettings['slider_url6']) ? '<a href="'. $modSettings['slider_url6']. '" target="_self">'. $modSettings['slider_title6']. '</a>' : $modSettings['slider_title6'], '
</h6>
', !empty($modSettings['slider_short_text6']) ? '<span>'. $modSettings['slider_short_text6']. '</span>' : '', '
</div> 
</li>';
}
echo '</ul>
</div>
</div>
</div>
<script type="text/javascript">
var _lofmain =  $(\'lofslidecontent45\');
var _lofscmain = _lofmain.getElement(\'.lof-main-wapper\');
var _lofnavigator = _lofmain.getElement(\'.lof-navigator-outer .lof-navigator\');
var object = new LofFlashContent( _lofscmain,
  _lofnavigator,
  _lofmain.getElement(\'.lof-navigator-outer\'),
  { fxObject:{ transition:Fx.Transitions.Quad.easeInOut,  duration:800},
interval:3000,
direction:\'opacity\' } );
object.start( true, _lofmain.getElement(\'.preload\') );
</script>';
}
//End of SMF Slider v.1
I hope you can help.

[AngelinaBelle]

Now, you start the trouble shooting. Whenever something doesn't work, it is time to start figuring out why.
I am sure you can get some help here, if you provide some information
Because I have no idea what the problem is, I will ask you these questions:
1) Is the mod currently installed?
2) Is it working in index.template.php?
3) Are there any error messages when you preview the block?
4) Are you able to save the block?
5) Do you get any error messages in the SMF error log when you view a page that has the block on it?

[grimm93]

Thanks for the reply,
1) Is the mod currently installed?
Yes, it is.
2) Is it working in index.template.php?
Yeah, i had help from Dzinerstudio on how to manually add it.
3) Are there any error messages when you preview the block?
None
4) Are you able to save the block?
Yes
5) Do you get any error messages in the SMF error log when you view a page that has the block on it?
No
on the following attachment it shows the mod. The top part is how its supposed to look, and the bottom half shows How it looks on the block

[WingZero]

grimm93,

could you teach me how to do this as well?

Regards,

[grimm93]

Get the mod from http://www.bluedevilcustoms.com/

For the Theme im using from Dzinerstudio this is what Bikken told me to add,
In index.template file find:

Code: [Select]

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];
add after:

Code: [Select]

echo '
        <link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/slider-css/style.css" />
        <script language="javascript" type="text/javascript" src="', $settings['default_theme_url'], '/slider-js/mootools.svn.js"></script>
        <script language="javascript" type="text/javascript" src="', $settings['default_theme_url'], '/slider-js/lofslidernews.mt11.js"></script>';
Then find:

Code: [Select]

<div id="main_content">
<div id="main_content_inner">';
add after:

Code: [Select]

//SMF Slider v.1 by: bluedevilcustoms.com
global $modSettings;
if (!empty($modSettings['slider_enabled']) && (!empty($modSettings['slider_title1']) && !empty($modSettings['slider_img1']) || !empty($modSettings['slider_title2']) && !empty($modSettings['slider_img2']) || !empty($modSettings['slider_title3']) && !empty($modSettings['slider_img3']) || !empty($modSettings['slider_title4']) && !empty($modSettings['slider_img4']) || !empty($modSettings['slider_title5']) && !empty($modSettings['slider_img5']) || !empty($modSettings['slider_title6']) && !empty($modSettings['slider_img6'])))
{
echo '<br />
<div class="center">
<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="lof-main-wapper">
', !empty($modSettings['slider_title1']) && !empty($modSettings['slider_img1']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img1']. '" title="'. $modSettings['slider_title1']. '" alt="'. $modSettings['slider_title1']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title2']) && !empty($modSettings['slider_img2']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img2']. '" title="'. $modSettings['slider_title2']. '" alt="'. $modSettings['slider_title2']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title3']) && !empty($modSettings['slider_img3']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img3']. '" title="'. $modSettings['slider_title3']. '" alt="'. $modSettings['slider_title3']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title4']) && !empty($modSettings['slider_img4']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img4']. '" title="'. $modSettings['slider_title4']. '" alt="'. $modSettings['slider_title4']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title5']) && !empty($modSettings['slider_img5']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img5']. '" title="'. $modSettings['slider_title5']. '" alt="'. $modSettings['slider_title5']. '" height="300" width="900"></div>' : '', '
', !empty($modSettings['slider_title6']) && !empty($modSettings['slider_img6']) ? '<div class="lof-main-item"><img src="'. $modSettings['slider_img6']. '" title="'. $modSettings['slider_title6']. '" alt="'. $modSettings['slider_title6']. '" height="300" width="900"></div>' : '', '
</div>   
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="lof-navigator-outer">
<ul class="lof-navigator">';
// Item One
if (!empty($modSettings['slider_title1']) && !empty($modSettings['slider_img1']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img1']))
echo '<img src="', $modSettings['slider_img1'], '" alt="', !empty($modSettings['slider_short_text1']) ? $modSettings['slider_short_text1'] : '*', '" />';
                echo '<h3>
', !empty($modSettings['slider_url1']) ? '<a href="'. $modSettings['slider_url1']. '" target="_self">'. $modSettings['slider_title1']. '</a>' : $modSettings['slider_title1'], '
</h3>
', !empty($modSettings['slider_short_text1']) ? '<span>'. $modSettings['slider_short_text1']. '</span>' : '', '
</div> 
</li>';
}
// Item Two
if (!empty($modSettings['slider_title2']) && !empty($modSettings['slider_img2']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img2']))
echo '<img src="', $modSettings['slider_img2'], '" alt="', !empty($modSettings['slider_short_text2']) ? $modSettings['slider_short_text2'] : '*', '" />';
                echo '<h3>
', !empty($modSettings['slider_url2']) ? '<a href="'. $modSettings['slider_url2']. '" target="_self">'. $modSettings['slider_title2']. '</a>' : $modSettings['slider_title2'], '
</h3>
', !empty($modSettings['slider_short_text2']) ? '<span>'. $modSettings['slider_short_text2']. '</span>' : '', '
</div> 
</li>';
}
// Item Three
if (!empty($modSettings['slider_title3']) && !empty($modSettings['slider_img3']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img3']))
echo '<img src="', $modSettings['slider_img3'], '" alt="', !empty($modSettings['slider_short_text3']) ? $modSettings['slider_short_text3'] : '*', '" />';
                echo '<h3>
', !empty($modSettings['slider_url3']) ? '<a href="'. $modSettings['slider_url3']. '" target="_self">'. $modSettings['slider_title3']. '</a>' : $modSettings['slider_title3'], '
</h3>
', !empty($modSettings['slider_short_text3']) ? '<span>'. $modSettings['slider_short_text3']. '</span>' : '', '
</div> 
</li>';
}
// Item Four
if (!empty($modSettings['slider_title4']) && !empty($modSettings['slider_img4']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img4']))
echo '<img src="', $modSettings['slider_img4'], '" alt="', !empty($modSettings['slider_short_text4']) ? $modSettings['slider_short_text4'] : '*', '" />';
                echo '<h4>
', !empty($modSettings['slider_url4']) ? '<a href="'. $modSettings['slider_url4']. '" target="_self">'. $modSettings['slider_title4']. '</a>' : $modSettings['slider_title4'], '
</h4>
', !empty($modSettings['slider_short_text4']) ? '<span>'. $modSettings['slider_short_text4']. '</span>' : '', '
</div> 
</li>';
}
// Item Five
if (!empty($modSettings['slider_title5']) && !empty($modSettings['slider_img5']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img5']))
echo '<img src="', $modSettings['slider_img5'], '" alt="', !empty($modSettings['slider_short_text5']) ? $modSettings['slider_short_text5'] : '*', '" />';
                echo '<h5>
', !empty($modSettings['slider_url5']) ? '<a href="'. $modSettings['slider_url5']. '" target="_self">'. $modSettings['slider_title5']. '</a>' : $modSettings['slider_title5'], '
</h5>
', !empty($modSettings['slider_short_text5']) ? '<span>'. $modSettings['slider_short_text5']. '</span>' : '', '
</div> 
</li>';
}
// Item Six
if (!empty($modSettings['slider_title6']) && !empty($modSettings['slider_img6']))
{
echo '<li>
<div>';
if (!empty($modSettings['slider_img6']))
echo '<img src="', $modSettings['slider_img6'], '" alt="', !empty($modSettings['slider_short_text6']) ? $modSettings['slider_short_text6'] : '*', '" />';
                echo '<h6>
', !empty($modSettings['slider_url6']) ? '<a href="'. $modSettings['slider_url6']. '" target="_self">'. $modSettings['slider_title6']. '</a>' : $modSettings['slider_title6'], '
</h6>
', !empty($modSettings['slider_short_text6']) ? '<span>'. $modSettings['slider_short_text6']. '</span>' : '', '
</div> 
</li>';
}
echo '</ul>
</div>
</div>
</div>
<script type="text/javascript">
var _lofmain =  $(\'lofslidecontent45\');
var _lofscmain = _lofmain.getElement(\'.lof-main-wapper\');
var _lofnavigator = _lofmain.getElement(\'.lof-navigator-outer .lof-navigator\');
var object = new LofFlashContent( _lofscmain,
  _lofnavigator,
  _lofmain.getElement(\'.lof-navigator-outer\'),
  { fxObject:{ transition:Fx.Transitions.Quad.easeInOut,  duration:800},
interval:3000,
direction:\'opacity\' } );
object.start( true, _lofmain.getElement(\'.preload\') );
</script>';
}
//End of SMF Slider v.1[/quote]

Idk if this is helpful to you

[AngelinaBelle]

I still don't know what you mean by "doesn't work".
Could you circle the place where your content slider-in-a-block is supposed to show?

[WingZero]

Thanks so much grimm93!!!!

Also, is there anyway to just keep this content slider mod in the Home/Portal page? I don't want it showing in Forums section, etc.

[grimm93]

it's currently on my site, to the left of user info block.

http://www.akatsuki-gaming.com/index.php
You will see that it's only loading and nothing shows up.


Wingzero that is what im trying to get help with on here.

[AngelinaBelle]

I see what you mean now.
You might ask bluedevil about this one -- I have not picked through his code.
I think there *MIGHT* be a problem having two content sliders on the same page.  BlueDevil's code relies on mootools code that uses getelementbyid.  I think. In any case, the rules of HTML and XHTML demand only one  <div class="lof-slidecontent" id="lofslidecontent45">  on a page.
The whole thing MIGHT work better if you pulled the content slider out of your theme. Or it might not. I cannot be sure without getting deeper into the code and doing a bit of debugging.

[grimm93]

Well i tried  bluedevil but i don't think he's alive anymore lol jk but seriously he doesn't reply on his website.

Is there a way i can add another similar one, just by using code? without mod

like if have seen jquery sliders but i have no idea how to add them lmao

[AngelinaBelle]

I'm going to recommend beginning by removing the mod's code from the theme.
It might just work.
You might find some help from other mod users in the mod's topic.

[grimm93]

okay, i removed the code. check out what it did on my site. . . idk how to explain that.

[grimm93]

0.o i fixed it,  i had to keep in the template.

Code: [Select]

echo '
        <link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/slider-css/style.css" />
        <script language="javascript" type="text/javascript" src="', $settings['default_theme_url'], '/slider-js/mootools.svn.js"></script>
        <script language="javascript" type="text/javascript" src="', $settings['default_theme_url'], '/slider-js/lofslidernews.mt11.js"></script>';
Now im just wondering if there's a way to make it smaller or do i make the forums bigger(width)?

[AngelinaBelle]

Yes, you are correct -- keeping the css and the javascript is necessary.
I can see, for example, <img width="900" height="300" title="Xbox Live" alt="Xbox Live" src="http://www.activewin.com/faq/xbox360images/xboxlive_logo.jpg"/>
I do not know if the mod has settings to control the image size, or if you will have to modify the code to change this. You might ask about this on the mod's support topic -- another user may answer you.

[grimm93]

Whatever, ill just leave it like that xD

thanks for the help!!

[AngelinaBelle]

I'm glad you solved it!