Just a basic tutorial to show you how to quickly add Anything Slider to your forum on either portal or index or both...
Simple example on index:
![[Image: 30wouhx.png]]()
Edit: headerinclude
Find:
Add after:
Edit: Index
Find:
Add after:
Still also in index:
Find:
After add:
Simple example on portal:
![[Image: nyfhhw.png]]()
![[Image: 10opp2c.png]]()
Edit: Portal
Find:
Add after:
Still also in portal:
Find:
After add:
Download / Extract and upload the anything-slider folder to your forums root directory
![.zip]( "Zip File")
anything-slider.zip (Size: 1.61 MB / Downloads: 2)
Simple example on index:
Edit: headerinclude
Find:
Code:
{$stylesheets}Add after:
Code:
<!-- AnythingSlider -->
<link rel="stylesheet" href="{$mybb->asset_url}/anything-slider/css/anythingslider.css">
<script src="{$mybb->asset_url}/anything-slider/js/jquery.anythingslider.js"></script>
<script src="{$mybb->asset_url}/anything-slider/js/jquery.jatt.min.js"></script>
<!-- Ideally, add the stylesheet(s) you are going to use here,
otherwise they are loaded and appended to the <head> automatically and will over-ride the IE stylesheet below -->
<link rel="stylesheet" href="{$mybb->asset_url}/anything-slider/css/theme-metallic.css">
<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="{$mybb->asset_url}/anything-slider/js/jquery.anythingslider.video.js"></script>
<!-- Anything Slider optional plugins -->
<script src="{$mybb->asset_url}/anything-slider/js/swfobject.js"></script>
<script src="{$mybb->asset_url}/anything-slider/js/jquery.easing.1.2.js"></script>
<script>
// Set up Sliders
// **************
$(function(){
$('#slider1').anythingSlider({
theme : 'metallic',
easing : 'easeInOutBack',
navigationFormatter : function(index, panel){
return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
},
onSlideComplete : function(slider){
// alert('Welcome to Slide #' + slider.currentPage);
}
});
$('#slider2').anythingSlider({
theme : 'metallic',
easing : 'easeInOutBack',
navigationFormatter : function(index, panel){
return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
},
onSlideComplete : function(slider){
// alert('Welcome to Slide #' + slider.currentPage);
}
});
// tooltips
$.jatt();
});
</script>Edit: Index
Find:
Code:
{$headerinclude}Add after:
Code:
<!-- AnythingSlider #1 Index Inline Styling-->
<style>
#slider1 {
max-height: 350px !important;
min-width: 990px !important;
}
.textSlide ul li {
display: list-item !important;
}
#slider1 ul li {
font: 15px Georgia, Serif !important;
margin: 0 0 8px 0 !important;
}
.textSlide ul {
list-style: disc !important;
margin: 0 !important;
padding-left: 20px !important;
}
.textSlide ul li {
display: list-item !important;
}
.textSlide {
padding: 10px 30px !important;
}
.textSlide h3 {
font: 20px Georgia, Serif !important;
}
.textSlide h4 {
text-transform: uppercase !important;
font: 15px Georgia, Serif !important ;
margin: 10px 0 !important;
}
.rightside {
float: right !important;
margin: 0 0 2px 10px !important;
}
</style>
<!-- END AnythingSlider #1 Index Inline Styling -->Still also in index:
Find:
Code:
{$header}After add:
Code:
<!-- AnythingSlider #1 Index -->
<ul id="slider1">
<li><img src="{$mybb->asset_url}/anything-slider/images/slides/slide-civil-1.jpg" alt=""></li>
<li><img src="{$mybb->asset_url}/anything-slider/images/slides/slide-env-1.jpg" alt=""></li>
<li><img src="{$mybb->asset_url}/anything-slider/images/slides/slide-civil-2.jpg" alt=""></li>
<li><iframe width="480" height="385" src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></iframe></li>
<li class="panel5">
<div>
<div class="textSlide">
<span class="rightside">
<iframe width="500" height="325" src="https://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="325"></iframe>
</span>
<h3>Other Information</h3>
<br>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
<li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
<li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
<li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
</ul>
</div>
</div>
</li>
<li><img src="{$mybb->asset_url}/anything-slider/images/slides/slide-env-2.jpg" alt=""></li>
</ul>
<br /><!-- END AnythingSlider #1 Index -->Simple example on portal:
Edit: Portal
Find:
Code:
{$headerinclude}Add after:
Code:
<!-- AnythingSlider #2 Portal Inline Styling -->
<style>
#slider2 {
max-height: 350px !important;
min-width: 990px !important;
}
.textSlide ul li {
display: list-item !important;
}
#slider2 ul li {
font: 15px Georgia, Serif !important;
margin: 0 0 8px 0 !important;
}
.textSlide ul {
list-style: disc !important;
margin: 0 !important;
padding-left: 20px !important;
}
.textSlide ul li {
display: list-item !important;
}
.textSlide {
padding: 10px 30px !important;
}
.textSlide h3 {
font: 20px Georgia, Serif !important;
}
.textSlide h4 {
text-transform: uppercase !important;
font: 15px Georgia, Serif !important ;
margin: 10px 0 !important;
}
.rightside {
float: right !important;
margin: 0 0 2px 10px !important;
}
</style>
<!-- END AnythingSlider #2 Portal Inline Styling-->Still also in portal:
Find:
Code:
{$header}After add:
Code:
<!-- AnythingSlider #2 Portal -->
<ul id="slider2">
<li><img src="{$mybb->asset_url}/anything-slider/images/slides/slide-civil-1.jpg" alt=""></li>
<li><img src="{$mybb->asset_url}/anything-slider/images/slides/slide-env-1.jpg" alt=""></li>
<li><img src="{$mybb->asset_url}/anything-slider/images/slides/slide-civil-2.jpg" alt=""></li>
<li><iframe width="480" height="385" src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></iframe></li>
<li class="panel5">
<div>
<div class="textSlide">
<span class="rightside">
<iframe width="500" height="325" src="https://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="325"></iframe>
</span>
<h3>Other Information</h3>
<br>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
<li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
<li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
<li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
</ul>
</div>
</div>
</li>
<li><img src="{$mybb->asset_url}/anything-slider/images/slides/slide-env-2.jpg" alt=""></li>
</ul>
<br /><!-- END AnythingSlider #2 Portal -->Download / Extract and upload the anything-slider folder to your forums root directory
anything-slider.zip (Size: 1.61 MB / Downloads: 2)