Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 690

[Tutorial] - Simply Add AnythingSlider Content Slider to your Index and or Portal

$
0
0
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:
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&amp;hl=en_US&amp;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&amp;hl=en_US&amp;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:
[Image: nyfhhw.png]

[Image: 10opp2c.png]

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&amp;hl=en_US&amp;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&amp;hl=en_US&amp;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

.zip   anything-slider.zip (Size: 1.61 MB / Downloads: 2)

Viewing all articles
Browse latest Browse all 690

Trending Articles