Professional & Impressive. We provide top quality free SMF themes with excellent support.

SMF Content Slider v.1

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

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

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

It worked for me when I used it instead with a portal block. :D
48

How do you change the speed of the slider?
49

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

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

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

That explains it :)

Thanks
53

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

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

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

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

Jquery conflict *bangs head on desk* beer time.
58

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.
Commitment issues? Unsubscribe at any time.


Get 100% complete access to our entire collection and find out why SMF owners prefer our themes





Latest Discussions

Join the conversation