[TUT] - Simply Add Anything Slider to your Index and or Portal (in 5 easy steps) *
* simply a quick share again of the tutorial by vintagedaddyo (me) from 2016 upon re-visting it just now while applying a few minor edits primarily very similar to the original tutorial but minor things were changed to get it working again) (*note: here is at least the simple tutorial for anyone still interested in say simply adding anything slider to their forum and then taking it from there... also note: i never really expanded upon this particular tutorial as I used other sliders primarily thus never really spent much time with this beyond the initial writing of tutorial as part of a tutorial list of sliders to add to mybb and this being the last added on that tutroial list simply added back then because it was a slider that is or was used on the mybb site)
ie:
![[Image: Forums-3.png]]()
1) download the required files: http://s000.tinyupload.com/index.php?fil...5722710034
2) extract the anything-slider.zip file
3) upload the extracted "anything-slider" directory to your forum root directory ie: forum/anything-slider
4) Edit Template: headerinclude
Find:
Add this after:
Next, for either 5.A or 5.B or both....
Now, if desired on the index page:
5.A) Edit Template: index
Find:
After it add this:
Find:
After it add this:
Now, if desired on the portal page:
5.B) Edit Template: portal
Find:
After it add this:
Find:
After it add this:
You would then keep modifying further for your usages...
Best of luck! Happy Editing!![Big Grin]( "Big Grin")
~ V
* simply a quick share again of the tutorial by vintagedaddyo (me) from 2016 upon re-visting it just now while applying a few minor edits primarily very similar to the original tutorial but minor things were changed to get it working again) (*note: here is at least the simple tutorial for anyone still interested in say simply adding anything slider to their forum and then taking it from there... also note: i never really expanded upon this particular tutorial as I used other sliders primarily thus never really spent much time with this beyond the initial writing of tutorial as part of a tutorial list of sliders to add to mybb and this being the last added on that tutroial list simply added back then because it was a slider that is or was used on the mybb site)
ie:
1) download the required files: http://s000.tinyupload.com/index.php?fil...5722710034
2) extract the anything-slider.zip file
3) upload the extracted "anything-slider" directory to your forum root directory ie: forum/anything-slider
4) Edit Template: headerinclude
Find:
{$stylesheets}
Add this after:
<!-- 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>
Next, for either 5.A or 5.B or both....
Now, if desired on the index page:
5.A) Edit Template: index
Find:
{$headerinclude}
After it add this:
<!-- AnythingSlider #1 Index Inline Styling-->
<style>
#slider1 a img {
width: 100%;
height: 100%;
}
#slider1 {
max-height: 350px !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 -->
Find:
{$header}
After it add this:
<!-- AnythingSlider #1 Index -->
<ul id="slider1">
<li><a href="{$mybb->asset_url}/portal.php"><img src="{$mybb->asset_url}/anything-slider/images/slides/index/slide-civil-1.jpg" alt=""></a></li>
<li><a href="{$mybb->asset_url}/search.php"><img src="{$mybb->asset_url}/anything-slider/images/slides/index/slide-env-1.jpg" alt=""></a></li>
<li><a href="{$mybb->asset_url}/memberlist.php"><img src="{$mybb->asset_url}/anything-slider/images/slides/index/slide-civil-2.jpg" alt=""></a></li>
<li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed 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"></embed></object></li>
<li class="panel5">
<div>
<div class="textSlide">
<span class="rightside"><object width="500" height="325"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="325"></embed></object></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><a href="{$mybb->asset_url}/misc.php?action=help"><img src="{$mybb->asset_url}/anything-slider/images/slides/index/slide-env-2.jpg" alt=""></a></li>
</ul>
<br /><!-- END AnythingSlider #1 Index -->
Now, if desired on the portal page:
5.B) Edit Template: portal
Find:
{$headerinclude}
After it add this:
<!-- AnythingSlider #2 Portal Inline Styling -->
<style>
#slider2 a img {
width: 100%;
height: 100%;
}
#slider2 {
max-height: 350px !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-->
Find:
{$header}
After it add this:
<!-- AnythingSlider #2 Portal -->
<ul id="slider2">
<li><a href="{$mybb->asset_url}/index.php"><img src="{$mybb->asset_url}/anything-slider/images/slides/portal/slide-civil-1.jpg" alt=""></a></li>
<li><a href="{$mybb->asset_url}/search.php"><img src="{$mybb->asset_url}/anything-slider/images/slides/portal/slide-env-1.jpg" alt=""></a></li>
<li><a href="{$mybb->asset_url}/memberlist.php"><img src="{$mybb->asset_url}/anything-slider/images/slides/portal/slide-civil-2.jpg" alt=""></a></li>
<li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed 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"></embed></object></li>
<li class="panel5">
<div>
<div class="textSlide">
<span class="rightside"><object width="500" height="325"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="325"></embed></object></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><a href="{$mybb->asset_url}/misc.php?action=help"><img src="{$mybb->asset_url}/anything-slider/images/slides/portal/slide-env-2.jpg" alt=""></a></li>
</ul>
<br /><!-- END AnythingSlider #2 Portal -->
You would then keep modifying further for your usages...
Best of luck! Happy Editing!
~ V