collapse collapse

* User Info

 
 
Welcome, Guest. Please login or register.
Did you miss your activation email?

* Who's Online

  • Dot Guests: 65
  • Dot Hidden: 0
  • Dot Users: 1
  • Dot Users Online:

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • {OCS}MasterSeal: STILL love SP :)
    November 24, 2018, 05:05:50 AM
  • ♦ Ninja ZX-10RR ♦: <3 aegersz
    September 13, 2018, 03:36:09 PM
  • aegersz: I STILL <3 LOVE SimplePortal
    September 13, 2018, 07:11:39 AM
  • aegersz: o LOVE you guys - Simple Portal rocks !
    May 09, 2018, 05:18:59 AM
  • Chen Zhen: our apologies for the site being down.. please read server issues topic
    March 22, 2018, 05:32:38 AM
  • {OCS}MasterSeal: LOL PLEASE forget I just posted that. I found the answer in my own dang post back in 2015. lol sorry!
    July 04, 2017, 10:47:55 PM
  • {OCS}MasterSeal: I know this SB isnt' for support, but I just have a general question. Who would I contact to find out where SP stores its block info? Is it DB driven or files? I searched the site but came up with nothing. probably my fault any insight is appreciated.
    July 04, 2017, 10:43:36 PM
  • ♦ Ninja ZX-10RR ♦: Excuse me but what does Simpleportal have to deal with that?
    February 05, 2017, 08:21:14 PM
  • WhiteEagle: of course IMHO that site appears to be dead :(
    February 04, 2017, 01:08:05 PM
  • WhiteEagle: If I can get that, then I'll use it for that site...
    February 04, 2017, 01:07:35 PM
  • WhiteEagle: decided to not use SMF for any projects, unless I can get a copy of the premium version of the fanfiction archive plugin
    February 04, 2017, 01:06:54 PM
  • expertdecisions: cloudflare
    January 28, 2017, 08:01:47 AM
  • aegersz: SM release 2.0.13 !
    January 12, 2017, 06:00:13 AM
  • raffo: Tks Emanuele, even if I didn't understand the fix :D
    November 07, 2016, 02:01:20 AM
  • emanuele: [link]
    November 01, 2016, 12:43:50 PM
  • emanuele: raffo: the English support board is a good place. ;)
    November 01, 2016, 12:43:38 PM
  • raffo: Where can I find the fix for the shoutbox?
    November 01, 2016, 05:06:09 AM
  • {OCS}MasterSeal: To the SP team, I make a point to come here and thank you as much as possible for your work.  so again, THANK YOU!
    October 28, 2016, 10:38:05 AM
  • emanuele: That's indeed funny, the limit is present only in the patch and not the full install.
    October 22, 2016, 06:14:58 PM
  • phantomm: and from what I see only patch is broken, full install package is fine
    October 21, 2016, 03:44:44 PM

* Recent Posts

Re: v 2.3.3 to v2.3.7 by ♦ Ninja ZX-10RR ♦
[December 11, 2018, 04:14:48 PM]


v 2.3.3 to v2.3.7 by rollingrock
[December 11, 2018, 09:36:20 AM]


[Block] Help with editing few lines on Simpleportal by Wallen
[December 09, 2018, 05:10:34 AM]


Re: LinkTree by Chen Zhen
[November 15, 2018, 02:24:51 PM]


Re: blocks showing user avatars by hulapyk
[November 15, 2018, 01:47:11 PM]

Blocks speak! Do you have an interest in getting more blocks - or even making your own? The Blocks Board is for you!

Author Topic: [Block] Easy Slider  (Read 16374 times)

0 Members and 1 Guest are viewing this topic.

Offline Xarwin

  • Semi Newbie
  • *
  • Posts: 12
  • SMF Version: 2.0.8
  • SP Version: 2.3.5
[Block] Easy Slider
« on: June 10, 2012, 09:18:45 AM »
Hello folks!

Since a short time I've been using Simple Portal and I'm loving it.
Therefor I'd like to share an easy block code which allows you to create a slider in no time.

