Customization > Blocks and Modifications

[Block] Easy Slider

<< < (2/4) > >>

Inti31:
did that like described - won't work for me - all pics are shown underneath each other....

phantomm:
This cannot work :) Script is looking for div with id=slider, but this div doesn't exist. So you have to change:

--- Code: (Find) ---<div id="slidercontent">

--- End code ---

--- Code: (Replace With) ---<div id="slider">

--- End code ---

same thing in screen.css:

--- Code: (Find) ---slidercontent

--- End code ---

--- Code: (Replace With) ---slider

--- End code ---

and to fix problems forum header:

--- Code: (Find and remove) --- #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;
}

--- End code ---

Another thing, this is for block, right?
So why there is

--- Code: ---<div id="container">
<div id="content">

--- End code ---
?

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

Images are stored in folder named slider in root of our SMF installation

Inti31:
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

phantomm:
in screen.css remove:

--- Code: ---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;
}
--- End code ---

Inti31:
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

Navigation

[0] Message Index

[#] Next page

[*] Previous page