SMF Content Slider v.1.1

Started by Mick., July 05, 2011, 05:45:27 PM

Previous topic - Next topic

Mick.

Link to Mod

COMPATIBLE WITH SMF 2.0
[/center]

Demo: http://www.bluedevilcustoms.com/index.php?action=forum

Credits: Land Of Coder

This Jquery plugin may not play nice with others

Bug Fixes / Updates
1.) Created v.1 | March 2011
2.) Made input area boxes larger | March 2011
3.) Fixed xhtml compliance | July 2011
4.) Removed motools file from package and now uses Google's motools. | July 2011


*This mod installs a content slider below the menu in the header of your SMF forum installation.

*Easy to use. Simply add the URL to topics or external pages, URL to images and add a short description.

*Images work best if cropped to 900x300 pixels.

If you need support or need customize help, please post in the thread at SimpleMachines.org or @ bluedevilcustoms.com Thanks!

Mick.

#1
To use this mod with portals,... (Works best with TinyPortal as it uses the center wide blocks)

Remove this entire bit of code from the index.template.php and simply paste it to a PHP block in your portal of choice.

Fallbacks:
To use with simple portal, either left or right blocks cannot be used. Remember, the slider is quite wide. Create a 'Top" PHP block and wolla!

//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"></img></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"></img></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"></img></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"></img></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"></img></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"></img></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>';
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>';
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>';
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>';
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>';
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>';
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

Mick.


Matthew K.


Mick.


Diego Andrés


SMF Tricks - Free & Premium Responsive Themes for SMF.

pomak

Thanks, Firstly Great mod. Is it possible set height to 200 px ?  as like as width 900 px height 200 px

Mick.

@pomak, yes.

Open the slider-CSS folder and in the file change 300px to 200px as well in the bit found in the index.template.php

More-to-life

Great Mod thanks but I'm I the only one that thinks it looks..well not part of the forum?


Sorry to sound negative
UK Bike Forum - The biggest motorcycle forum magazine in Wales UK.
Gear Up Magazine - Gear Up Motorcycle Magazine.
United Bikers UK Motorcycle Forum - A Brand New UK Bike Forum.
Used Cars South Wales - Search For Your Next Used Car In Laleston, Bridgend, South Wales.
Bikers Of Wales Motorcycle Website - Motorbike Info
Honda - Honda UK

Mick.

No worries man. I use it on my forums, decided to share it.
I share the mods I make. I don't make mods on demand.

More-to-life

Quote from: bluedevil on July 06, 2011, 11:41:32 AM
No worries man. I use it on my forums, decided to share it.
I share the mods I make. I don't make mods on demand.

Your work is good & I'm using some of your mods as we speak

I've never been a big fan of sliders so maybe it's just me

Keep up the good work

Regards
WB
UK Bike Forum - The biggest motorcycle forum magazine in Wales UK.
Gear Up Magazine - Gear Up Motorcycle Magazine.
United Bikers UK Motorcycle Forum - A Brand New UK Bike Forum.
Used Cars South Wales - Search For Your Next Used Car In Laleston, Bridgend, South Wales.
Bikers Of Wales Motorcycle Website - Motorbike Info
Honda - Honda UK

Mick.

I use it on my site to promote 'write ups'. I don't use it for news etc.

www.chevyavalancheclub.com

Apllicmz

Yes good work
Nice Mod

When Update dont forget Portuguese Linguage

