Customization > Blocks and Modifications

[Block] Easy Slider

(1/4) > >>

Xarwin:
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: ---echo'
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">";</script>
--- End code ---
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: ---<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>

--- End code ---
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: ---<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>

--- End code ---

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!

Kryzen:
Sounds nice, great work :)

weerforum:
In dutch please ?

FrizzleFried:
Anyone have a demo of this up and running?

Xarwin:
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.

Navigation

[0] Message Index

[#] Next page