SimplePortal
Customization => Blocks and Modifications => Topic started by: Xarwin 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 (http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-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 (http://cssglobe.com/lab/easyslider1.7/easyslider1.7.zip) 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:
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:
<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 (http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider).
For those who want to use the jquery only once from the block, use this 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>
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!
-
Sounds nice, great work :)
-
In dutch please ?
-
Anyone have a demo of this up and running?
-
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.
-
did that like described - won't work for me - all pics are shown underneath each other....
-
This cannot work :) Script is looking for div with id=slider, but this div doesn't exist. So you have to change:
<div id="slidercontent">
<div id="slider">
same thing in screen.css:
slidercontent
slider
and to fix problems forum header:
#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
<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:
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
-
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
-
in screen.css remove:
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;
}
-
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
-
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.
-
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.
-
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.
-
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?
-
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.
-
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...
-
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.