<file name="$themedir/languages/Modifications.portuguese_pt.php" error="skip">
        <operation>
            <search position="end" />
            <add><![CDATA[
//Slider strings translate By Candidosa2
$txt['slider_admin_menu'] = 'Slides';
$txt['slider_settings_title'] = 'Configura&ccedil;&atilde;o de Slides';
$txt['slider_settings_desc'] = 'Editar a configura&ccedil;&atilde;o do Mod SMF Slides';
$txt['slider_enabled'] = 'Activar Slide no SMF';
$txt['slider_title1'] = 'T&iacute;tulo do Slide 1';
$txt['slider_url1'] = 'URL para o t&oacute;pico ou link externo 1';
$txt['slider_img1'] = 'URL da imagem 1';
$txt['slider_short_text1'] = 'Pequena descri&ccedil;&atilde;o 1';
$txt['slider_title2'] = 'T&iacute;tulo do Slide 2';
$txt['slider_url2'] = 'URL para o t&oacute;pico ou link externo 2';
$txt['slider_img2'] = 'URL da imagem 2';
$txt['slider_short_text2'] = 'Pequena descri&ccedil;&atilde;o 2';
$txt['slider_title3'] = 'T&iacute;tulo do Slide 3';
$txt['slider_url3'] = 'URL para o t&oacute;pico ou link externo 3';
$txt['slider_img3'] = 'URL da imagem 3';
$txt['slider_short_text3'] = 'Pequena descri&ccedil;&atilde;o 3';
$txt['slider_title4'] = 'T&iacute;tulo do Slide 4';
$txt['slider_url4'] = 'URL para o t&oacute;pico ou link externo 4';
$txt['slider_img4'] = 'URL da imagem 4';
$txt['slider_short_text4'] = 'Pequena descri&ccedil;&atilde;o 4';
$txt['slider_title5'] = 'T&iacute;tulo do Slide 5';
$txt['slider_url5'] = 'URL para o t&oacute;pico ou link externo 5';
$txt['slider_img5'] = 'URL da imagem 5';
$txt['slider_short_text5'] = 'Pequena descri&ccedil;&atilde;o 5';
$txt['slider_title6'] = 'T&iacute;tulo do Slide 6';
$txt['slider_url6'] = 'URL para o t&oacute;pico ou link externo 6';
$txt['slider_img6'] = 'URL da imagem 6';
$txt['slider_short_text6'] = 'Pequena descri&ccedil;&atilde;o 6';
//End SMF Slider Strings Support SMFPT
]]></add>
        </operation>
    </file>
<file name="$themedir/languages/Modifications.portuguese_pt-utf8.php" error="skip">
        <operation>
            <search position="end" />
            <add><![CDATA[
//Slider strings translate By Candidosa2
$txt['slider_admin_menu'] = 'Slides';
$txt['slider_settings_title'] = 'Configura&ccedil;&atilde;o de Slides';
$txt['slider_settings_desc'] = 'Editar a configura&ccedil;&atilde;o do Mod SMF Slides';
$txt['slider_enabled'] = 'Activar Slide no SMF';
$txt['slider_title1'] = 'T&iacute;tulo do Slide 1';
$txt['slider_url1'] = 'URL para o t&oacute;pico ou link externo 1';
$txt['slider_img1'] = 'URL da imagem 1';
$txt['slider_short_text1'] = 'Pequena descri&ccedil;&atilde;o 1';
$txt['slider_title2'] = 'T&iacute;tulo do Slide 2';
$txt['slider_url2'] = 'URL para o t&oacute;pico ou link externo 2';
$txt['slider_img2'] = 'URL da imagem 2';
$txt['slider_short_text2'] = 'Pequena descri&ccedil;&atilde;o 2';
$txt['slider_title3'] = 'T&iacute;tulo do Slide 3';
$txt['slider_url3'] = 'URL para o t&oacute;pico ou link externo 3';
$txt['slider_img3'] = 'URL da imagem 3';
$txt['slider_short_text3'] = 'Pequena descri&ccedil;&atilde;o 3';
$txt['slider_title4'] = 'T&iacute;tulo do Slide 4';
$txt['slider_url4'] = 'URL para o t&oacute;pico ou link externo 4';
$txt['slider_img4'] = 'URL da imagem 4';
$txt['slider_short_text4'] = 'Pequena descri&ccedil;&atilde;o 4';
$txt['slider_title5'] = 'T&iacute;tulo do Slide 5';
$txt['slider_url5'] = 'URL para o t&oacute;pico ou link externo 5';
$txt['slider_img5'] = 'URL da imagem 5';
$txt['slider_short_text5'] = 'Pequena descri&ccedil;&atilde;o 5';
$txt['slider_title6'] = 'T&iacute;tulo do Slide 6';
$txt['slider_url6'] = 'URL para o t&oacute;pico ou link externo 6';
$txt['slider_img6'] = 'URL da imagem 6';
$txt['slider_short_text6'] = 'Pequena descri&ccedil;&atilde;o 6';
//End SMF Slider Strings Support SMFPT
]]></add>
        </operation>
    </file>
    <file name="$themedir/languages/Modifications.portuguese_brazilian.php" error="skip">
        <operation>
            <search position="end" />
            <add><![CDATA[
//Slider strings translate By Candidosa2
$txt['slider_admin_menu'] = 'Slides';
$txt['slider_settings_title'] = 'Configura&ccedil;&atilde;o de Slides';
$txt['slider_settings_desc'] = 'Editar a configura&ccedil;&atilde;o do Mod SMF Slides';
$txt['slider_enabled'] = 'Activar Slide no SMF';
$txt['slider_title1'] = 'T&iacute;tulo do Slide 1';
$txt['slider_url1'] = 'URL para o t&oacute;pico ou link externo 1';
$txt['slider_img1'] = 'URL da imagem 1';
$txt['slider_short_text1'] = 'Pequena descri&ccedil;&atilde;o 1';
$txt['slider_title2'] = 'T&iacute;tulo do Slide 2';
$txt['slider_url2'] = 'URL para o t&oacute;pico ou link externo 2';
$txt['slider_img2'] = 'URL da imagem 2';
$txt['slider_short_text2'] = 'Pequena descri&ccedil;&atilde;o 2';
$txt['slider_title3'] = 'T&iacute;tulo do Slide 3';
$txt['slider_url3'] = 'URL para o t&oacute;pico ou link externo 3';
$txt['slider_img3'] = 'URL da imagem 3';
$txt['slider_short_text3'] = 'Pequena descri&ccedil;&atilde;o 3';
$txt['slider_title4'] = 'T&iacute;tulo do Slide 4';
$txt['slider_url4'] = 'URL para o t&oacute;pico ou link externo 4';
$txt['slider_img4'] = 'URL da imagem 4';
$txt['slider_short_text4'] = 'Pequena descri&ccedil;&atilde;o 4';
$txt['slider_title5'] = 'T&iacute;tulo do Slide 5';
$txt['slider_url5'] = 'URL para o t&oacute;pico ou link externo 5';
$txt['slider_img5'] = 'URL da imagem 5';
$txt['slider_short_text5'] = 'Pequena descri&ccedil;&atilde;o 5';
$txt['slider_title6'] = 'T&iacute;tulo do Slide 6';
$txt['slider_url6'] = 'URL para o t&oacute;pico ou link externo 6';
$txt['slider_img6'] = 'URL da imagem 6';
$txt['slider_short_text6'] = 'Pequena descri&ccedil;&atilde;o 6';
//End SMF Slider Strings Support SMFPT
]]></add>
        </operation>
    </file>