The slider I will implant together with Simple Portal is "Easy Slider". Current version used: 1.7.
Follow my steps to get it working.
Note: this slider appears to be a bit slow on loading. Other than that it seems really fine.

SMF Version: 2.0.2.
SP Version: 2.3.5.


Step 1) Download the package given at the website.

Step 2) Unzip the css to your desktop or into a folder so you can edit it. Open up the file named "screen.css" and disable the first part from body to pre. You can disable the code by adding a /* before body. Search for "#content" and replace it with "#slidercontent".

After you did its a good idea to check a few background image urls. Fix them as you like to use them or keep it in the back of your head to edit them later. If you like to change them suited to this guide then change all paths to ../slider/ instead of ../images/.

Step 3) Upload the file named "screen.css" to your css theme folder, upload "easySlider1.7.js" to your script theme folder.

Create a new folder inside your theme folder and name it "slider". Copy all images from the folder "images" inside of it.

Step 4) Open up your current theme's index.template.php and search for "echo $context['html_headers'];".
Paste the following code below it:
Code: [Select]
echo'
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">";</script>
If you prefer to call the code only ONCE, which happens inside the block then you may skip this step.

Step 5) Create a HTML code block in whatever position you like and add the following code to it:

Code: [Select]
<script type="text/javascript" src="http://YOURSITE.org/Themes/THEMEURL/scripts/easySlider1.7.js"></script>
<link  href="http://YOURSITE.org/Themes/THEMEURL/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>

<div id="container">
<div id="content">

<div id="slidercontent">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
Simply safe the block and start editing it to your needs!
The slider is highly editable so if you would like to change certain things read the guide.

For those who want to use the jquery only once from the block, use this code:
Code: [Select]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://YOURSITE.org/Themes/THEMEURL/scripts/easySlider1.7.js"></script>
<link  href="http://YOURSITE.org/Themes/THEMEURL/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>

<div id="container">
<div id="content">

<div id="slidercontent">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="http://YOURSITE.org/Themes/THEMEURL/slider/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>

Note: don't forget to change the paths!

There we go.
I hope that this block is useful for many of you.
This is also my first guide how to get a block going. So sorry if my English sucks :P.
I am also not a professional coder but I like to try out a lot of stuff.
If anything is unclear, feel free to ask and I'll try to answer with the knowledge I have :).

Enjoy!
« Last Edit: June 11, 2012, 12:59:13 PM by Xarwin »

Offline Kryzen

  • Localizer
  • Language
  • *
  • Posts: 826
  • Gender: Male
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
Re: [Block] Easy Slider
« Reply #1 on: June 10, 2012, 04:12:58 PM »
Sounds nice, great work :)

weerforum

  • Guest
Re: [Block] Easy Slider
« Reply #2 on: June 10, 2012, 05:57:37 PM »
In dutch please ?

Offline FrizzleFried

  • Full Member
  • ***
  • Posts: 114
  • SMF Version: 2.0.5
  • SP Version: 2.3.5
Re: [Block] Easy Slider
« Reply #3 on: June 10, 2012, 10:43:23 PM »
Anyone have a demo of this up and running?

Offline Xarwin

  • Semi Newbie
  • *
  • Posts: 12
  • SMF Version: 2.0.8
  • SP Version: 2.3.5
Re: [Block] Easy Slider
« Reply #4 on: June 11, 2012, 12:07:00 PM »
I freshly installed it on my site but I didn't put it up for the public yet (I still need to customize it).
Once I did, I will show you my version of it :).

And weerforum, perhaps you could use google translation for a dutch version? ;).

Edit: small change in the guide, changed "content" to "slidercontent" in css.
Reason: already defined in the index.css.
« Last Edit: June 11, 2012, 12:58:01 PM by Xarwin »

Offline Inti31

  • Semi Newbie
  • *
  • Posts: 37
  • SP Version: 2.3.3
Re: [Block] Easy Slider
« Reply #5 on: June 13, 2012, 07:03:39 AM »
did that like described - won't work for me - all pics are shown underneath each other....
my forum

my mods - which I only made them work for 2.0 Gold:
Topics Filter v3.2 SMF 2.0 Gold
MemberNumber

Offline phantomm

  • Translator
  • *
  • Posts: 406
  • Gender: Male
  • Smile, tomorrow will be worse...
    • Polish ElkArte community
  • SMF Version: None
  • Elkarte Version: 1.0.5
Re: [Block] Easy Slider
« Reply #6 on: June 13, 2012, 07:58:55 AM »
This cannot work :) Script is looking for div with id=slider, but this div doesn't exist. So you have to change:
Code: (Find) [Select]
<div id="slidercontent">
Code: (Replace With) [Select]
<div id="slider">

same thing in screen.css:
Code: (Find) [Select]
slidercontent
Code: (Replace With) [Select]
slider

and to fix problems forum header:
Code: (Find and remove) [Select]
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:2em;
}
#header{
height:80px;
line-height:80px;
background:#5DC9E1;
color:#fff;
}

Another thing, this is for block, right?
So why there is
Code: [Select]
<div id="container">
<div id="content">
?

I'm pretty sure that this is in most custom themes, and ID's should be unique. This should be customized and closed after all or removed because this will probably mess up other site content.



I would use this code in PHP block:
Code: [Select]
global $settings, $boardurl;

echo'
<script type="text/javascript">!window.jQuery && document.write(unescape(\'%3Cscript src="http://code.jquery.com/jquery.min.js"%3E%3C/script%3E\'))</script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/easySlider1.7.js"></script>
<link  href="', $settings['default_theme_url'], '/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
jQuery(document).ready(function($){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>

<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="'.$boardurl.'/slider/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="'.$boardurl.'/slider/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="'.$boardurl.'/slider/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="'.$boardurl.'/slider/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="'.$boardurl.'/slider/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>';

Images are stored in folder named slider in root of our SMF installation
« Last Edit: June 13, 2012, 08:05:19 AM by phantomm »

Offline Inti31

  • Semi Newbie
  • *
  • Posts: 37
  • SP Version: 2.3.3
Re: [Block] Easy Slider
« Reply #7 on: June 13, 2012, 02:45:19 PM »
thx - works now

my testforum: http://alt.epica-forum.de/index.php

but the portalpage is now destroyed

http://alt.epica-forum.de/index.php - wrong layout
http://alt.epica-forum.de/index.php?action=forum - correct layout
« Last Edit: June 13, 2012, 05:00:46 PM by Inti31 »
my forum

my mods - which I only made them work for 2.0 Gold:
Topics Filter v3.2 SMF 2.0 Gold
MemberNumber

Offline phantomm

  • Translator
  • *
  • Posts: 406
  • Gender: Male
  • Smile, tomorrow will be worse...
    • Polish ElkArte community
  • SMF Version: None
  • Elkarte Version: 1.0.5
Re: [Block] Easy Slider
« Reply #8 on: June 13, 2012, 05:20:50 PM »
in screen.css remove:
Code: [Select]
body {
background:#fff url(../images/bg_body.gif) repeat-x;
font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
color:#333;
line-height:180%;
margin:0;
padding:0;
text-align:center;
}
h1{
font-size:180%;
font-weight:normal;
margin:0;
padding:0 20px;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:674px;
}
« Last Edit: June 15, 2012, 04:16:04 AM by phantomm »

Offline Inti31

  • Semi Newbie
  • *
  • Posts: 37
  • SP Version: 2.3.3
Re: [Block] Easy Slider
« Reply #9 on: June 13, 2012, 11:58:44 PM »
ups -your're right - thanx - i startet completly new and thought that I used my modified css (like described) - now it looks fine

http://alt.epica-forum.de/index.php

So now it would be nice to get a randomnized picture slide function - which shows all the pics are stored in a specific dir like /gallery....

Will try to do that with my rotate.php in stored in /slider
http://alt.epica-forum.de/slider/rotate.php

every time the page is refreshed (f5) then it will show another pic

« Last Edit: June 14, 2012, 12:01:20 AM by Inti31 »
my forum

my mods - which I only made them work for 2.0 Gold:
Topics Filter v3.2 SMF 2.0 Gold
MemberNumber

Offline Xarwin

  • Semi Newbie
  • *
  • Posts: 12
  • SMF Version: 2.0.8
  • SP Version: 2.3.5
Re: [Block] Easy Slider
« Reply #10 on: June 14, 2012, 07:05:47 AM »
I'm not quite sure if all of you followed my steps.
It includes information to change the current css and it should work by that.

Also, my example is up at my main website.
http://www.nexuscore.org/index.php -- the slider in the middle. It is customized of course.
« Last Edit: June 14, 2012, 07:19:43 AM by Xarwin »

Offline phantomm

  • Translator
  • *
  • Posts: 406
  • Gender: Male
  • Smile, tomorrow will be worse...
    • Polish ElkArte community
  • SMF Version: None
  • Elkarte Version: 1.0.5
Re: [Block] Easy Slider
« Reply #11 on: June 14, 2012, 07:24:10 AM »
I tested it in clean SMF 2.0.2 with SP 2.3.5 and didn't work, I did everything exactly as you explained.

Offline Xarwin

  • Semi Newbie
  • *
  • Posts: 12
  • SMF Version: 2.0.8
  • SP Version: 2.3.5
Re: [Block] Easy Slider
« Reply #12 on: June 14, 2012, 07:45:03 AM »
I tested it in clean SMF 2.0.2 with SP 2.3.5 and didn't work, I did everything exactly as you explained.

That is weird, perhaps I missed something.
I'll test it later on a clean install so I can figure out what I pointed out wrong.

Offline boo2

  • Semi Newbie
  • *
  • Posts: 34
  • SMF Version: 2.0.2
  • SP Version: 2.3.5
Re: [Block] Easy Slider
« Reply #13 on: October 02, 2012, 12:06:31 AM »
That was a complete waste of time. followed all the instructions and in the end non of it worked. Don't you all delete these things if they aren't going to work?
Using SMF 2.0.2 and Simple portal 2.3.5

Offline FrizzleFried

  • Full Member
  • ***
  • Posts: 114
  • SMF Version: 2.0.5
  • SP Version: 2.3.5
Re: [Block] Easy Slider
« Reply #14 on: August 12, 2013, 12:59:02 PM »
I followed each step in original post and even tried some of the fixes below and the best I can get is the images stacked on each other with a bullet next to each... no slider...

:(

EDIT: Nevermind ... I mistook "a responses call to edit the "script" as to edit the js file not the block code.  Working now.
« Last Edit: August 12, 2013, 01:05:15 PM by FrizzleFried »

Offline FrizzleFried

  • Full Member
  • ***
  • Posts: 114
  • SMF Version: 2.0.5
  • SP Version: 2.3.5
Re: [Block] Easy Slider
« Reply #15 on: August 12, 2013, 01:53:37 PM »
I'm not quite sure if all of you followed my steps.
It includes information to change the current css and it should work by that.

Also, my example is up at my main website.
http://www.nexuscore.org/index.php -- the slider in the middle. It is customized of course.

OK... any way we could get the added code to add text across the images as you have done... I also like the way the text moves independent from the image, etc... 

Offline josh4596

  • Semi Newbie
  • *
  • Posts: 21
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Re: [Block] Easy Slider
« Reply #16 on: April 10, 2015, 03:27:57 PM »
Sorry to post in such an old thread but I figured this is a better place than starting a new topic.

Is this supposed to be making use of the previous and next buttons? I'm using the php code and I got it working but none of the images (previous, next, bg_header & bg_body) show up. I've put the correct links in the css file but not having any luck. Only the numeric controls show up which of course don't use any images.

P.S I am also having another issue, view the attached picture. On any page that the easy slider appears on that bright aqua greenish box appears at the top of the page. This only happens if easy slider is on the page, if it's a page that the easy slider box doesn't appear on that doesn't happen.
« Last Edit: April 10, 2015, 04:01:27 PM by josh4596 »