Amazingly Simple and Beautiful. Brand spankin' new free SMF themes every month.

SMF Content Slider v.1

Mick
Dec 09, 2012
It was doing that before I made any changes
ok. I'm on my way home and ill help you on it. Hard to see things with an iPad. ;)
45

JoliePittOnline
Jan 17, 2013
I think I have the same problem with Vaugn. When I activated the slider, it was showing fine but just below it, there are I think four or five loading gif as if trying to load four more sliders. I thought it might be because I only put 4 images but when I used the 6 available options, it is still the same. I hope you can check this one out Mick.
46

Mick
Jan 17, 2013
I think I have the same problem with Vaugn. When I activated the slider, it was showing fine but just below it, there are I think four or five loading gif as if trying to load four more sliders. I thought it might be because I only put 4 images but when I used the 6 available options, it is still the same. I hope you can check this one out Mick.

Ok, ill take a look today  ;)
47

JoliePittOnline
Jan 21, 2013
It worked for me when I used it instead with a portal block. :D
48

Vaughn
Jan 25, 2013
How do you change the speed of the slider?
49

Mick
Jan 25, 2013
How do you change the speed of the slider?
check in the slider js file. I don't remember the exact speed but look for something like 3000 or 5000.
50

Vaughn
Jan 26, 2013
if( typeof(LofSlideshow) == 'undefined' ){
   var LofFlashContent = new Class( {
      initialize:function( eMain, eNavigator, eNavOuter, options ){
         this.setting = Object.extend({
            autoStart         : true,
            descStyle          : 'sliding',
            mainItemSelector    : 'div.lof-main-item',
            navSelector        : 'li' ,
            navigatorEvent      : 'click',
            interval            : 6000,
            auto             : false,
            navItemsDisplay      : 3,
            startItem         : 0,
            navItemHeight      : 100


Interval? I think I tried changing it to 6000 but it doesn't make any difference.
51

Mick
Jan 26, 2013
Theres 2 instances.... One in the slider js folder.... and another on the BoardIndex.template.php


BoardIndex.template.php

		<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




slider-js

 ////
if( typeof(LofSlideshow) == 'undefined' ){
var LofFlashContent = new Class( {
initialize:function( eMain, eNavigator, eNavOuter, options ){
this.setting = Object.extend({
autoStart : true,
descStyle     : 'sliding',
mainItemSelector    : 'div.lof-main-item',
navSelector  : 'li' ,
navigatorEvent : 'click',
interval   :  2000,
auto     : false,
navItemsDisplay : 3,
startItem : 0,
navItemHeight : 100
}, options || {} );
52

Vaughn
Jan 26, 2013
That explains it :)

Thanks
53

Dave (Dim)
Mar 09, 2013
Worked a treat first time in a portal block.

Being having a play around to make it responsive.

First tried setting a class to hide the whole lot based on screen size and then surrounding all the php in the portal block in that class and that failed miserably.

ended up taking a short cut

style.css - specifying to show over 1220px wide (which happens to be the width of my right portal block plus the slider), and hide under 1220. Works a treat. Even if it is a rather ugly way of doing it as rather than just hiding the whole lot im hiding each element individually.


/* Show the slider formatted over 1220px wide */

@media (min-width: 1220px) {

/* SMF Slider */
.lof-slidecontent{
position:relative;
overflow:hidden;
border:#F4F4F4 solid 1px;
width:892px;
height:300px;
}
.lof-slidecontent .preload{
height:100%;
width:100%;
background:#FFF;
position:absolute;
top:0;
left:0;
z-index:100000;
color:#FFF;
text-align:center
}
.lof-slidecontent .preload div{
height:100%;
width:100%;
background:transparent url(../slider-images/load-indicator.gif) no-repeat scroll 50% 50%;
}
/* main flash */
.lof-main-wapper{
margin-right:auto;
overflow:hidden;
background:transparent url(../slider-images/load-indicator.gif) no-repeat scroll 50% 50%;
padding:0px;
height:100%;
width:600px;
position:relative;
overflow:hidden;
}

.lof-main-wapper .lof-main-item{
overflow:hidden;
padding:0px;
margin:0px;
height:100%;
width:100%;
position:absolute;
}
.lof-main-wapper .lof-main-item img{
padding:0px;
width:600px;
}

.lof-main-item-desc{
z-index:100px;
position:absolute;
top:150px;
left:50px;
width:400px;
background:url(../slider-images/transparent_bg.png);

/* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
color:#FFF;
margin:0 8px;
padding:8px 0
}
.lof-main-item-desc h3 a{
color:#ffffff;
margin:0;
font-size:140%;
padding:20px 8px 2px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
.lof-main-item-desc h3 a:hover{
color:#ffffff;
text-decoration:underline;
}


/* item navigator */
ul.lof-navigator{
top:0;
padding:0;
margin:0;
position:absolute;
width:100%;
}
ul.lof-navigator li{
cursor:hand;
cursor:pointer;
list-style:none;
width:100%;
padding:0;
margin:0;
overflow:hidden;
}
.lof-navigator-outer{
position:absolute;
right:0;
top:00px;
z-index:100;
height:300px;
width:310px;
overflow:hidden;
color:#FFF
}
.lof-navigator li.active{
background:url(../slider-images/arrow-bg.png) no-repeat scroll left center;
color:#FFF
}
.lof-navigator li:hover{

}


.lof-navigator li h3{
color:#444444;
font-size:100%;
padding:15px 0 0 !important;
margin:0;

}
.lof-navigator li div{
background:url(../slider-images/transparent_bg.png);
color:#444444;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
}

.lof-navigator li.active div{
background:url(../slider-images/grad-bg.png);
color:#444444;
}
.lof-navigator li img{
height:60px;
width:60px;
margin:15px 15px 10px 0px;
float:left;
padding:3px;
border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
color:#ffffff;
}
.lof-next{
position:absolute;
top:0;
height:30px;
background:#F9F9F9;
display:block;
width:100%;
}
.lof-previous{
position:absolute;
bottom:0;
height:30px;
background:#F9F9F9;
display:block;
width:100%;
}
.center
{
margin:auto;
width:892px;
}
}

/* Hide the slider under 1220px wide */

@media (max-width: 1219px) {

.lof-slidecontent{
display: none
}
.lof-slidecontent .preload{
display: none
}
.lof-slidecontent .preload div{
display: none}

/* main flash */
.lof-main-wapper{
display: none}

.lof-main-wapper .lof-main-item{
display: none}

.lof-main-wapper .lof-main-item img{
display: none}

.lof-main-item-desc{
display: none}

.lof-main-item-desc p{
display: none}

.lof-main-item-desc h3 a{
display: none
}
.lof-main-item-desc h3 a:hover{
display: none
}


/* item navigator */
ul.lof-navigator{
display: none
}
ul.lof-navigator li{
display: none
}
.lof-navigator-outer{
display: none
}
.lof-navigator li.active{
display: none
}
.lof-navigator li:hover{

}


.lof-navigator li h3{
display: none
}
.lof-navigator li div{
display: none
}

.lof-navigator li.active div{
display: none
}
.lof-navigator li img{
display: none
}
.lof-navigator li.active img{
display: none
}
.lof-navigator li.active h3{
display: none
}
.lof-next{
display: none
}
.lof-previous{
display: none
}
.center
{
display: none}
}

Very rudimentary way of doing things, but works and doesnt appear on mobiles.

Now to try and work out, how to parse it as plain text and images under a certain screen resolution rather than hiding it completely  :D
54

Mick
Mar 09, 2013
Very cool man.  You said your site is 1200px?  idesign360 is 1200px. Velorooms looks like its at 100%  :shocked:
55

Dave (Dim)
Mar 09, 2013
yeh, sorry, the actual site is at 100% (which im just testing, this is the startings of our solid look going forward now that we are definately going to survive :D). Huge amounts of my traffic is tablet, so trying to be more responsive.

ive set the slider to change at 1220px as below that, the slider and sidebar combined are greater than the screen width and scrollbars appear and you start getting overlay.

just changed it, now ive just stripped out the main image and resized the container, so if you go down to a smaller screen size it shows the items but not the main image.

so it works on mobile.

rudimentary way of doing it but it works, now to restyle it so that it looks good in mobile with partial picture showing.
56

Mick
Mar 09, 2013
yeh, sorry, the actual site is at 100% (which im just testing, this is the startings of our solid look going forward now that we are definately going to survive :D). Huge amounts of my traffic is tablet, so trying to be more responsive.

ive set the slider to change at 1220px as below that, the slider and sidebar combined are greater than the screen width and scrollbars appear and you start getting overlay.

just changed it, now ive just stripped out the main image and resized the container, so if you go down to a smaller screen size it shows the items but not the main image.

so it works on mobile.
Right on. Responsiveness is the way to go these days with minimal options.  Thats one of my projects at the moment.  Been thinking tho' of updating this mod.  :wink:
57

Dave (Dim)
Mar 09, 2013
Jquery conflict *bangs head on desk* beer time.
58

Mick
Mar 09, 2013
Jquery conflict *bangs head on desk* beer time.

See if this works.... not sure tho'.
jQuery.noConflict() | jQuery API Documentation


		<script type="text/javascript">
                          //avoid conflict with other script
                          var $j = jQuery.noConflict();
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>
59



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


Advertisement  




 Mods
In this category you will find plugins related to SMF development. Here we present some new mods to help you get the most of your SMF installation.



go up