<file name="$themedir/languages/Modifications.portuguese_brazilian-utf8.php" error="skip">
        <operation>
            <search position="end" />
            <add><![CDATA[
//Slider strings translate By Candidosa2
$txt['slider_admin_menu'] = 'Slides';
$txt['slider_settings_title'] = 'Configura&ccedil;&atilde;o de Slides';
$txt['slider_settings_desc'] = 'Editar a configura&ccedil;&atilde;o do Mod SMF Slides';
$txt['slider_enabled'] = 'Activar Slide no SMF';
$txt['slider_title1'] = 'T&iacute;tulo do Slide 1';
$txt['slider_url1'] = 'URL para o t&oacute;pico ou link externo 1';
$txt['slider_img1'] = 'URL da imagem 1';
$txt['slider_short_text1'] = 'Pequena descri&ccedil;&atilde;o 1';
$txt['slider_title2'] = 'T&iacute;tulo do Slide 2';
$txt['slider_url2'] = 'URL para o t&oacute;pico ou link externo 2';
$txt['slider_img2'] = 'URL da imagem 2';
$txt['slider_short_text2'] = 'Pequena descri&ccedil;&atilde;o 2';
$txt['slider_title3'] = 'T&iacute;tulo do Slide 3';
$txt['slider_url3'] = 'URL para o t&oacute;pico ou link externo 3';
$txt['slider_img3'] = 'URL da imagem 3';
$txt['slider_short_text3'] = 'Pequena descri&ccedil;&atilde;o 3';
$txt['slider_title4'] = 'T&iacute;tulo do Slide 4';
$txt['slider_url4'] = 'URL para o t&oacute;pico ou link externo 4';
$txt['slider_img4'] = 'URL da imagem 4';
$txt['slider_short_text4'] = 'Pequena descri&ccedil;&atilde;o 4';
$txt['slider_title5'] = 'T&iacute;tulo do Slide 5';
$txt['slider_url5'] = 'URL para o t&oacute;pico ou link externo 5';
$txt['slider_img5'] = 'URL da imagem 5';
$txt['slider_short_text5'] = 'Pequena descri&ccedil;&atilde;o 5';
$txt['slider_title6'] = 'T&iacute;tulo do Slide 6';
$txt['slider_url6'] = 'URL para o t&oacute;pico ou link externo 6';
$txt['slider_img6'] = 'URL da imagem 6';
$txt['slider_short_text6'] = 'Pequena descri&ccedil;&atilde;o 6';
//End SMF Slider Strings Support SMFPT
]]></add>
        </operation>
    </file>





MikeAsc

necesito soporte para instalar este mod en smf 2.0 rc5 theme: Dsv4 .. funciona bien con el theme default pero en dsv4 no se ve .. que puedo hacer?

Mick.

Quote from: MikeAsc on July 29, 2011, 01:35:34 AM
necesito soporte para instalar este mod en smf 2.0 rc5 theme: Dsv4 .. funciona bien con el theme default pero en dsv4 no se ve .. que puedo hacer?
busque soporte at dzinerstudios.com ese theme es premium.

thecoo1est

love the mod, its very AWESOME!!! Thanks for your work! :) I was wondering though if there is a way to set this to a percentage instead of a fixed width? It works out great in widescreen but for the few fullscreen it might effect, The main reason is because I want to keep my slider in the center portal of adk portal, I know it will work fine both full and wide in a top portal but I really like the way it looks in the center with the portals on the left. My website is below if you want to view it. If I cant set in to percentage its no big deal, I was just curious, most people need to have a widescreen these days anyway, lol.

www.psvita-mod.com

Mick.

Quote from: thecoo1est on August 04, 2011, 11:54:21 AM
love the mod, its very AWESOME!!! Thanks for your work! :) I was wondering though if there is a way to set this to a percentage instead of a fixed width? It works out great in widescreen but for the few fullscreen it might effect, The main reason is because I want to keep my slider in the center portal of adk portal, I know it will work fine both full and wide in a top portal but I really like the way it looks in the center with the portals on the left. My website is below if you want to view it. If I cant set in to percentage its no big deal, I was just curious, most people need to have a widescreen these days anyway, lol.

www.psvita-mod.com

Open slider-CSS folder. All your answers are in that file. Also, since you took out that bit of code from the index.template.php and put it on block, make sure you also make the changes there as well.

thecoo1est

thanks broham, I managed to get it to auto size for wide or full screen, still trying to get the pictures to shrink with fullscreen, but Im much happier, I will continue to tweak settings, thanks for pointing me in the right direction.

roobyroo

hello guys first time poster here,and would like same help if possible.

i installed your mod last month and everything was ok and running fine,but we had a problem with the site and had to rebuild from scratch,[wasnt the mods fault].

since rebuilding i cant get the content slider to show the images,images have been uploaded to photobucket and have the [img] tags in place.
the title is named
the url is in place
the img url is in there
and the description

but still will not show,could this be an error with our host provider,photobucket or the plugin.
i have even tried installing on a testsite with just SimplePortal,Aeva Media,SMF Content Slider v.1. over and over installing in different orders.[going bold here]
http://www.simplemachines.org/community/index.php?topic=441257.0 doesnt work.and cant find anything about this problem.
so am hoping this can be resolved,thanks for your time in making this mod and hope to hear something soon.

Mick.

Quote from: roobyroo on August 08, 2011, 02:51:17 PM
hello guys first time poster here,and would like same help if possible.

i installed your mod last month and everything was ok and running fine,but we had a problem with the site and had to rebuild from scratch,[wasnt the mods fault].

since rebuilding i cant get the content slider to show the images,images have been uploaded to photobucket and have the [img] tags in place.
the title is named
the url is in place
the img url is in there
and the description

but still will not show,could this be an error with our host provider,photobucket or the plugin.
i have even tried installing on a testsite with just SimplePortal,Aeva Media,SMF Content Slider v.1. over and over installing in different orders.[going bold here]
http://www.simplemachines.org/community/index.php?topic=441257.0 doesnt work.and cant find anything about this problem.
so am hoping this can be resolved,thanks for your time in making this mod and hope to hear something soon.

What happens when installed on default theme?

Advertisement: